くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

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

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

f:id:wannabe-jellyfish:20210714170507p:plain

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

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

1. CloudflareのDNSの設定

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

f:id:wannabe-jellyfish:20210714170522p:plain

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

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

f:id:wannabe-jellyfish:20210714170632p:plain

2. Firebase Consoleの設定

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

f:id:wannabe-jellyfish:20210714170645p:plain

3. GCP Consoleの設定

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

f:id:wannabe-jellyfish:20210714170827p:plain

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

f:id:wannabe-jellyfish:20210714170955p:plain

これで保存すればOK!!

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

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

これでOK!!

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

f:id:wannabe-jellyfish:20210714171022p:plain

注意

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

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

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

参考にしたサイト様