Firebase Auth signInWithRedirect Not Working? Setup Guide for Next.js

Introduction

In this article, I will explain the configuration required to make Firebase Authentication's signInWithRedirect work correctly using Next.js.

I also struggled quite a bit to get redirect login working. I finally managed to make it work, so I'm sharing the steps here.

As of June 24, 2024, additional option implementation is now required to make redirect login work normally.

For more details, please refer to the official documentation below.
https://firebase.google.com/docs/auth/web/redirect-best-practices?hl=en

Environment

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

Prerequisites

I am proceeding on the assumption that you have already deployed to Vercel and that the app's domain exists.
However, it is also fine to deploy later and set the domain in the environment variables.
Additionally, it is assumed that the configuration values required for Firebase initialization are defined as environment variables in a file such as .env.

Since the method introduced here requires domain configuration, it will not work correctly in a local environment.
It works normally only in a deployed production environment.

Implementation

1. Configure Authorized Domains

Go to the "Firebase Console" -> "Authentication" -> "Settings" -> "Authorized domains" and add your service's domain.

2. Configure Authorized Redirect URIs

1. Go to the "GCP Console" -> "APIs & Services" -> "Credentials" and select the Web Client from the OAuth 2.0 Client IDs.

---

2. Add your service's URL to the Authorized JavaScript origins and save.

https://<your-service-domain>

---

3. Add the URL with your service's domain to the Authorized redirect URIs and save.

https://<your-service-domain>/__/auth/handler

---

3. Add Rewrites Configuration to next.config.ts

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;

The process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID used here is defined as an environment variable for the projectId value used in Firebase initialization and is read from there.

NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id

4. Change authdomain to Your Service Domain

NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-auth-domain

You probably have a domain like xxxxx.firebaseapp.com that was automatically assigned when you created the Firebase project, but please change this to your service's domain.

4. Run commands to download the files to be hosted

Run the following commands to enable hosting on your app domain.

mkdir public/_/auth && cd public/_/auth
wget https://<Project-ID>.firebaseapp.com/__/auth/handler -OutFile handler
wget https://<Project-ID>.firebaseapp.com/__/auth/handler.js -OutFile handler.js
wget https://<Project-ID>.firebaseapp.com/__/auth/experiments.js -OutFile experiments.js
wget https://<Project-ID>.firebaseapp.com/__/auth/iframe -OutFile iframe
wget https://<Project-ID>.firebaseapp.com/__/auth/iframe.js -OutFile iframe.js

The Project ID is listed in the "Firebase Console" -> "Project settings" -> "General".

---

It should be correct if it has the following structure:

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

5. Verifying Redirect Login

Once the settings up to this point are complete, in an environment deployed to Vercel, executing:

signInWithRedirect(auth, googleProvider);

will start the login process via redirect.
After the redirect, you can retrieve the login result (perform the login) as follows:

const result = getRedirectResult(auth);

Final Thoughts

In this article, I introduced the configuration methods required to make signInWithRedirect work correctly.
Implementing Firebase Authentication using signInWithRedirect is quite difficult to understand from the official documentation alone, and I personally went through a lot of trial and error to get it working.
Due to the specification changes since June 2024, the previous methods no longer work, and I believe many people might be struggling with this.

I hope this article helps those who are facing similar issues.

References

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

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