iPhone iOS16以上だとFirebase AuthのsignInWithRedirect/linkWithRedirectがそのままで使えないらしい。。

ベストプラクティスとして対応方法が載っていたので、
試してみたときの備忘録(*´ω｀*)

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

うまくいかない条件

アプリのドメインとauthDomainのドメインが異なるとだめっぽい

Firebase Hostingでfirebaseapp.comのサブドメインを利用
Firebase以外のサービスでアプリをホスト

Firebase Hostingにホスト＆firebaseapp.comのサブドメインなら大丈夫なよう。

解決方法

アプリのドメインとauthDomainのドメインが異なるとだめっぽいので、
同じになるように設定を変更すればOK

Firebase初期化時のauthDomainをアプリと同じにする
アプリ側でhttps://<app-domain>/__/auth/**を
https://<project>.firebaseapp.com/__/auth/**に
リダイレクトする設定を追加
Google OAuthやTwitter側に
https://<app-domain>/__/auth/handlerを
許可するよう設定を追加

実際の設定

実施したのが、SSRなNuxt2なので、
nuxt-axiosのproxyの設定などで対応した。

1.authDomainの変更

Firebase SDKの初期化時の値を変更。

  import firebase from "firebase/app";
  import "firebase/auth";
  firebase.initializeApp({
-    authDomain: "<project>.firebaseapp.com",
+    authDomain: "<app-domain>",
    // ...
  });

2.リダイレクトの追加

nuxt.config.tsにリダイレクトの設定を追加

  // nuxt.config.ts
  import { NuxtConfig } from "@nuxt/types";
  const config: NuxtConfig = {
    axios: {
      proxy: true,
    },

    proxy: {
+     "/__/auth/**": {
+         target: "https://<project>.firebaseapp.com"
+     },
    }
  };

  export default config;