Sato's Tech Memo

備忘録と情報共有を兼ねたメモです

Firebase認証のauthDomainをホストサーバのドメインに切り替える方法

サードパーティ製のCookieを禁止しているブラウザでは、以下のようなエラーが出てしまうので、その対処法。

This browser is not supported or 3rd party cookies and data may be disabled.

f:id:satoko_szk:20210128172217p:plain
Firebase認証エラー

これは、authDomainのドメインがWebサイトのドメインと異なることが原因。

{
"apiKey": "...",
"authDomain": "xxxxxx.firebaseapp.com",
"databaseURL": "https://xxxxxx.firebaseio.com",
"projectId": "....",
"storageBucket": "....",
"messagingSenderId": "....",
"appId": "...",
"measurementId": "....."
}

なので、以下のように、Firebaseのプロジェクトドメインに、ホストサーバのサブドメインをカスタムドメインを設定して、
これをauthDomainに切り替える。

f:id:satoko_szk:20210128173512p:plain
authDomain切り替え

サブドメイン作成

  1. Firebaseコンソールを開いて、[Hosting]メニュークリック
  2. 設定ガイダンスは飛ばす。(「次へ」→「次へ」→「コンソールに進む」)
    • f:id:satoko_szk:20210128173803p:plain
      設定ガイダンスは飛ばす
  3. 「カスタム ドメインを追加」ボタンを押下
  4. ホストサーバの新サブドメインを入力して「次へ」。ドメイン名は任意。
  5. 指定のドメインの所有権を持っていることを証明するためのテキストが表示されるので、このテキストをネームサーバのルートドメインのTXTに設定する。
  6. 続いて、A設定する必要のあるIPアドレスが表示されるので、サブドメインに設定する。
  7. 「保留中」となるので、認証完了するまで待つ。(待たなくても大丈夫かも?)
    • f:id:satoko_szk:20210128175217p:plain
      保留中

承認済みドメインサブドメインを追加

  1. Firebaseコンソールで承認済みドメインに、上記で設定したサブドメインを追加。
  2. OAuth認証先(Google, Facebookなど)の設定で「有効なOAuthリダイレクトURI」に以下URIを追加。

https://[sub-domain]/__/auth/handler

authDomain切り替え

クライアント側でのfirebase設定のauthDomainをサブドメインに変更する。

f:id:satoko_szk:20210128175948p:plain
authDomain切り替え