概要

• 特定のブラウザー（例: Safari）ではSignInWithRedirectが正常に動作しない（ログインできない）
  • その理由はサードパーティのストレージアクセスがブロックされているからです
  • 参考: Firebaseの公式ドキュメント
• アプリはFirebase Hostingを使っていない
• SignInWithPopupを使いたくない

実装方法

下記の設定・実装で、SignInWithRedirectでログインできることようになったので、そのやり方を紹介します。

Firebase側の設定

• 左側のメニューから構築 → Authentication → 設定 → 承認済みドメインを選択
• 自分のアプリのドメインを追加

GCP側の設定

• 「API とサービス」を検索して、左側のメニューから認証情報を選択
• OAuth 2.0 クライアント IDのところにFirebaseが作った項目の詳細設定を開く
• 「承認済みのJavaScript生成元」と「承認済みのリダイレクトURI」にそれぞれ以下の値を入力
  • 承認済みのJavaScript生成元: 自分のアプリのドメイン
  • 承認済みのリダイレクトURI:自分のアプリのドメイン/__/auth/handler

ソースコードの修正

リバースプロキシを設定

next.config.jsに下記を追加

1async rewrites() {
2  return [
3    {
4      source: '/__/auth/:path*',
5      destination: `https://${process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID}.firebaseapp.com/__/auth/:path*`,,
6    },
7  ]
8}

上記を設定することで、/__/auth/にアクセスするとhttps://${process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID}.firebaseapp.com/__/auth/にリダイレクトされるようになります

envを修正

NEXT_PUBLIC_FIREBASE_AUTH_DOMAINの値を下記のように修正

1NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=<自分のアプリのドメイン>

上記を設定することで、ストレージへのアクセスブロックが解消されます。