Using Firebase Authentication with the Latest Next.js Features

Introduction to next-firebase-auth-edge You likely found this article while searching for ways to add Firebase Authentication to your existing or new Next.js application. You aim to make a smart, unbiased, and future-oriented decision that will maximize the chances of your app being successful. As the creator of next-firebase-auth-edge, I must admit that providing an entirely unbiased opinion is not my forte, but at least I’ll try to justify the approach I took when designing the library. Hopefully, by the end of this guide, you may find the approach both simple and viable for the long term. How it started I’ll save you long introductions. Let me just say that the idea for the library was inspired by a situation possibly akin to yours. It was the time when Next.js released a canary version of . I was working on app that heavily relied on rewrites and internal redirects. For that, we were using custom Node.js server rendering Next.js app. App Router express We were really excited for and , yet aware that it wouldn’t be compatible with our custom server. seemed like powerful feature we could leverage to eliminate the need for a custom Express server, opting instead to rely solely on Next.js's built-in features to redirect and rewrite users to different pages dynamically. App Router Server Components Middleware That time, we were using . We really liked the library, but it spread out our authentication logic through , , , files, which were going to be considered legacy soon enough. Also, the library wasn’t compatible with the middleware, preventing us from rewriting URLs or redirecting users based on their context. next-firebase-auth next.config.js pages/_app.tsx pages/api/login.ts pages/api/logout.ts So, I began my search, but to my surprise, I found no library that supported Firebase Authentication within middleware. – As a software engineer with more than 11 years of commercial experience in Node.js and React, I was gearing up to tackle this conundrum. Why could that be? It’s impossible! So, I started. And the answer became obvious. Middleware is running inside . There is no firebase library compatible with available inside . . I felt helpless. Is this the first time I will need to actually to get to play with the new and fancy APIs? – I quickly stopped sobbing and began to reverse-engineer , , and several other JWT authentication libraries, adapting them to the Edge Runtime. I seized the opportunity to address all the issues I had encountered with previous authentication libraries, aiming to create the lightest, easiest-to-configure, and future-oriented authentication library. Edge Runtime Web Crypto APIs Edge Runtime I was doomed wait Nope. A watched pot never boils. next-firebase-auth firebase-admin About two weeks later, version of was born. It was a solid proof of concept, but you wouldn’t want to use version . Trust me. 0.0.1 next-firebase-auth-edge 0.0.1 How its going Nearly , I'm thrilled to announce that after , , and a from awesome developers worldwide, the library has reached a stage where my other self nodes to me in approval. two years later 372 commits 110 resolved issues boatload of invaluable feedback In this guide, I will use version to create authenticated Next.js app from scratch. We will go through each step in detail, starting with the creation of a new Firebase project and Next.js app, followed by the integration with and libraries. At the end of this tutorial, we will deploy the app to Vercel to confirm that everything is working both locally and in production-ready environment. 1.4.1 of next-firebase-auth-edge next-firebase-auth-edge firebase/auth Setting up Firebase This part assumes you haven’t yet setup Firebase Authentication. Feel free to skip to the next part if otherwise. Let’s head to and Firebase Console create a project After project is created, let’s enable Firebase Authentication. Open the console and follow to and enable method. That’s the method we’re going to support in our app Build > Authentication > Sign-in method Email and password After you enabled your first sign-in method, Firebase Authentication should be enabled for your project and you can retrieve your in Web API Key Project Settings Copy the API key and keep it safe. Now, let’s open next tab – and note down . We’re going to need it later. Cloud Messaging, Sender ID Last but not least, we need to generate service account credentials. Those will allow your app to gain full access to your Firebase services. Go to and click . This will download a file with service account credentials. Save this file in a known location. Project Settings > Service accounts Generate new private key .json We are ready to integrate Next.js app with Firebase Authentication That’s it! Creating Next.js app from scratch This guide assumes you have and installed. Commands used in this tutorial were verified against latest LTS . You can verify node version by running in terminal. You can also use tools like to quickly switch between Node.js versions. Node.js npm Node.js v20 node -v NVM Setting up Next.js app with CLI Open your favourite terminal, navigate to your projects folder and run npx create-next-app@latest To keep it simple, let’s use default configuration. This means we’ll be using and TypeScript tailwind ✔ What is your project named? … my-app ✔ Would you like to use TypeScript? … Yes ✔ Would you like to use ESLint? … Yes ✔ Would you like to use Tailwind CSS? … Yes ✔ Would you like to use `src/` directory? … No ✔ Would you like to use App Router? (recommended) … Yes ✔ Would you like to customize the default import alias (@/*)? … No Let’s navigate to project’s root dir and make sure all dependencies are installed cd my-app

npm install To confirm everything works as expected, let’s start Next.js dev server with command. When you open , you should see Next.js welcome page, similar to this: npm run dev http://localhost:3000 Preparing environment variables Before we start integrating with Firebase, we need a secure way to store and read our Firebase configuration. Luckily, Next.js ships with built-in support. dotenv Open your favourite code editor and navigate to project folder Let’s create file in project’s root directory and fill it with following environment variables: .env.local FIREBASE_ADMIN_CLIENT_EMAIL=... FIREBASE_ADMIN_PRIVATE_KEY=...

AUTH_COOKIE_NAME=AuthToken AUTH_COOKIE_SIGNATURE_KEY_CURRENT=secret1 AUTH_COOKIE_SIGNATURE_KEY_PREVIOUS=secret2

USE_SECURE_COOKIES=false

NEXT_PUBLIC_FIREBASE_PROJECT_ID=... NEXT_PUBLIC_FIREBASE_API_KEY=AIza... NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=....firebaseapp.com NEXT_PUBLIC_FIREBASE_DATABASE_URL=....firebaseio.com NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=... Please note that variables prefixed with will be available in client-side bundle. We’ll need those to setup NEXT_PUBLIC_ Firebase Auth Client SDK , and can be retrieved from file downloaded after generating service account credentials NEXT_PUBLIC_FIREBASE_PROJECT_ID FIREBASE_ADMIN_CLIENT_EMAIL FIREBASE_ADMIN_PRIVATE_KEY .json will be the name of the cookie used to store user credentials AUTH_COOKIE_NAME and are secrets we’re going to sign the credentials with AUTH_COOKIE_SIGNATURE_KEY_CURRENT AUTH_COOKIE_SIGNATURE_KEY_PREVIOUS is retrieved from general page NEXT_PUBLIC_FIREBASE_API_KEY Web API Key Project Settings is .firebaseapp.com NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN your-project-id is .firebaseio.com NEXT_PUBLIC_FIREBASE_DATABASE_URL your-project-id can be obtained from > page NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID Project Settings Cloud Messaging won’t be used for local development, but will come in handy when we’ll deploy our app to Vercel USE_SECURE_COOKIES Integrating with Firebase Authentication Installing and initial configuration next-firebase-auth-edge Add the library to project’s dependencies by running npm install next-firebase-auth-edge@^1.4.1 Let's create file to encapsulate our project configuration. It’s not required, but will make code examples more readable. config.ts Don’t spend too much time pondering those values. We will explain them in more detail as we follow along. export const serverConfig = { cookieName: process.env.AUTH_COOKIE_NAME!, cookieSignatureKeys: [process.env.AUTH_COOKIE_SIGNATURE_KEY_CURRENT!, process.env.AUTH_COOKIE_SIGNATURE_KEY_PREVIOUS!], cookieSerializeOptions: { path: "/", httpOnly: true, secure: process.env.USE_SECURE_COOKIES === "true", sameSite: "lax" as const, maxAge: 12 * 60 * 60 * 24, }, serviceAccount: { projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID!, clientEmail: process.env.FIREBASE_ADMIN_CLIENT_EMAIL!, privateKey: process.env.FIREBASE_ADMIN_PRIVATE_KEY?.replace(/\\n/g, "\n")!, } };

export const clientConfig = { projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID, apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY!, authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN, databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL, messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID }; Adding Middleware Create file in project’s root and paste the following middleware.ts import { NextRequest } from "next/server"; import { authMiddleware } from "next-firebase-auth-edge"; import { clientConfig, serverConfig } from "./config";

export async function middleware(request: NextRequest) { return authMiddleware(request, { loginPath: "/api/login", logoutPath: "/api/logout", apiKey: clientConfig.apiKey, cookieName: serverConfig.cookieName, cookieSignatureKeys: serverConfig.cookieSignatureKeys, cookieSerializeOptions: serverConfig.cookieSerializeOptions, serviceAccount: serverConfig.serviceAccount, }); }

export const config = { matcher: [ "/", "/((?!_next|api|.*\\.).*)", "/api/login", "/api/logout", ], }; Believe it or not, but we’ve just integrated our App’s server with Firebase Authentication. Before we’re going to actually use it, let’s explain the configuration a bit: will instruct authMiddleware to expose endpoint. When this endpoint is called with * header, it responds with HTTP(S)-Only header containing signed loginPath GET /api/login Authorization: Bearer ${idToken} Set-Cookie custom and refresh tokens * is retrieved with function available in . More on this later. idToken getIdToken Firebase Client SDK Similarly, instructs the middleware to expose , but it does not require any additional headers. When called, it removes authentication cookies from the browser. logoutPath GET /api/logout is Web API Key. Middleware uses it to refresh custom token and reset authentication cookies after credentials are expired. apiKey is the name of the cookie set and removed by and endpoints cookieName /api/login /api/logout a list of secret keys user credentials are signed with. Credentials are always going to be signed with the first key in the list, thus you need to provide at least one value. You can provide multiple keys to perform a cookieSignatureKeys key rotation are options passed to when generating header. See README for more information cookieSerializeOptions cookie Set-Cookie cookie authorises the library to use your Firebase services. serviceAccount The matcher instructs Next.js server to run Middleware against , , and any other path that isn’t a file or api call. /api/login /api/logout / export const config = { matcher: [ "/", "/((?!_next|api|.*\\.).*)", "/api/login", "/api/logout", ], }; You might be wondering why are we not enabling middleware for all /api/* calls. We could, but it’s a good practice to handle unauthenticated calls within API route handler itself. This is a bit out of scope for this tutorial, but if you’re interested, let me know and I’ll prepare some examples! As you can see, configuration is and with clearly defined purpose. Now, let’s start calling our and endpoints. minimal /api/login /api/logout Creating a secure home page To make things as simple as possible, let’s clear default Next.js home page and replace it with some personalised content Open and paste this: ./app/page.tsx import { getTokens } from "next-firebase-auth-edge"; import { cookies } from "next/headers"; import { notFound } from "next/navigation"; import { clientConfig, serverConfig } from "../config";

export default async function Home() { const tokens = await getTokens(cookies(), { apiKey: clientConfig.apiKey, cookieName: serverConfig.cookieName, cookieSignatureKeys: serverConfig.cookieSignatureKeys, serviceAccount: serverConfig.serviceAccount, });

if (!tokens) { notFound(); }

return ( Super secure home page Only {tokens?.decodedToken.email} holds the magic key to this kingdom!

); } Let’s break this down bit by bit. function is designed to validate and extract user credentials from getTokens cookies const tokens = await getTokens(cookies(), { apiKey: clientConfig.apiKey, cookieName: serverConfig.cookieName, cookieSignatureKeys: serverConfig.cookieSignatureKeys, serviceAccount: serverConfig.serviceAccount, }); It resolves with , if user is unauthenticated, or an object containing two properties: null which is idToken that you could use to authorise API requests to external backend services. This is a bit out of scope, but it’s worth to mention that the library enables distributed service architecture. The is compatible and ready to use with all official Firebase libraries on all platforms. token string token as name suggests, is decoded version of the , which contains all information needed to identify the user, including e-mail address, profile picture and , which further enables us to restrict access based on roles and permissions. decodedToken token custom claims After getting , we use function from to make sure the page is only accessible to authenticated users tokens notFound next/navigation if (!tokens) { notFound(); } Finally, we render some basic, personalised user content Super secure home page Only {tokens?.decodedToken.email} holds the magic key to this kingdom!"

Let’s run it. In case you’ve closed your dev server, just run . npm run dev When you try to access , you should see http://localhost:3000/ 404: This page could not be found. Success! We've kept our secrets safe from prying eyes! Installing and initialising Firebase Client SDK firebase Run at project’s root directory npm install firebase After client SDK is installed, create file in project root directory and paste the following firebase.ts import { initializeApp } from 'firebase/app'; import { clientConfig } from './config';

export const app = initializeApp(clientConfig); This will initialise Firebase Client SDK and expose app object for client components Creating a registration page What’s the point of having super secure home page, if nobody can view it? Let’s build a simple registration page to let people in to our app. Let’s create a new, fancy page under ./app/register/page.tsx "use client";

import { FormEvent, useState } from "react"; import Link from "next/link"; import { getAuth, createUserWithEmailAndPassword } from "firebase/auth"; import { app } from "../../firebase"; import { useRouter } from "next/navigation";

export default function Register() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [confirmation, setConfirmation] = useState(""); const [error, setError] = useState(""); const router = useRouter();

async function handleSubmit(event: FormEvent) { event.preventDefault();

setError("");

if (password !== confirmation) { setError("Passwords don't match"); return; }

try { await createUserWithEmailAndPassword(getAuth(app), email, password); router.push("/login"); } catch (e) { setError((e as Error).message); } }

return ( Pray tell, who be this gallant soul seeking entry to mine humble abode? Your email setEmail(e.target.value)} id="email" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="name@company.com" required /> Password setPassword(e.target.value)} id="password" placeholder="••••••••" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required /> Confirm password setConfirmation(e.target.value)} id="confirm-password" placeholder="••••••••" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required /> {error && ( {error} )} Create an account Already have an account?{" "} Login here

); } I know. It’s a lot of text, but bear with me. We start of with to indicate that registration page will be using client-side APIs "use client"; const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [confirmation, setConfirmation] = useState(""); const [error, setError] = useState(""); Then, we define some variables and setters to hold our form state const router = useRouter();

async function handleSubmit(event: FormEvent) { event.preventDefault();

setError("");

if (password !== confirmation) { setError("Passwords don't match"); return; }

try { await createUserWithEmailAndPassword(getAuth(app), email, password); router.push("/login"); } catch (e) { setError((e as Error).message); } } Here, we define our form submission logic. First, we validate if and are equal, otherwise we update the error state. If values are valid, we create user account with from . If this step fails (eg. the e-mail is taken), we inform user by updating the error. password confirmation createUserWithEmailAndPassword firebase/auth If all goes well, we redirect user to page. You’re probably confused right now, and you’re right to be so. page does not exist yet. We’re just preparing for what’s going to be next. /login /login When you visit , the page should look roughly like this: http://localhost:3000/register Creating a login page Now, that users are able to register, let them prove their identity Create a login page under ./app/login/page.tsx "use client";

import { FormEvent, useState } from "react"; import Link from "next/link"; import { useRouter } from "next/navigation"; import { getAuth, signInWithEmailAndPassword } from "firebase/auth"; import { app } from "../../firebase";

export default function Login() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [error, setError] = useState(""); const router = useRouter();

async function handleSubmit(event: FormEvent) { event.preventDefault(); setError("");

try { const credential = await signInWithEmailAndPassword( getAuth(app), email, password ); const idToken = await credential.user.getIdToken();

await fetch("/api/login", { headers: { Authorization: `Bearer ${idToken}`, }, });

router.push("/"); } catch (e) { setError((e as Error).message); } }

return ( Speak thy secret word! Your email setEmail(e.target.value)} id="email" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="name@company.com" required /> Password setPassword(e.target.value)} id="password" placeholder="••••••••" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required /> {error && ( {error} )} Enter Don&apos;t have an account?{" "} Register here

); } As you see, it’s pretty similar to registration page. Let’s focus on the crucial bit: async function handleSubmit(event: FormEvent) { event.preventDefault(); setError("");

try { const credential = await signInWithEmailAndPassword( getAuth(app), email, password ); const idToken = await credential.user.getIdToken();

await fetch("/api/login", { headers: { Authorization: `Bearer ${idToken}`, }, });

router.push("/"); } catch (e) { setError((e as Error).message); } } It’s where happens. We use from to retrieve user’s . all the magic signInEmailAndPassword firebase/auth idToken Then, we call endpoint exposed by the middleware. This endpoint updates our browser cookies with user credentials. /api/login Finally, we redirect user to the home page by calling router.push("/"); Login page should look roughly as this Let’s test it out! Go to , enter some random e-mail address and password to create an account. Use those credentials in page. After you click , you should be redirected to http://localhost:3000/register http://localhost:3000/login Enter super secure home page We’ve finally got to see our , , home page! But wait! How do we get out? own personal ultra secure We need to add a logout button not to lock out ourselves from the world forever (or 12 days). Before we start, we need to create a that will be able to sign us out using Firebase Client SDK. client component Lets create a new file under ./app/HomePage.tsx "use client";

import { useRouter } from "next/navigation"; import { getAuth, signOut } from "firebase/auth"; import { app } from "../firebase";

interface HomePageProps { email?: string; }

export default function HomePage({ email }: HomePageProps) { const router = useRouter();

async function handleLogout() { await signOut(getAuth(app));

await fetch("/api/logout");

router.push("/login"); }

return ( Super secure home page Only {email} holds the magic key to this kingdom!

Logout ); } As you might have noticed, this is slightly modified version of our . We had to create a separate client component, because works only inside and , while and require to be run in client context. A bit complicated, I know, but it’s actually quite powerful. I’ll explain later. ./app/page.tsx getTokens server components API route handlers signOut useRouter Let’s focus on the logout process const router = useRouter();

async function handleLogout() { await signOut(getAuth(app));

await fetch("/api/logout");

router.push("/login"); } First, we sign out from Firebase Client SDK. Then, we call endpoint exposed by the middleware. We finish by redirecting user to page. /api/logout /login Let’s update our server home page. Go to and paste the following ./app/page.tsx import { getTokens } from "next-firebase-auth-edge"; import { cookies } from "next/headers"; import { notFound } from "next/navigation"; import { clientConfig, serverConfig } from "../config"; import HomePage from "./HomePage";

export default async function Home() { const tokens = await getTokens(cookies(), { apiKey: clientConfig.apiKey, cookieName: serverConfig.cookieName, cookieSignatureKeys: serverConfig.cookieSignatureKeys, serviceAccount: serverConfig.serviceAccount, });

if (!tokens) { notFound(); }

return ; } Now, our server component is responsible only for fetching user tokens and passing it down to client component. This is actually pretty common and useful pattern. Home HomePage Let’s test this: Voila! We can now login and logout from the application at our own will. That’s perfect! Or is it? When unauthenticated user tries to enter home page by opening we show http://localhost:3000/ 404: This page could not be found. Also, authenticated users are still able to access and page without having to log out. http://localhost:3000/register http://localhost:3000/login We can do better. It seems we are in need to add some redirect logic. Let’s define some rules: When authenticated user tries to access and pages, we should redirect them to /register /login / When unauthenticated user tries to access page, we should redirect them to / /login Middleware is one of the best ways to handle redirects in Next.js apps. Luckily, supports number of options and helper functions to handle wide range of redirect scenarios. authMiddleware Let’s open file and paste this updated version middleware.ts import { NextRequest, NextResponse } from "next/server"; import { authMiddleware, redirectToHome, redirectToLogin } from "next-firebase-auth-edge"; import { clientConfig, serverConfig } from "./config";

const PUBLIC_PATHS = ['/register', '/login'];

export async function middleware(request: NextRequest) { return authMiddleware(request, { loginPath: "/api/login", logoutPath: "/api/logout", apiKey: clientConfig.apiKey, cookieName: serverConfig.cookieName, cookieSignatureKeys: serverConfig.cookieSignatureKeys, cookieSerializeOptions: serverConfig.cookieSerializeOptions, serviceAccount: serverConfig.serviceAccount, handleValidToken: async ({token, decodedToken}, headers) => { if (PUBLIC_PATHS.includes(request.nextUrl.pathname)) { return redirectToHome(request); }

return NextResponse.next({ request: { headers } }); }, handleInvalidToken: async (reason) => { console.info('Missing or malformed credentials', {reason});

return redirectToLogin(request, { path: '/login', publicPaths: PUBLIC_PATHS }); }, handleError: async (error) => { console.error('Unhandled authentication error', {error}); return redirectToLogin(request, { path: '/login', publicPaths: PUBLIC_PATHS }); } }); }

export const config = { matcher: [ "/", "/((?!_next|api|.*\\.).*)", "/api/login", "/api/logout", ], }; That should be it. We’ve implemented all redirect rules. Let’s break this down. const PUBLIC_PATHS = ['/register', '/login']; handleValidToken: async ({token, decodedToken}, headers) => { if (PUBLIC_PATHS.includes(request.nextUrl.pathname)) { return redirectToHome(request); }

return NextResponse.next({ request: { headers } }); }, is called when valid user credentials are attached to the request, ie. user is authenticated. It is called with object as the first, and as the second argument. It should resolve with . handleValidToken tokens Modified Request Headers NextResponse from is a helper function that returns an object that can be simplified to redirectToHome next-firebase-auth-edge NextResponse.redirect(new URL(“/“)) By checking , we validate if authenticated user tries to access or page, and redirect to home if that’s the case. PUBLIC_PATHS.includes(request.nextUrl.pathname) /login /register handleInvalidToken: async (reason) => { console.info('Missing or malformed credentials', {reason});

return redirectToLogin(request, { path: '/login', publicPaths: PUBLIC_PATHS }); }, is called when something happens. One of this expected events is user seeing your app for the first time, from another device, or after credentials have expired. handleInvalidToken expected Having known that is called for unauthenticated user, we can proceed with the second rule: handleInvalidToken When unauthenticated user tries to access / page, we should redirect them to /login Because there is no other condition to meet, we just return the result of which can be simplified to . It also makes sure user does not fall into redirect loop. redirectToLogin NextResponse.redirect(new URL(“/login”)) Lastly, handleError: async (error) => { console.error('Unhandled authentication error', {error}); return redirectToLogin(request, { path: '/login', publicPaths: PUBLIC_PATHS }); } Contrary to , is called when something happens and possibly needs to be investigated. You can find a list of possible errors with their description in handleInvalidToken handleError unexpected* the documentation In case of an error, we log this fact and safely redirect user to the login page * can be called with error after Google public keys are updated. handleError INVALID_ARGUMENT This is a form of key rotation and is . expected See this Github issue for more info Now, that’s it. Finally. Let’s log-out from our web app and open . We should be redirected to page. http://localhost:3000/ /login Let’s log in again, and try to enter . We should be redirected to page. http://localhost:3000/login / Not only we provided seamless user experience. is library that’s working only in the App’s server and does not introduce additional client-side code. The resulting bundle is truly . That is what I call perfect. next-firebase-auth-edge zero-bundle size minimal Our app is now fully integrated with Firebase Authentication both in Server and Client components. We are ready to unleash the full potential of Next.js! The app’s source code can be found in next-firebase-auth-edge/examples/next-typescript-minimal Epilogue In this guide, we’ve went through integrating new Next.js app with Firebase Authentication. Although quite extensive, the article omitted some important parts of the authentication flow, such as password reset form or sign in methods other than email and password. If you’re interested in the library, you can preview full-fledged . next-firebase-auth-edge starter demo page It features , , and more Firestore integration Server Actions App-Check support The library provides a with tons of examples dedicated documentation page If you liked the article, I would appreciate starring repository. Cheers! 🎉 next-firebase-auth-edge Bonus – Deploying app to Vercel This bonus guide will teach you how to deploy your Next.js app to Vercel Creating git repository To be able to deploy to Vercel, you will need to create a repository for your new app. Head to and create a new repository. https://github.com/ already initiated a local git repository for us, so you just need to follow to your project’s root folder and run: create-next-app git add --all git commit -m "first commit" git branch -M main git remote add origin git@github.com:path-to-your-new-github-repository.git git push -u origin main Adding new Vercel project Go to and sign in with your Github account https://vercel.com/ After you’ve logged in, go to Vercel’s Overview page and click Add New > Project Click next to the Github repository we’ve just created. Don’t deploy yet. Import Before we deploy, we need to provide project configuration. Let’s add some environment variables: Remember to set to , as Vercel uses HTTPS by default USE_SECURE_COOKIES true Now, we are ready to click Deploy Wait a minute or two, and you should be able to access your app with url similar to this: https://next-typescript-minimal-xi.vercel.app/ Done. I bet you didn’t expect it to be that easy. If you liked the guide, I would appreciate starring repository. next-firebase-auth-edge You can also let me know your feedback in the comments. Cheers! 🎉