Zenn
🔧

Firebase AuthのsignInWithRedirectが動かない？Next.jsで動作させるための設定方法

に公開
Firebase
Next.js
Vercel
tech

はじめに

本記事では、Next.jsを用いてFirebase AuthenticationのsignInWithRedirectを正しく動作させるために必要な設定方法を解説します。

筆者自身も、なかなかリダイレクトログインがうまくいかず苦労した経験がありました。最終的に動作させることができたため、その手順を共有します。

環境

  • Vercel
  • Next.js - 15.3.0
  • firebase - 11.6.0

前提

すでに Vercel にデプロイ済みで、アプリのドメインが存在していることを前提に話を進めます。
ただし、後からデプロイして環境変数にドメインを設定する形でも問題ありません。
また、Firebaseの初期化に必要な設定値は.envファイルなどで環境変数として定義していることを前提としています。

実装

1.　承認済みドメインを設定する

「Firebaseコンソール」→「Authentication」→「設定」→「認証済みドメイン」に移動して、サービスのドメインを追加する。

2.　承認済みのリダイレクト URIを設定する

  1. 「GCPのConsole」→「APIとサービス」→「認証情報」に移動して、OAuth 2.0 クライアント IDのWeb Clientを選択。

  1. 承認済みの JavaScript 生成元にサービスのURLを追加して保存。
https://<サービスのドメイン>

  1. 承認済みのリダイレクトURIにサービスのドメインを追加したURLを追加して保存。
https://<サービスのドメイン>/__/auth/handler

3. next.config.tsにrewritesの設定を追記

import type { NextConfig } from "next";

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

export default nextConfig;

ここで使用しているprocess.env.NEXT_PUBLIC_FIREBASE_PROJECT_IDは、Firebaseの初期化に使用するprojectIdの値を環境変数として定義し、そこから読み込んでいます。

NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id

4. authdomainをサービスのドメインに変更

NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-auth-domain

もともとFirebaseのプロジェクト作成時に自動で付与される xxxxx.firebaseapp.com のようなドメインを設定していると思いますが、これをサービスのドメインに変更してください。

4. コマンドを実行してホストするファイルをダウンロード

以下のコマンドを実行してアプリドメインでホストできるようにします。

mkdir public/_/auth && cd public/_/auth
wget https://<プロジェクトID>.firebaseapp.com/__/auth/handler -OutFile handler
wget https://<プロジェクトID>.firebaseapp.com/__/auth/handler.js -OutFile handler.js
wget https://<プロジェクトID>.firebaseapp.com/__/auth/experiments.js -OutFile experiments.js
wget https://<プロジェクトID>.firebaseapp.com/__/auth/iframe -OutFile iframe
wget https://<プロジェクトID>.firebaseapp.com/__/auth/iframe.js -OutFile iframe.js

プロジェクトIDは「Firebaseコンソール」→「プロジェクトの設定」→「全般」に記載してあります。

以下のような構成になっていれば問題ありません。

your-project/
├── public/
│   └── _/
│       └── auth/
│           ├── handler
│           ├── handler.js
│           ├── experiments.js
│           ├── iframe
│           └── iframe.js

5.　リダイレクトログインの動作確認

ここまでの設定が完了すれば、Vercel にデプロイした環境において、

signInWithRedirect(auth, googleProvider);

を実行することで、リダイレクトによるログイン処理が開始されます。
リダイレクト後、以下のようにしてログイン結果を取得（ログイン）できるようになります。

const result = getRedirectResult(auth);

さいごに

今回はsignInWithRedirectを正しく動作させるために必要な設定方法を紹介しました。
signInWithRedirectを使ったFirebase Authenticationの実装は、公式のドキュメントだけではなかなか分かりづらく、筆者自身も動作させるまでに多くの試行錯誤を重ねました。
2024年6月以降の仕様変更により、今まで通りの方法では動作しなくなってしまったことで、困っている方も多いのではないかと思います。

本記事が、同じように悩んでいる方の助けになれば幸いです。

参考

https://zenn.dev/s7/scraps/a5188235db00d0

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

Discussion