Firebase Auth Googleログイン時のリダイレクトドメインを変更する

公開日時
更新日時

Firebase Authを使った認証を導入する際、デフォルト設定だとリダイレクトドメインは↓に設定されている。

https://{projectId}.firebaseapp.com

このリダイレクトドメインをカスタムドメインに変更したいと思い、↓の記事を参考にGoogleログイン時のリダイレクトドメインを変更することにした。

対応手順

  • ドメインサービスにカスタムドメイン用のCNAMEを登録
auth.example.com CNAME {projectId}.firebaseapp.com
  • Firebase Hostingの「カスタムドメインを追加」で auth.example.com を追加

  • Firebase Authenticationの「承認済みドメイン」に auth.example.com を追加

  • GCPコンソールの「APIとサービス」 => 「認証情報」 => 「OAuth 2.0 クライアント ID」 => Web client (auto created by Google Service) を表示し、「承認済みのリダイレクト URI」に https://auth.example.com/__/auth/handler を追加

gcp auth redirect url
  • js側の authDomain にカスタムドメインを指定
const app = firebase.initializeApp({
  apiKey: '...',
  authDomain: 'auth.example.com',
  //...
})

通常であればここまでの対応でリダイレクトURLをカスタムドメインに変更できるが、今回のプロジェクトではFirebaseのAPIキーにリファラー制限を設定していた

そこで、GCPコンソールの「APIとサービス」 => 「認証情報」 => 「APIキー」 => Browser key (auto created by Google Service) を表示し、 「ウェブサイトの制限」 に auth.example.com を追加した。

これでFirebase Auth Googleログイン時のリダイレクトドメインをカスタムドメインに変更できた。


Related #firebase

SharedArrayBuffer updates in Android Chrome 88 and Desktop Chrome 92

クロスオリジン分離対応を実施

Firebase Emulator Suiteで起動しているFunctionsから本番のFirestoreにアクセスする

functionsのみエミュレータを使うようにするとできる

Firebase Functions呼び出し時に Error: function terminated. が発生した場合

firebase functions:logで詳細を確認できる

Local Emulator Suiteを使ってFirestoreのローカル開発を行う際に初期データ(seeds)を用意する

ローカル管理画面でDeveloperToolsを開くとwindow.firestoreが使える

「Unit testing security rules with the Firebase Emulator Suite」でセキュリティルールのtestを学ぶ

ローカルでセキュリティルールのtestができるようになったのはありがたい