• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

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

23.07.25 02:48 작성 23.07.25 02:57 수정 조회수 1.2k

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 키도 확인하였습니다. 혹시몰라 깃허브 예제코드와도 비교했지만 해결하지 못했습니다ㅠㅠ 무슨 문제일까요?

답변 3

·

답변을 작성해보세요.

0

박채연님의 프로필

박채연

질문자

2023.07.25

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

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

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

flat_white님의 프로필

flat_white

2023.07.30

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

0

박채연님의 프로필

박채연

질문자

2023.07.25

그래도 똑같습니다ㅠㅠ

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

0

안녕하세요 채연님.

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

 

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