📚

firebase authでカスタムドメイン対応

2022/04/25に公開

対応した背景

failed to signin with redirect, detail: Error: This browser is not supported or 3rd party cookies and data may be disabled.

ログインの時に↑みたいなエラーが出るユーザーが一部いた、chromeの設定で3rd party cookieを無効にしてたりすると(シークレットの時のみ無効にしてたりとかあるぽい)エラーになる

firebaseが自動で払い出すドメインじゃなくてカスタムドメインを設定して1st party扱いにすれば回避できる

対応の流れ

  • AWSのroute53にCNAMEレコード設定
  • firebase hostingのカスタムドメインを追加で↑で追加したドメインを追加
    • txtレコードの追加しないといけないのでroute53に設定
    • ↑の設定だけだとsslに対応できてないので証明書を発行するために必要、AWS側のacmとかでもできる気する
  • firebase authの承認済みドメインに↑のドメインを追加
  • jsのfirebase.initializeAppで渡すauthDomainのとこを↑で設定したドメインに変更
  • gcpに行って、認証情報→OAuth 2.0 クライアント ID(Web client)→承認済みのリダイレクト、URIに作成したカスタムドメインのurlを追加
  • Twitter Developer ConsoleからCallbackを↑と同じurlに変更

これでデプロイしたら同じように動作するはず、chromeの設定を変更して3rd party cookieを許可しないようにしてもログインで落ちなくなる

ドキュメント

Discussion