Kojiro Yanoᯅ/VR Educator

Posted on Feb 10

Adding Google Login with Firebase to a Next.js App Hosted on Vercel (Using next-firebase-auth-edge)

#vercel #firebase #googlecloud #nextjs

Disclaimer

This is an English translation of my original Japanese post on Qiita (https://qiita.com/yanosen_jp/items/848206a306f52c7e3f94). Therefore some of the screenshots are in Japanese, but shouldn't be too difficult to guess what they mean. Hope this helps!

Introduction

I started studying Next.js to build a class-related app and host it on Vercel after trying out an AI app generator tool (v0). In the past, I built apps with a Google Account login feature using Google Apps Script. This time, I wanted to recreate that login feature using Next.js + Firebase.

However, for a beginner like me, the configuration turned out to be far more complex than I expected, so I decided to take notes. By the way, ChatGPT o1 pro and other AI tools were almost no help in solving these specific issues. I gathered most of the information from traditional blogs and forum posts, and I'm sharing my findings here.

Because I'm still a complete beginner, I apologize if there are misunderstandings or mistakes. Feel free to point them out in the comments so I can correct them.

Starting Point

Since I'm a beginner and AI wasn't very helpful here, I'm going to use a base project.

next-firebase-auth-edge is a package for handling Firebase Authentication in Next.js. Inside its Examples/next-typescript-starter directory, there's a sample project we'll use. It already includes a login screen and functionality like in the screenshot below:

Preparing the Vercel Project

We'll assume you already have access to Vercel, GitHub, Google Cloud, and Firebase. My local environment is macOS.

Go to the GitHub Releases page of next-firebase-auth-edge and download the latest release. At the time of writing, it was v1.8.2.
Unzip the downloaded file (I left the folder name as next-firebase-auth-edge-1.8.2).
Push that folder to your own GitHub repository.
In Vercel, create a new project and connect it to that repo.
For the “Root Directory,” be sure to select next-typescript-starter (not the whole repository). We only need that folder.

Once you've set the Root Directory, go ahead and Deploy. It should deploy without errors, although it won’t work yet because nothing is configured.

When the deployment finishes, check the Deployment Details to find the Production Domain (the one that doesn’t change with each deploy). Make a note of it. For example, I had something like:

vercel-tests....vercel.app

Setting Up a Firebase Web App

Next, create a Web App in Firebase. We won’t be hosting on Firebase in this tutorial, but we still need the basic app configuration.

In the Firebase console, create a new project.
Click “Add app” and select the Web option.
Skip Firebase Hosting if you want; it’s not strictly required here.
When you see the Firebase SDK setup, copy the firebaseConfig details somewhere safe. We’ll need them soon.

Back in your terminal, navigate into the next-typescript-starter folder and run:

yarn install

(npm install might cause errors in this particular project.)

Then install the Firebase CLI globally:

npm install -g firebase-tools
firebase login
firebase use your-firebase-project-id

After logging in, run:

firebase init

Choose “Hosting” during the setup process.

This will create a firebase.json file in your project. Edit it to the following minimal configuration:

{
  "hosting": {
    "public": "public"
  }
}

Then deploy your empty hosting setup:

firebase deploy --only hosting

If everything goes well, you’ll see a success message:

At this point, a file named init.json should be generated automatically. You can verify by visiting:

https://(your-project-id).firebaseapp.com/__/firebase/init.json

If successful, it will display a JSON object for your project:

Now, return to the Firebase console.

Setting Up Firebase Authentication

Back in the Firebase console, go to Build → Authentication and click Get started.

Enable Google as a sign-in provider:

Turn the toggle to Enable and configure it as needed. Save the changes.

Next, in the Authentication → Settings → Authorized Domains section, add the domain for your Vercel app.

Then, click the gear icon in the top-left of the Firebase console, select Project settings, and open the Service accounts tab to view the Firebase Admin SDK details.

Generate a new private key. This file will contain sensitive info (like private_key), so keep it secure.

Although it’s not strictly necessary for just logging in, the sample project also uses Firestore. Under Build → Firestore Database, create a database. Once it’s created, go to Rules and update them to something permissive if you want to test reads and writes easily (e.g., allow read/write for authenticated users).

Configuring the Next.js Project

In your code editor (e.g., VS Code), go to the folder for your Vercel project and find *.env.dist. Duplicate it and rename it to *.env.local:

In .env.local, fill in the details collected from Firebase and Vercel:

FIREBASE_API_KEY=AIza*********
FIREBASE_PROJECT_ID=qii****
FIREBASE_ADMIN_CLIENT_EMAIL=firebase-adminsdk-*****@******.iam.gserviceaccount.com
FIREBASE_ADMIN_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\nMIIEvQIBADANBgkqhk********uSfqy/esU8C/4yvskY=\n-----END PRIVATE KEY-----\n"

NEXT_PUBLIC_FIREBASE_API_KEY=AIzaS***********
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=vercel-tests-******.vercel.app
NEXT_PUBLIC_FIREBASE_PROJECT_ID=qii*****
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=79************
NEXT_PUBLIC_ORIGIN=https://vercel-tests-*********.vercel.app

USE_SECURE_COOKIES=false

COOKIE_SECRET_CURRENT=6Lch49AqAAAAAB************
COOKIE_SECRET_PREVIOUS=6GVAHILed0yfoJGogCgkZ*********

Things to note:

FIREBASE_ADMIN_PRIVATE_KEY must be wrapped in quotes.
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN should be the domain of your Vercel app (no https prefix).
NEXT_PUBLIC_ORIGIN should include the https prefix of your Vercel app.
COOKIE_SECRET_CURRENT and COOKIE_SECRET_PREVIOUS can be any string, but don’t leave them blank.

Now, we also need to add these environment variables to our Vercel project. In your Vercel dashboard, go to Settings → Environment Variables, click Add Another, then Import .env. Upload your .env.local.

Because the Vercel app is served via HTTPS by default, set USE_SECURE_COOKIES=true in Vercel’s environment variables.
If your private key’s format breaks (missing quotes or line breaks), manually edit it in Vercel’s dashboard.

Once everything is set, push your local changes to GitHub so Vercel deploys again. After it finishes, open the Production Domain. This time, the page should render properly:

However, if you try Log in with Google, you’ll get this error:

This Error 400: redirect_uri_mismatch happens because we changed the domain to Vercel’s in our environment variables, but Google Cloud isn’t aware of this yet.

Setting Up Google Cloud

In the Google Cloud console, select the same project you used for Firebase. Go to APIs & Services → Credentials → OAuth 2.0 Client IDs, then click the Web Client entry:

You’ll see fields for Authorized JavaScript origins and Authorized redirect URIs. Enter:

Authorized JavaScript origins: The base URL of your Vercel app (e.g., https://vercel-tests-******.vercel.app)
Authorized redirect URIs: The same domain plus **/auth/handler** (e.g., https://vercel-tests-******.vercel.app/auth/handler)

Then save.

Once done, try logging in again with Log in with Google (Redirect). If all configurations are correct, after you select your Google account, you should see the login success screen:

On the Profile page, the Update counter button will increment a value in Firestore’s user-counters collection (the collection gets created automatically if it doesn’t exist):

Conclusion

It would be great if AI tools could provide clear step-by-step instructions for things like this. However, when the AI lacks the right context or knowledge, it often gives endless irrelevant suggestions, causing a huge time sink. Sometimes it’s faster to search through human-written blog posts or forums when you’re stuck. Hopefully, this guide helps you set up your own Next.js + Firebase + Google Sign-In app on Vercel!