Fireauth(Firebase Authentication)のリダイレクト認証で iOSが認証されない問題

どうも、ダメおです。
開発のバックエンド無し、またはとっても楽にしてくれると有名なSaasサービスである Firebase を 3年ぶりくらいに使った時に対応した掲題の内容についてまとめます。

調べても有料コンテンツだったり、件数が少なかったり、わかりづらかったりしたので、自分用として、また引っかかってる人がいた時に簡単に見れる内容として書きます。

まず Firebase Authentication(以降 Fireauth)でiOSが認証されない問題は、調べたところ 2023年の iOS16.1で「リダイレクトでの認証で、ドメイン違いがある際に認証されない」という仕様に変わったからだそう。
そして2024年6月からは、iOSに限定された仕様ではなく変わっていくという内容が公式に記載されていました。

参考

サードパーティのストレージ アクセスをブロックするブラウザで signInWithRedirect を使用する場合のベスト プラクティス  |  Firebase

注: 2024 年 6 月 18 日以降、Google Chrome M115 以降でリダイレクト ログインを機能させるには、いずれかのオプションの実装が必須になります。これは、Firefox 109 以降と Safari 16.1 以降ですでに必須になっています。

https://firebase.google.com/

ちなみに上記の公式のアナウンスに対応方法も書いてあります。
このページでは記載されている対応の内、3つ目の方法で対応します。

firebaseapp.com へのプロキシ認証リクエスト

https://firebase.google.com/

一応各対応を利用するパターンと、利用しない理由をとてもとても端的に

1. カスタム ドメインを authDomain として使用するように Firebase 構成を更新する → Firebase Hostingサービスを使っている場合

2. signInWithPopup() に切り替える → 既に非推奨かつブロックされることも増えてきた為、基本使わない

3.  firebaseapp.com へのプロキシ認証リクエスト → サービスがFirebaseのHostingでなく、自前のサーバで稼働している

4.  ログイン ヘルパー コードを自社ドメイン内でホストする → 外部サービスの認証を利用する場合使わない。パスワードとメールアドレスでの認証を利用するだけなら使える

5. プロバイダのログインを独自に処理する → 大変だし、簡単便利だからFireauth使うのに、自分で処理作るならFireauth使う意味ない

という事で、私の環境は
1. FirebaseのHostingサービスを利用していない
2. ログインは推奨である「リダイレクト(signInWithRedirect)」で行いたい
3. 自前のサーバで動いているので、Nginxでプロキシで飛ばせる
4. Twitter等外部のOAuthを利用する
5. Fireauthが簡単で便利だから使いたい。
という事で、3番の対応をします。

では、実際に行った対応

1. FirebaseのSDK利用時に食べさせる、設定情報の authDomain を自身の利用しているカスタムドメインに書き換える

const firebaseConfig = {
  apiKey: "<API KEY>",
  authDomain: "<APP NAME>.firebaseapp.com", ← ここ！！！
  projectId: "<PRODUCT ID>",
  storageBucket: "<BUCKET DOMAIN>",
  messagingSenderId: "<MESSAGING SENDER ID>",
  appId: "<APP ID>",
  measurementId: "<MEASUREMENT ID>"
}

例)

const firebaseConfig = {
  apiKey: "<API KEY>",
  authDomain: "AAABBBCCC.com", ← ここ！！！
  projectId: "<PRODUCT ID>",
  storageBucket: "<BUCKET DOMAIN>",
  messagingSenderId: "<MESSAGING SENDER ID>",
  appId: "<APP ID>",
  measurementId: "<MEASUREMENT ID>"
}

2. 各プロバイダのコールバック先のURLを独自ドメインに設定

ログイン認証が行われた際に帰ってくる場所(URL)がコールバック先(URL)です。
例) https://AAABBBCCC.com/__/auth/handler に設定します。
「/__/auth/handler」が重要です。消さないように！

3. NginxのでプロキシでFireauthへ転送するように設定

server {
  listen: 443 ssl;
  server_name AAABBBCCC.com;
.
.

  location /__/auth {
    proxy_pass https://<APP NAME>.firebaseapp.com;
  }
.
.
.
}

この時には「/__/auth/handler」は後ろにつけないでください。
リダイレクト時にくっついていくので不要です。

以上で終了！

終わりに

久しぶりにまとめを公開の場で書きました。
へたくそなのと、面倒臭がりなのと、続かないたちなので多分なかなか書きませんが、この気まぐれが誰かの助けになれば幸いです。

個人的に作って、気まぐれでサイトも落とす遊び場

Davop