인프런 커뮤니티 질문&답변

안녕하세요. 로그인 버튼 클릭시 콘솔창에 다음과 같은 에러가 발생합니다.

rebaseError: Firebase: Error (auth/auth-domain-config-required).
    at createErrorInternal (index-16e22603.js:497:1)
    at _assert (index-16e22603.js:503:1)
    at getIframeUrl (index-16e22603.js:9318:1)
    at _openIframe (index-16e22603.js:9343:1)
    at async BrowserPopupRedirectResolver.initAndGetManager (index-16e22603.js:9609:1)
w

https://firebase.google.com/docs/reference/js/v8/firebase.auth.Auth

공식 문서를 보니 authDomain configuration is not provided 일때 발생하는 에러라고 합니다.

auth/auth-domain-config-required

Thrown if authDomain configuration is not provided when calling firebase.initializeApp(). Check Firebase Console for instructions on determining and passing that field.

아래는 로그인버튼 컴포넌트에 onClick입니다.

코드상에는 에러가 발생하지 않았습니다.

<GoogleLoginButton
          onClick={() => {
            signInWithPopup(FirebaseClient.getInstance().Auth, provider)
              .then((result) => {
                console.info(result.user);
              })
              .catch((error) => {
                console.error(error);
              });
          }}
        />

루트 폴더에 .env 파일도 잘 있구요 ㅜㅜ

아래는 루트 폴더에 next.config.js 파일입니다.

module.exports = {
  reactStrictMode: true,
  publicRuntimeConfig: {
    publicApiKey: process.env.publicApiKey || '',
    authDomain: process.env.FIREBASE_AUTH_HOST || '',
    projectId: process.env.projectId || '',
  },
};

로그인 버튼 컴포넌트도 강사님 코드와 일치합니다..

아래는 models/firebase_client.ts 입니다.

원인이 뭘까요!?

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

const { publicRuntimeConfig } = getConfig();

/** 환경변수는 node.js이기 때문에 서버에서 사용할 수 있고, 클라이언트에서 바로 접근할 수 없기 때문에 config 설정을 해주고
 * 아래처럼 가져와서 쓸 수 있도록 해준다.
 */
const FirebaseCredentials = {
  apiKey: publicRuntimeConfig.apiKey,
  authDomain: publicRuntimeConfig.authDomain,
  projectId: publicRuntimeConfig.projectId,
};

/** Firebase의 Authentication 모듈을 사용하기 위해 FirebaseClient 클래스를 정의하는 코드 */
export default class FirebaseClient {
  private static instance: FirebaseClient;

  private auth: Auth;

  /** 이미 초기화된 Firebase 애플리케이션이 있는지 검사하고, 없다면 FirebaseCredentials를 사용하여 Firebase 애플리케이션을 초기화 */
  public constructor() {
    /** 앱이 몇 개 있는지 찾는 것 */
    const apps = getApps();
    /** 앱이 한 번도 초기화되지 않았다면 초기화를 시작 */
    if (apps.length === 0) {
      console.info('firebase client init start');
      initializeApp(FirebaseCredentials);
    }
    /** 초기화가 되었으면 Auth를 가져와서 할당 */
    this.auth = getAuth();
    console.info('firebase auth');
  }

  /** 인스턴스를 가져옴 */
  public static getInstance(): FirebaseClient {
    if (FirebaseClient.instance === undefined || FirebaseClient.instance === null) {
      FirebaseClient.instance = new FirebaseClient();
    }
    return FirebaseClient.instance;
  }

  /** auth를 반환 */
  public get Auth(): Auth {
    return this.auth;
  }
}