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

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

https://{projectId}.firebaseapp.com

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

• Firebase Authで独自ドメインが使いたい
• JavaScript で Google ログインを使用して認証する  |  Firebase

対応手順

• ドメインサービスにカスタムドメイン用の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 を追加

• 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ログイン時のリダイレクトドメインをカスタムドメインに変更できた。