事象
iOS16の各種ブラウザやMacOS SafariからFirebase authenticationの signInWithRedirect で getRedirectResult するとユーザー情報が取得できず null が返される
対応方法概要
サードパーティのストレージ アクセスをブロックするブラウザーでの壊れたリダイレクト サインインを軽減する | Firebase
の軽減策 #3の通り対応する
原因調査
ぐぐっていたら
Login to Firebase does not work on Safari 16.1 beta · Issue #6716 · firebase/firebase-js-sdk · GitHub
これに行き着いた。これやん。
リプライの
https://github.com/firebase/firebase-js-sdk/issues/6716#issuecomment-1320593233
ここから
サードパーティのストレージ アクセスをブロックするブラウザーでの壊れたリダイレクト サインインを軽減する | Firebase
これに行き着いた。
引用すると、
.
認証フローがアプリ ドメインに戻ると、サインイン ヘルパー ドメインのブラウザー ストレージにアクセスします。この軽減策と次の (コードを自己ホストするための) 軽減策により、ブラウザーによってブロックされるクロスオリジン ストレージ アクセスが排除されます。
とのこと。iOS16やMacOS Safariが先に厳しくなったのね。
対応内容
- Nuxt2でFirebase authenticationのTwitter認証を利用
- Netlifyにデプロイしている
自分のアプリでやっていることとしてはこんな感じなので、
アプリ側の設定
軽減策#3のやつ。
https://<app domain>/__/auth/ から https://<project>.firebaseapp.com/__/auth/ にproxyしてあげる必要がある（リダイレクトではダメ）ので、
Nuxt2の場合
static/_redirects に
/__/auth/* https://<project>.firebaseapp.com/__/auth/:splat 200
を設定して再デプロイ。
Netlify側の設定
軽減策#1前半のやつ。
自分の場合 appDomain はNetlifyのEnvironment variablesで設定しているので、
環境変数の appDomain にあたる内容を
<project>.firebaseapp.com から <app domain> に変更（して再デプロイ）
Twitter側の設定
軽減策#1後半のやつ。
Twitter Developer Portalで連携しているアプリの設定を開き
User authentication settings Edit → App info の Callback URI / Redirect URL に
https://<app domain>/__/auth/handler を追加（既存のと変更でも良いかも）
以上。これでiOS16でも動作するようになった。
備考
軽減策#2の signInWithPopup() でも良いはずだが、
自分の場合はPWA対応もしているため、これは使えなかった。
（PWAだとsignInWithPopupが動作しない）
