🍃

React&FirebaseでErrorが...

2022/01/22に公開

ReactでFirebase Authenticationを利用

ReactでFirebaseの認証機能を利用していました。ローカル環境ではうまく動いていたため
本番環境にデプロイすることにしました。すると画面が真っ白に...
コンソールにErrorが表示されていました。

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

問題のコード

  import 'firebase/compat/auth';
  import 'firebase/compat/firestore';
  import firebase from 'firebase/compat/app';

  const firebaseConfig = {
	  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
	  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
	  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
	  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
	  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGE_SENDER_ID,
	  appId: process.env.REACT_APP_FIREBASE_APP_ID,
  };

  firebase.initializeApp(firebaseConfig);
  export const auth = firebase.auth();

解決策

  #before
  export const auth = firebase.auth();
  #after
  const auth = firebase.auth();
  export default auth

exportの部分をdefault exportsに変更することにより解決しました。

私の備忘録と同じエラーにぶつかった人の手助けになれば良いと思い記述させていただきました。

Discussion