Adding Firebase authentication to a Next.js app

Introduction

In this tutorial, we'll learn how to add Firebase authentication to a Next.js app. We'll use Firebase's authentication service to create a login page with Google authentication.

Prerequisites

• pnpm installed globally

The first thing is to create a Next.js app. I'm going to create one app using the following command.

pnpm create next-app

Adding Firebase

After creating the app, we need to create a Firebase project. Go to the Firebase console and create a new project. After creating it, you should be able to see the project dashboard.

Now, go to Build > Authentication and enable the Google sign-in method. You can enable other sign-in methods as well. But, for this tutorial, we will only use the Google sign-in method.

Nice! Now, we need to create a Firebase app. Go to Project settings > General and click on the </> icon to add a new app.

Now, you should be able to see the Firebase SDK snippet. Go to the Next.js app and create a new file called firebaseConfig.js in the root directory. Copy the Firebase SDK snippet and paste it into the firebaseConfig.js file. And then, export the config by adding the following code to the firebaseConfig.js file.

export { app, firebaseConfig };

After that, install the Firebase SDK for the Web using the following command.

🤩 Our Amazing Sponsors 👇

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

pnpm install firebase

We now have the Firebase SDK installed. The next thing is to add authentication to the app.

Adding authentication

Go to the firebaseConfig.js file and add the following code.

import { initializeApp } from "firebase/app";

// Auth
import { getAuth } from "firebase/auth";

// ...

// Auth
const auth = getAuth();

export { app, firebaseConfig, auth };

Open the app by running the following command.

pnpm run dev

Let's edit the pages/index.js file and add the following code.

export default function Home() {
    return (
        <div>
            <h1>Firebase Auth Tutorial</h1>
            <p>This is a tutorial on how to use Firebase Auth in a Next.js app.</p>

            <p>Click the button below to sign in with Google.</p>

            <button>Sign in with Google</button>

            <p>Debug info:</p>

            <pre></pre>
        </div>
    );
}

We have a minimal UI.

We now add the sign-in functionality. Go to the pages/index.js file and add replace the code with the following code.

import { auth } from "../firebaseConfig";
import { signInWithPopup, GoogleAuthProvider } from "firebase/auth";
import { useState } from "react";

export default function Home() {
    const [user, setUser] = useState(null);
    const [log, setLog] = useState("Logs...");
    const provider = new GoogleAuthProvider();

    const addLog = (log) => {
        setLog((prev) => prev + "\n" + JSON.stringify(log));
    };

    const signInWithGoogle = () => {
        signInWithPopup(auth, provider)
            .then((result) => {
                setUser(result);
            })
            .catch((error) => {
                addLog(error.message);
            });
    };

    return (
        <div>
            <h1>Firebase Auth Tutorial</h1>
            <p>This is a tutorial on how to use Firebase Auth in a Next.js app.</p>

            <p>Click the button below to sign in with Google.</p>

            <button
                onClick={() => {
                    signInWithGoogle();
                }}
            >
                Sign in with Google
            </button>

            <p>Debug info:</p>

            {user && <p>User: {JSON.stringify(user)}</p>}

            <pre>
                <code>{log}</code>
            </pre>
        </div>
    );
}

We have added the signInWithGoogle function. Now, we need to add the onClick event to the button. We also added a pre tag to display the debug info.

Try clicking the button. You should be able to see the following.

After signing in, you should be able to see the user object in the debug info.

We can use that user object to get the user's name, email, and profile picture.

{
    user && (
        <div>
            <h1>Welcome {user.user.displayName}</h1>
            <img src={user.user.photoURL} alt="user photo" />
        </div>
    );
}

And that's it! We have successfully added authentication to a Next.js app using Firebase.

Conclusion

In this tutorial, we learned how to add authentication to a Next.js app using Firebase. We also learned how to get the user's name, email, and profile picture. The code for this tutorial is available on GitHub.

Connect with me

• Twitter
• GitHub