🔐

Firebase Authで独自ドメインが使いたい

2 min read

はじめまして、Zenn 初投稿です。よろしくお願いします。

はじめに

Firebase Authentication で Twitter ログインなどを実装していると、デフォルトではリダイレクト時に https://[projectId].firebaseapp.com へアクセスし、それがブラウザのアドレスバーに表示されます。

独自ドメインで運用している Web サービスの場合、これがそのまま表示されるのはダサくて https://auth.example.com とかでアクセスさせたくなりませんか?
なりますよね。

公式ドキュメントの罠

Firebase の公式ドキュメントにリダイレクト ドメインのカスタマイズという項目があります。これで勝った!と思いきや少し罠がありました。

むしろ、罠がなければこんな記事は必要ありません。

https://firebase.google.com/docs/auth/web/twitter-login#expandable-2

どんな罠が仕掛けられているかというと、こちらです。

  1. カスタム ドメイン用の CNAME レコードを作成し、プロジェクトの firebaseapp.com のサブドメインを指し示すようにします。
auth.custom.domain.com CNAME my-app-12345.firebaseapp.com

ただ CNAME レコードを登録するだけでは当然証明書がついてきません。

こうなります。

エラーページ画像

対策

証明書の発行と https://[projectId].firebaseapp.com に独自ドメインで接続するために Firebase Hositing を使用します。

https://firebase.google.com/docs/hosting/custom-domain

上記リンクのドキュメントに沿って、Firebase Hosting のカスタム ドメインを追加から独自ドメインを登録するだけです。

証明書が登録されるまでにすこし時間がかかります。
気長に待ちましょう。

登録がすんだらあとはこちらの手順に従って設定すれば Firebase Auth に独自ドメインからアクセスが可能になります。

手順まとめ

例) auth.example.comドメインを使用して Twitter ログインを実装したい場合。

  1. Firebase Hosting に auth.example.com を追加します。
  2. Firebase コンソールで、Authentication の承認済みドメインに auth.example.com を追加します。
  3. Twitter の Developer Portal で、Callback URLs に (https://auth.example.com/__/auth/handler) を設定します。
  4. Firebase 構成ファイルの authDomainauth.example.com を設定します。

Q&A

Q: Hosting 料金はかかりませんか?
A: この用途のみで使用する場合、 (2021/01/11 現在) 料金はかからないようです。

さいごに

ここまで読んでいただきありがとうございました。
間違い等ありましたら、コメントでご指摘いただけますと幸いです。

とっても便利な Firebase うまく使っていいサービスを作っていきましょう!

参考