Firebase AuthのGoogle認証でカスタムドメインを利用する

とっても便利なFirebase Authentication。
そのままだと、認証時のドメインがこんな感じになる。。

Cloudflareと一緒に使うといい感じに設定できたので、
そのときの備忘録。

公式ドキュメントだとこのあたり。
・Google ログインのリダイレクト ドメインのカスタマイズ ｜ Firebase

1. CloudflareのDNSの設定

まずは、利用したいカスタムドメインの設定する。
設定値はこんな感じ。

• タイプ: CNAME
• 名前: (好きな名前)
• コンテンツ: <FirebaseのProject ID>.firebaseapp.com

ちなみに、SSL/TLS 暗号化モードはフルに設定。

2. Firebase Consoleの設定

Firebase コンソールのAuthentication > Sign-in methodに移動して、
承認済みドメインにDNSに登録したドメインを追加。

3. GCP Consoleの設定

GCPのConsoleを開いて、
「APIとサービス」の「認証情報」に移動。
「OAuth 2.0 クライアント ID」の「Web Client」を選択。

「承認済みのリダイレクトURI」にカスタムドメインのURLを追加。
https://<custom-domain>/__/auth/handler

これで保存すればOK!!

4. 初期化時にカスタム ドメインを指定

const config = {
  // カスタムドメインに変更
  authDomain: 'auth.sssapi.app',
  // ...略
};
firebase.initializeApp(config);

これでOK！！

そうすると、こんな感じになる(´ω｀)

注意

今回はCloudflareを使っているので、うまくいったけど、
DNSサービスだけだと証明書を設定してくれないので注意。
リダイレクトすると、証明書がないよって警告が出てしまう。。

※お名前やGoogle Domainsだとうまくいかなかった。。

以下の記事でFirebase Hostingを使った回避策が乗ってるけど、
すでにHostingを使っている場合は、複数のホスティングサイト機能とかを使う必要がある。
・Firebase Authで独自ドメインが使いたい

参考にしたサイト様

• Google ログインのリダイレクト ドメインのカスタマイズ ｜ Firebase
• Firebase Authで独自ドメインが使いたい