FirebaseのGoogle認証でコケた件

はじめに

原神、かろうじて続いてます。こんにちは。
要点は、「Chrome VS 強化型トラッキング防止機能、からの、リダイレクトURIとリクエストするredirect_uriが一致しないとエラーが出る 」ことです。
タイトル悩みましたが、ざっくりFirebaseでのAuthenticationにまつわるメモになります。

構成

• Firebase 9.16.0
• React 18.2.0

Google認証の設定

まずFirebaseの機能、Authenticationを使ってログイン/ログアウトの実装をしてあります

ブラウザごとの挙動

Chromeばかりで検証を行っていて、他のブラウザで検証してみると、ブラウザの種類によって、Firebaseの機能であるAuthenticationのGoogle認証を使ってのログインが出来ないことが分かりました。（メール認証は問題無し）

ブラウザ	Google認証	メール認証
Chrome	○	○
Firefox	✖	○
Safari	✖	○

Firefox強化型トラッキング防止機能を無効化

ChromeではOKでも、なぜFirefoxやSafariではNGなのか？
試しにFirefoxの強化型トラッキング防止機能を無効にすると
Firefoxからログインは成功しました

▼こちらのサイトを参考にしました。

It needs to be disabled for the site or globally for Firebase Authentication to work. If Enhanced Tracking Protection is enabled, onAuthStateChanged is called with null, even when you authenticated successfully.
（Google翻訳）
Firebase Authentication が機能するには、サイトまたはグローバルで無効にする必要があります。強化されたトラッキング防止が有効になっている場合、認証に成功した場合でも onAuthStateChanged が null で呼び出されます。

公式ドキュメント

signInWithRedirectをヒントにこちらの公式ドキュメントを参考にした。

オプション 1: カスタム ドメインを authDomain として使用するように Firebase 構成を更新する

authDomain: "<the-domain-that-serves-your-app>",

これを再設定

.env

REACT_APP_FIREBASE_API_KEY="任意"
REACT_APP_FIREBASE_AUTH_DOMAIN="任意" //ココを再設定
REACT_APP_FIREBASE_PROJECT_ID="任意"
REACT_APP_FIREBASE_STORAGE_BUCKET="任意"
REACT_APP_FIREBASE_MESSAGE_SENDER_ID="任意"
REACT_APP_FIREBASE_APP_ID="任意"

REACT_APP_FIREBASE_AUTH_DOMAINに割り当てるURLは以下から再設定。

1. ProjectID.firebaseapp.com
2. ProjectID.web.app
3. 独自ドメイン

1が書き込まれていた
1と2はFirebaseプロジェクトを作成した時、デフォルトで割り当てられるURL
3のURLを運用に採用するので3のURLで再設定した。

エラー400に対処する

環境変数を修正して、ビルド&デプロイし、ログインを試したら
はい、エラー来ました

エラー 400: redirect_uri_mismatch

GoogleCloudでAPI設定

▼エラー 400: redirect_uri_mismatchでググってたどり着いたサイト

Google Developer ConsoleのAuthorized Redirect URIsをwwwのURLに更新することで解決

（手順）
① GoogleCloudへアクセス
② APIとサービスメニュー配下の「認証サービス」を選択
③ OAuth 2.0 クライアント IDのうちの「Web client」を選択
④ 承認済みの JavaScript 生成元を設定（追加した）
⑤ 承認済みのリダイレクト URIを設定（追加した）

（追加する前に確認したこと）
① 承認済みの JavaScript 生成元の欄「任意のプロジェクトID.firebaseapp.com」を確認（他は、「http://localhost」と「http://localhost:5000」だった）
② 環境変数のauthDomainを一旦「任意のプロジェクトID.firebaseapp.com」に戻した
③ 任意のプロジェクトID.firebaseapp.comで、Firefox、Safariでログインを試行
④ 前項でのログインは成功

繰り返しますが、承認済みの JavaScript 生成元の欄に、デフォルトで「任意のプロジェクトID.firebaseapp.com」が項目に入っています。
そこに思い当たるURIを追加（この場合採用する独自ドメインを追加）
承認済みのリダイレクト URIを設定（この場合採用する独自ドメインを追加）

（結果）

ブラウザ	Google認証	メール認証
Chrome	○	○
Firefox	○	○
Safari	○	○

問題は解決されました。

まとめ

①APIのURIの設定

• 承認済みの JavaScript 生成元
• 承認済みのリダイレクト URI

②環境変数の設定

• authDomain

（注意）
authDomainと承認済みのリダイレクト URIはマッチ するように設定する
リダイレクトURIとリクエストするredirect_uriが一致しないとエラー が出ます
authDomainは任意の1つにしか設定できない。（ハズ）
もし、複数設定できる場合があれば教えてほしいです。

以上