Google Authentication using Firebase in Next.js
Tags: firebase, nextjs
Published: 2022-09-23 13:28:13

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l32mc0mbhcbhp5dm9d0i.jpg)

Hellooo everyone,

I was recently developing a platform in Next.js and needed to incorporate Google authentication. The majority of the available guides, however, were out of date, contained errors, or relied on unnecessary dependencies. Anyway, I cracked it and decided that writing it down step by step would be helpful to others. The sole purpose of this article is to walk you through the simplest method of adding Google auth to your Next.js project using Firebase.

Before we begin, I’m assuming you already have a firebase account set up for your project. If this is not the case, please refer to the [setup documentation](https://firebase.google.com/docs/web/setup). It’s quite simple. Simply start a new project and register your app. After that, you’ll be given a unique set of credentials. This can be found in your project settings and will look something like,

```javascript
const firebaseConfig = {
  apiKey: "your api key",
  authDomain: "your credentials",
  projectId: "your credentials",
  storageBucket: "your credentials",
  messagingSenderId: "your credentials",
  appId: "your credentials"
};
```

Now that we have the Firebase project set up, let’s get started on the coding.

## Step 1 : Creating a Next.js project

```
npx create-next-app _PROJECT_NAME_
```

## Step 2 : Install the Firebase module

```
npm install firebase 
```
The version I used was **9.9.4**.

## Step 3 : Enable Google sign-in method
Navigate to the authentication tab in your Firebase project. You will be able to see various sign-in methods that have been configured with the project. Add a new Google provider here.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dqp5viu09m8bd0vtoetx.png)

## Step 4 : Enable authentication in your project
Yes, this is the exciting part. Let’s keep things simple and keep all of the authentication logic in the **_app.js** file.

Let’s start by importing the firebase modules and adding our firebase credentials to the project.

```javascript
import firebase from "firebase/compat/app";
import "firebase/compat/auth";

const firebaseConfig = {
  apiKey: "your api key",
  authDomain: "your credentials",
  projectId: "your credentials",
  storageBucket: "your credentials",
  messagingSenderId: "your credentials",
  appId: "your credentials"
};
```
Let’s now start the Firebase service and enable the Google auth provider.

```javascript
firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();
const provider = new firebase.auth.GoogleAuthProvider();
provider.setCustomParameters({ prompt: "select_account" });
```
We can now use the auth object to define our sign in and sign out functions.

```javascript
const signIn = () => auth.signInWithPopup(provider);
const signOut = () => auth.signOut();
```
When you call the **signIn **function, a popup will appear from which you can select your Google account. And the **signOut **function logs you out and clears the session. Isn’t it too simple? ;)

We must now keep track of whether or not the user is logged in. This will remain a state variable.

```javascript
const [user, setUser] = useState(null);
```
This object contains basic metadata about the logged in user, such as display name and email address.

We’ll then listen for auth changes from Firebase. This is required to check if the user is already logged in when you return or to update the state once you successfully login.

```javascript
useEffect(() => {
  firebase.auth().onAuthStateChanged(async (user) => {
    setUser(user);
  });
}, []);
```
You can also include any additional logic here. Sending the JWT token to your backend, for example, to keep session data, etc.

I’ll just paste the entire **_app.js** code we’ve written so far for reference.

```javascript
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import { useEffect, useState } from "react";

// Firebase config
const firebaseConfig = {
  apiKey: "your api key",
  authDomain: "your credentials",
  projectId: "your credentials",
  storageBucket: "your credentials",
  messagingSenderId: "your credentials",
  appId: "your credentials"
};

// Initialize firebase and google provider
firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();
const provider = new firebase.auth.GoogleAuthProvider();
provider.setCustomParameters({ prompt: "select_account" });

// Sign in and sign out functins
const signIn = () => auth.signInWithPopup(provider);
const signOut = () => auth.signOut();

function MyApp({ Component, pageProps }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    firebase.auth().onAuthStateChanged(async (user) => {
      setUser(user);
    });
  }, []);

  return (
    <Component 
      {...pageProps} 
      user={user} 
      signIn={signIn} 
      signOut={signOut} 
    />
  );
}

export default MyApp;
```

## Step 5 : Fire it up!
To test the authentication, add some simple logic to the **index.js** file.

```javascript
export default function Home(props) {
  return (
    <div>
      {props.user ? (
        <>
          <span>Signed in as : {props.user.email}</span>
          <button onClick={props.signOut}>Sign Out</button>
        </>
      ) : (
        <button onClick={props.signIn}>Sign In</button>
      )}
    </div>
  );
}
```
Start the project and see the results.

```
npm run dev
```
That’s it!

You now have a Next.js project that uses Google authentication. If I missed anything, please let me know in the comments.

**Cheers and happy coding!**