くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

iPhone iOS16以上でFirebase AuthのsignInWithRedirectを使えるようにする

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

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

うまくいかない条件

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

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

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

解決方法

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

  1. Firebase初期化時のauthDomainをアプリと同じにする
  2. アプリ側でhttps://<app-domain>/__/auth/**
    https://<project>.firebaseapp.com/__/auth/**
    リダイレクトする設定を追加
  3. 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;

3.認証サービス側の設定

Googleアカウント

APIとサービス > 認証情報 > OAuth2.0クライアントID」から設定。
Firebaseが作成したクライアントIDの設定を変更する。

Twitterアカウント

同じようにTwitter側も設定を追加

おまけ

Firebase Hostingにもredirectsがあるので、
Firebase Hosting x カスタムドメインの場合は、これで行ける気がする

以上!! だめかと思ったけど、回避策があってよかった(*´ω`*)

参考にしたサイトさま