はじめに

Firebase Authenticationで認証を組み込むとき、何も設定しないとFirebaseのデフォルトのドメインになってしまう（以下はGoogleの場合）。

これだとカスタムドメインを利用してサイトを構築していても、認証後のリダイレクト先とみているサイトのドメインがちぐはぐでユーザーからするとかなり混乱する。

というわけでこのauthDomainもカスタムドメインにしたいと思うだろう。今回はカスタムドメインの管理をCloudflareで行っている（ネームサーバがCloudflareである）場合に、Google ログインのリダイレクトドメインのカスタマイズに書かれている方法とは少し違った方法でも、要件を実現できるのでそれをやってみたいと思う。

やってみる

認証後のリダイレクト先となるカスタムドメインに対するCNAMEレコードを以下のように設定する。

これで元々Firebase AuthenticationのauthDomainである****.firebaseapp.comに対してauth.<カスタムドメイン>というエイリアスが設定される。

あとは、Google ログインのリダイレクトドメインのカスタマイズに書かれている通りに以下を行う。

認可済みドメインのリストにカスタムドメインを追加
OAuth設定ページで、リダイレクトページの URL（https://auth.custom.domain.com/__/auth/handler ）を許可リストに登録
authDomainにカスタムドメインを指定

ここまで完了すると、以下のように認証時のGoogleへの認証リクエストのURIが以下のようにカスタムドメインのものになり、また認証画面でリダイレクト先に表示されるドメインもカスタムドメインになる。

なぜFirebase Hostingの設定なしでも認証後のリダイレクトをカスタムドメインにできるか？

まず、HTTPS通信についての予備知識が必要になるので、それについて話をしたいと思う。

HTTPSはSSL/TLSによる暗号通信のことだが、TLSハンドシェイクと呼ばれるやり取りをして暗号通信を確立する。TLSハンドシェイクの詳細は省くが、今回の話で重要なポイントとしてサーバ証明書がTLSハンドシェイクをする際には必須であるという事。
つまり、ブラウザからサーバへリクエストを送る際には、そのサーバが信頼できるか？という確認が必ず行われ、この信頼性の確認のためにサーバ証明が必要になる。

仮にカスタムドメインを利用したいとなった時は、DNSのCNAMEレコードでエイリアスにする。この時、DNSは名前解決の仕組みなので、auth.example.comをブラウザに打ち込んでリクエストを送る際に、auth.example.comは****.firebaseapp.comですね、そこにアクセスしてくださいとしか教えてくれない（正確には少し名前解決の手順の説明としては違うが、今回の説明の趣旨ではこの理解で十分）。

DNSに教えてもらった通り、****.firebaseapp.comのサーバにリクエストが届いて、サーバ証明書をもらうが、この時、****.firebaseapp.comは自身のドメインfirebaseapp.comであることを証明するサーバ証明書しか持っていない。

ので、ブラウザからすると、auth.example.comなのにfirebaseapp.comの証明書が来たぞ、これはおかしい！となる。なのでChromeであれば以下のような警告が表示される。

そこでauth.example.comに対するサーバ証明書が必要になるが、Firebase Hostingではこの証明書を発行してくれる仕組みがある。それがGoogle ログインのリダイレクトドメインのカスタマイズの手順の一番最初のHosting 用にドメインを設定するの手順。
この手順ではドメインの所有確認をしてそれに問題がなければ、auth.example.comに対するサーバ証明書を代理で発行してくれる。そしてそれをブラウザからのリクエスト時に返すことで問題なく通信できるようになっている。

実際にFirebase Hostingでカスタムドメインを設定すると、以下のようにGoogleの認証局から証明書が発行されていることが確認できる（https://www.sslshopper.com/ssl-checker.html というサイトでは以下のような内容が確認できる）。

前置きが長くなったが、つまり、証明書さえちゃんと発行できれば問題ないという事。
CloudflareのDNSの設定でプロキシ済みを選ぶと、トラフィックが、ブラウザ→CloudflareのCDN→オリジンサーバ、という経路になる。そしてauth.example.comに対する証明書はCloudflareが発行してくれるので、これをブラウザ側は受け取り信頼できると判断できるようになる（詳細はProxy statusも参照）。

したがって、CloudflareのDNS設定でプロキシ済みの設定をすれば、別にFirebase Hostingの設定は不要になる。Firebaseで認証をする際に証明書を確認してみると、以下のようにちゃんと証明書が発行されていることが確認できる。

※上記ではFirebaseのドメインについて、サーバという言い方をしたが、正確にはFirebaseの運営元のGoogleのCDNがリクエストを受けていて、CDNから（エッジ）証明書が送られてきているはず。そのことは（カスタムドメインを接続するの図からもわかり、例えばauth.example.comにリクエストしたとき、名前解決されて****.firebaseapp.comにリクエストが行くが、これを受けているのはオリジンサーバではなくCDN（図でも証明書をCDNに配置すると書かれているのはそういう事）。

まとめとして

今回はCloudflareを利用することで、Firebase Hostingでのカスタムドメインに対する証明書の発行を省略するという事をやってみた。別にFirebase Hostingで証明書を発行してもらう方法でも問題はなく、ドキュメント的にはその方法なので、Cloudflareの方法を採用するかは好みの問題になると思う。