Next.js / iOS 16 で Firebase Auth の signInWithRedirect() がうまく動作しない問題

ピン留めされたアイテム

prodで問題なく動作して解決したので他の人向けメモ:

next.config.js にrewritesの設定を追記

/** @type {import('next').NextConfig} */
module.exports = {
  async rewrites() {
    return [
      {
        source: "/__/auth/:path*",
        destination: `https://${process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID}.firebaseapp.com/__/auth/:path*`,
      },
    ];
  },
};

Firebase Configのauth domainをサービスのドメインに変更
(環境変数のNEXT_PUBLIC_FIREBASE_AUTH_DOMAIN など)

auth domainに localhost:3000 を設定するとうまく動かず、stagingにデプロイしないと試せなかったのだけ気になる、なにか方法があるんだろうか

椎名

Hosting the helper code has the following steps:

Download the files to host from the <project>.firebaseapp.com location by
executing the following commands:
mkdir signin_helpers/ && cd signin_helpers
wget https://<project>.firebaseapp.com/__/auth/handler
wget https://<project>.firebaseapp.com/__/auth/handler.js
wget https://<project>.firebaseapp.com/__/auth/experiments.js
wget https://<project>.firebaseapp.com/__/auth/iframe
wget https://<project>.firebaseapp.com/__/auth/iframe.js
Host the above files under your app domain. Ensure that your web server can respond to https://<app domain>/__/auth/<filename>.

椎名

Next.jsのRewritesで動かせるかも？

椎名

module.exports = {
  async rewrites() {
    return [
      {
        source: "/__/auth/:path*",
        destination: `https://${process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID}.firebaseapp.com/__/auth/:path*`,
      },
    ];
  },
};

椎名

解決策見つけちゃった～！と思ってたら全然すでに全く同じことしてるコメントあった

nabettu

検証＆まとめありがとうございます！

軽減策 #1の2にもあるんですが、"OAuth プロバイダーの承認済みリダイレクト URI"へ自分のアプリのドメインを追加する必要がありますので、コメントしておきます。

Googleログインの場合にはGoogleCloudコンソールの、API→認証情報→OAuth 2.0 クライアント IDのクライアント詳細設定で、Firebaseが自動で生成しているOAuthクライアントで以下のような設定が必要なようです。

椎名

補足ありがとうございます～！
たしかに各プロバイダーでリダイレクトの設定変えなきゃですね