Firebase Authentication を使ってログイン機能を実装する際に、いくつかエラーに遭遇して手が止まりました。この記事では、よくあるハマりどころ（エラー例）と、実際にどう解決していくかの考え方をまとめます。
※内容はサンプルなので、あとであなたのプロジェクト事情に合わせて具体例を差し替えてOKです。
今回やりたかったこと
- メール/パスワードでログインできるようにする
- ログイン状態を保持して、ページ遷移しても認証が切れないようにする
- 未ログインならログインページへリダイレクトする
技術スタック例（サンプル）
- React / Next.js
- Firebase Authentication
- TypeScript
ハマったこと①：auth/invalid-api-keyが出る
症状
ログインボタンを押すと、コンソールに以下のようなエラーが出る。
- FirebaseError: Firebase: Error (auth/invalid-api-key).
原因（ありがち）
- .env の値が間違っている / 空
- NEXT_PUBLIC_ など、フロントで参照できる prefix を付けていない
- Firebase プロジェクトの設定値を別プロジェクトのものと混ぜた
解決
- .env に必要なキーが入っているか確認
- Next.jsなら フロントで使う環境変数は NEXT_PUBLIC_ を付ける
- Firebaseコンソール → プロジェクト設定 → Webアプリ設定の値をコピペし直す
ハマったこと②：auth/operation-not-allowedが出る
症状
ユーザー作成やログイン実行時に失敗する。
- FirebaseError: Firebase: Error (auth/operation-not-allowed).
原因（ありがち）
Firebase側でログイン方法（プロバイダ）が有効になっていない。
解決
Firebaseコンソール → Authentication → Sign-in method で
「メール/パスワード」「Google」など、使う方法を 有効化 する。
ハマったこと③：ログインできたのにリロードで状態が消える
症状
- ログイン直後はOK
- でもページをリロードすると未ログイン扱いになる
- currentUser が null のままに見える
原因（ありがち）
- currentUser は「最初の1回」は null になりやすい（初期化・復元待ち）
- 認証状態は onAuthStateChanged で監視する必要がある
解決の方針
- アプリ起動時に onAuthStateChanged をセット
- 「認証チェック中」の間はローディングを出す
（未ログインと決めつけてリダイレクトすると、画面がチラつきやすい）
まとめ：Firebase Authは「設定」と「初期化のタイミング」で詰まりやすい
Firebase Auth の実装はコード自体はシンプルでも、
- Firebaseコンソール側の設定
- 環境変数
- 認証状態の監視（onAuthStateChanged）
- Next.js の SSR/CSR 境界
このあたりでハマりやすいです。
もしこれから実装する人がいたら、まず「エラー文をそのまま検索」→「Firebase側の設定確認」→「初期化タイミング確認」の順で潰すのがおすすめです。