Firebase Auth in Next.js

Similar to when I manually added Tailwind to my Next.js project, it appears that Vercel suggests you use the with-firebase-authentication example. When you go to visit this example, it directs you to the next-firebase-auth package along with their example.

So, I'm going to try to follow the instructions on the next-firebase-auth homepage.

First I installed the dependencies:

yarn add next-firebase-auth firebase firebase-admin 

Then they say to create an initAuth.js file to initialize the package.

initAuth.js

There's a call to init from next-firebase-auth that passes in a big configuration object.

The docs for the package has some placeholder values that I'm going to have to create as I go:

• authPageURL: '/auth' tells me I'll create a pages/auth.js file.
• loginAPIEndpoint: '/api/login' Marked as required
• logoutAPIEndpoint: '/api/logout' Marked as required

There is also a firebaseAdminInitConfig that is "required in most cases". It includes a projectId, clientEmail, and privateKey that I'm going to have to sign up for on Firebase and create a .env for, respectively.

Creating a Firebase project

I visited the Firebase Console and followed the steps to create a new project. I decided not to include Google Analytics for this demo project.

Once inside, there was an "Authentication" option that showed up in the sidebar. I clicked it, then clicked the "Get Started" button.

I decided to enable authentication with Google to start. After flipping the switch, setting my email address, and clicking save, it seems to have just worked.

Now according to the OAuth Section of the Firebase docs, I have to make sure any domain is added. Localhost for now, will set up another later.

Reading through the source code of the next-firebase-auth example, I found a reference to a library called react-firebaseui which I'm going to use as well, because why not?

In the interest of speed, I'm going to basically lift the the FirebaseAuth.js file for now.

yarn add react-firebaseui

import { init } from 'next-firebase-auth'

const initAuth = () => {
  init({
    authPageURL: '/auth',
    appPageURL: '/',
    loginAPIEndpoint: '/api/login',
    logoutAPIEndpoint: '/api/logout',
  })
}

export default initAuth