注記
この記事の投稿者は初学者であり、自身の学習の備忘録目的で記事投稿を行なっております。
情報の正確さには最大限注意をしておりますが、もし誤り等がございましたらお知らせいただけますと幸いです。

ご覧いただきありがとうございます！
Ito と申します！
React初学者です。

ReactでのSPAアプリを作成中、Firebase Authenticationを用いたユーザー認証機能を実装する際に盛大に(?) ハマってしまったので備忘録として残します。

動作環境

開発環境

React v.18.2.0
Webブラウザ: Google Chrome
サーバー:localhost接続

エラーの詳細

`INTERNAL ASSERTION FAILED: Pending promise was never set firebase`

どのような時に発生するエラーか？

ポップアップを開いてGoogleアカウント認証を行う機能において、ポップアップを開いて認証を行った後に発生していました。
ポップアップには自分のGoogleアカウントは表示されているので、Firebase側との接続は問題なさそうに思えました。

ただ、ポップアップが開かれる際の挙動が怪しい...
認証用のポップアップがなぜか2つ開かれます。

調べた結果

Googleで検索するも、すでにissueとして取り上げられており、Closeしているようでした。
(このケースでは、FireFoxを使っている場合に発生するような記述あり。流し読みなので間違えてたらすみません🙇)

ファイル構成

Firebase設定用ファイル

(公式ドキュメント通り)

src/firebase.js

import { initializeApp } from "firebase/app";
import { getAuth, GoogleAuthProvider } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

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_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const provider = new GoogleAuthProvider();
const db = getFirestore(app);

export { auth, provider, db }

ポップアップ認証用ファイル

(こちらもほぼ公式ドキュメント通り)

src/components/AuthGoogleSIgninPopup.jsx

import { signInWithPopup } from "firebase/auth";
import { auth, provider } from "./firebase";

const AuthGoogleSIgninPopup = () => {
  signInWithPopup(auth, provider)
  .then((result) => {
    const user = result.user;
    console.log(result)
  }).catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
  });
};

export default AuthGoogleSIgninPopup;

`App.js`

App.js

// ...省略
export default function App() {
  return (
    <Router>
      <Routes>
        <Route path="/login" element={<AuthGoogleSIgninPopup />} /> 
      </Routes>
    </Router>
  );
};

上記の通り、ポップアップ認証用ファイルをコンポーネントとしてエクスポートし、
ユーザーが/loginパスにアクセスした際、コンポーネントとして読み込むようにしていました。

こう解決した

ポップアップ認証用ファイルをコンポーネントとして読み込むのではなく、onClickで関数として呼び出すように修正すると正常に認証されました！

src/components/Header.jsx

<SigninButton onClick={() => AuthGoogleSIgninPopup()}>Sign In</SigninButton>

振り返り

「自分のドキュメント読解力が未熟なだけで、こんな間違いは誰もしないのでは・・・？」
という疑念も頭をよぎりましたが、誰かのお役に立てれば幸いです。
お読みいただきありがとうございました🙇