inflearn logo
강의

Course

Instructor

Learn Front-End DO IT Coding While Making (Next.js, Typescript)

Add firebase client code

FirebaseError: Firebase: Error (auth/invalid-api-key).

1830

cccodus3135886

8 asked

0

안녕하세요!

강의대로 따라하다가 FirebaseError: Firebase: Error (auth/invalid-api-key). 오류가 나왔습니다.

스크린샷 2023-07-25 02.45.31.pngmodel/firebase_client.ts 부분입니다.

import { initializeApp, getApps } from 'firebase/app';
import { Auth, getAuth } from 'firebase/auth';
import getConfig from 'next/config';

const { publicRuntimeConfig } = getConfig();

const FirebaseCredentials = {
  apiKey: publicRuntimeConfig.apiKey,
  authDomain: publicRuntimeConfig.authDomain,
  projectId: publicRuntimeConfig.projectId,
};

export default class FirebaseAuthClient {
  public static instance: FirebaseAuthClient;

  private auth: Auth;

  public constructor() {
    const apps = getApps();
    if (apps.length === 0) {
      console.log('firebase initializeApp');
      initializeApp(FirebaseCredentials);
    }
    this.auth = getAuth();
    console.log('firebase auth client constructor');
  }

  public static getInstance(): FirebaseAuthClient {
    if (!FirebaseAuthClient.instance) {
      FirebaseAuthClient.instance = new FirebaseAuthClient();
    }
    return FirebaseAuthClient.instance;
  }

  public get Auth(): Auth {
    return this.auth;
  }
}

next.config도 확인했습니다ㅠㅠ

스크린샷 2023-07-25 02.47.45.png

스크린샷 2023-07-25 02.40.50.png.env 파일명도 확인했고, firebase일반설정에 들어가 웹 API 키도 확인하였습니다. 혹시몰라 깃허브 예제코드와도 비교했지만 해결하지 못했습니다ㅠㅠ 무슨 문제일까요?

next.js

Answer 3

0

cccodus3135886

스크린샷 2023-07-25 13.14.33.png수정해도 똑같은 오류 입니다ㅠㅠ

0

totuworld

이제 값이 제대로 들어가는지 의심해야하는 단계군요.

FirebaseCredentials 를 initializeApp에 넣기 전에 console.log(FirebaseCredentials) 추가하셔서 값 어떤게 찍히는지 확인해주세요.

0

esther615kim

이거 해결하셨는지 궁금하네요..!

0

cccodus3135886

그래도 똑같습니다ㅠㅠ

0

totuworld

projectid 도 blah blah가 맞나요? 같은 이름이 많으면 288ac 처럼 뒤에 뭐가 붙을꺼거든요

0

totuworld

안녕하세요 채연님.

.env 파일에 FIREBASE_AUTH_HOST에 들어간 중괄호 빼보세요!

 

FIREBASE_AUTH_HOST=blah-blah-288ac.firebaseapp.com

post하는 경우에 uid 설정

0

138

1

vscode bgColor 바로 표시되기 설정방법 및 chakra-ui img src 설정관련

0

507

2

클래스 방식말고 (2)

0

327

1

클래스 방식말고

0

311

1

배포 후 오류

0

1150

3

const resp = await fetch(`/api/messages.list?uid=${uid}`)가 404에러가 뜹니다

0

438

1

localhost:3000/api/user.info/totuworld 404 에러가 뜹니다.

0

436

3

사용자를 찾을 수 없다.

0

378

1

2. 사용자 API 만들기 => 강의는 짧지만 백엔드 api 만드는 기본 내용 다 들어가 있음 주의하세요!!

0

379

1

toast 처리부터 오류발생

0

599

3

Vercel 배포 후 thumbnail api 에러 발생합니다.

0

705

1

[~~].toStr에 대해

0

248

1

firebase admin 환경 초기화 하는 부분 질문입니다.

0

405

1

/api/[screenName].ts API에 대해 문의드립니다.

0

339

1

구글 가입 버튼 오류: redirect_uri_mismatch

0

535

1

mac m1 node 14버전 설치 에러

0

642

1

전체 예제 소스좀 올려주세요

0

445

1

R_CONNECTION_TIMED_OUT 오류

0

624

1

로그인 버튼 클릭시 auth/auth-domain-config-required 에러 발생

0

707

1

@types/react를 인식하지 못하는 에러

0

2826

3

thunder client로 get 요청시 무한로딩

0

1152

1

firebase auth 인증 질문

0

1206

1

router 관련 질문입니다.

0

380

1

자동 줄바꿈

0

379

1