Next.jsでFirebase AuthenticationのSignInWithRedirectの実装時にハマったこととその解決策【株式会社ライトコード】

概要

• 特定のブラウザー（例: 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に下記を追加

async rewrites() {

  return [

    {

      source: '/__/auth/:path*',

      destination: `https://${process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID}.firebaseapp.com/__/auth/:path*`,,

    },

  ]

}

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

envを修正

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

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

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

…

記事の続きは下のURLをクリック！

https://rightcode.co.jp/blogs/49455

エンジニア積極採用中です！

現在、WEBエンジニア、モバイルエンジニア、デザイナー、営業などを積極採用中です！

採用ページはこちら：https://rightcode.co.jp/recruit

社員の声や社風などを知りたい方はこちら：https://rightcode.co.jp/blogs?category=life

社長と一杯飲みながらお話しませんか？（転職者向け）

特設ページはこちら： https://rightcode.co.jp/gohan-sake-president-talk

もっとワクワクしたいあなたへ

現在、ライトコードでは「WEBエンジニア」「モバイルエンジニア」「ゲームエンジニア」、「デザイナー」「WEBディレクター」「営業」などを積極採用中です！

ライトコードは技術力に定評のある受託開発をメインにしているIT企業です。

有名WEBサービスやアプリの受託開発などの企画、開発案件が目白押しの状況です。

• もっと大きなことに挑戦したい！
• エンジニアとしてもっと成長したい！
• モダンな技術に触れたい！

現状に満足していない方は、まずは、エンジニアとしても第一線を走り続ける弊社代表と気軽にお話してみませんか？

ネット上では、ちょっとユルそうな会社に感じると思いますが（笑）、
実は技術力に定評があり、沢山の実績を残している会社ということをお伝えしたいと思っております。

• ライトコードの魅力を知っていただきたい！
• 社風や文化なども知っていただきたい！
• 技術に対して熱意のある方に入社していただきたい！

一度、【Wantedly内の弊社ページ】や【コーポレートサイト】をのぞいてみてください。