Firebase Authで独自ドメインが使いたい
はじめまして、Zenn 初投稿です。よろしくお願いします。
はじめに
Firebase Authentication で Twitter ログインなどを実装していると、デフォルトではリダイレクト時に https://[projectId].firebaseapp.com へアクセスし、それがブラウザのアドレスバーに表示されます。
独自ドメインで運用している Web サービスの場合、これがそのまま表示されるのはダサくて https://auth.example.com とかでアクセスさせたくなりませんか？
なりますよね。
公式ドキュメントの罠
Firebase の公式ドキュメントにリダイレクト ドメインのカスタマイズという項目があります。これで勝った！と思いきや少し罠がありました。
むしろ、罠がなければこんな記事は必要ありません。
どんな罠が仕掛けられているかというと、こちらです。
- カスタム ドメイン用の CNAME レコードを作成し、プロジェクトの firebaseapp.com のサブドメインを指し示すようにします。
auth.custom.domain.com CNAME my-app-12345.firebaseapp.com
ただ CNAME レコードを登録するだけでは当然証明書がついてきません。
こうなります。
対策
証明書の発行と https://[projectId].firebaseapp.com に独自ドメインで接続するために Firebase Hositing を使用します。
上記リンクのドキュメントに沿って、Firebase Hosting のカスタム ドメインを追加から独自ドメインを登録するだけです。
証明書が登録されるまでにすこし時間がかかります。
気長に待ちましょう。
登録がすんだらあとはこちらの手順に従って設定すれば Firebase Auth に独自ドメインからアクセスが可能になります。
手順まとめ
例) auth.example.comドメインを使用して Twitter ログインを実装したい場合。
- Firebase Hosting に
auth.example.comを追加します。 - Firebase コンソールで、Authentication の承認済みドメインに
auth.example.comを追加します。 - Twitter の Developer Portal で、Callback URLs に (
https://auth.example.com/__/auth/handler) を設定します。 - Firebase 構成ファイルの
authDomainにauth.example.comを設定します。
Q&A
Q: Hosting 料金はかかりませんか？
A: この用途のみで使用する場合、 (2021/01/11 現在) 料金はかからないようです。
さいごに
ここまで読んでいただきありがとうございました。
間違い等ありましたら、コメントでご指摘いただけますと幸いです。
とっても便利な Firebase うまく使っていいサービスを作っていきましょう！
Discussion