
<div class="list-number highlight">
 
- [Introduction](#Introduction)
- [Why Firebase Authentication](#Why-Firebase-Authentication)
- [Setting Up Firebase](#Setting-Up-Firebase)
- [Installing Required Packages](#Installing-Packages)
- [Configuring Firebase](#Configuring-Firebase)
- [Authentication with Google](#Authentication-Google)
- [Conclusion](#Conclusion)

</div>

- <h3 class="text-sm" id="Introduction">Introduction</h3>

If you're diving into the world of Next.js and looking to implement user authentication, you've come to the right place. In this article, we'll explore the fascinating realm of Firebase Authentication with Google in Next.js. So, grab your virtual passports, and let's embark on this journey!

- <h3 class="text-sm" id="Why-Firebase-Authentication">Why Firebase Authentication</h3>

Before we delve into the technicalities, it's essential to understand why Firebase Authentication is a fantastic choice. Firebase, developed by Google, offers a comprehensive suite of tools for building web and mobile applications. Firebase Authentication is one of its gems, allowing you to add user authentication effortlessly. It's secure, reliable, and comes with Google's seal of approval.

- <h3 class="text-sm" id="Setting-Up-Firebase">Setting Up Firebase</h3>

First things first, you need to set up Firebase for your Next.js project. This is a crucial step to enable authentication. Firebase provides an intuitive console to guide you through the process. Make sure you've created a project, and you've got your Firebase configuration ready.

- <h3 class="text-sm" id="Installing-Packages">Installing Required Packages</h3>

In your Next.js project directory, you need to install the necessary packages to work with Firebase. Use npm or yarn to add <span class="highlight-small">firebase</span> and <span class="highlight-small">firebase/auth</span>. These packages will make it seamless to integrate Firebase Authentication into your project.

```javascript
npm i firebase
```

- <h3 class="text-sm" id="Configuring-Firebase">Configuring Firebase</h3>

With the packages installed, you need to configure Firebase using your project's configuration details. This usually involves creating a Firebase configuration file and initializing Firebase with it. You'll need to import initializeApp from 'firebase/app' and pass in your configuration object.

For that create firebase.js file on your project root.

```javascript
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: process.env.API_KEY,
  authDomain: process.env.AUTH_DOMAIN,
  projectId: process.env.PROJECT_ID,
  storageBucket: process.env.STORAGE_BUCKET,
  messagingSenderId: process.env.MESSAGING_SENDER_ID,
  appId: process.env.APP_ID,
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
```

You might be thinking how we can get the above configuration values. To get the values you should own a <a href="https://console.firebase.google.com/u/0/" target="_blank">firebase</a> account. Then create project under authentication category. Once created the project you will be able to create apps, during the creation of apps you will get generated these values exactly the same format.

<div class="highlight-error">
Unhandled Runtime Error<br/>
FirebaseError: Firebase: Error (auth/invalid-api-key).

You might face the above issue while configuring the values in environment variable aka .env then you should move those into next.config.js or refer the <a href="https://devphobia.com/posts/store-firebase-values-on-environment-file-in-nextjs" target="_blank">documentation</a>

</div>

- <h3 class="text-sm" id="Authentication-Google">Authentication with Google</h3>

Now, it's time to dive into the exciting part - setting up Google authentication. Firebase makes this incredibly straightforward. You'll need to <span class="highlight-small">signInWithPopup</span>, <span class="highlight-small">signOut</span>, <span class="highlight-small">onAuthStateChanged</span>, <span class="highlight-small">GoogleAuthProvider</span> from <span class="highlight-small">'firebase/auth'</span> and use it to create an instance of the Google provider.

We can create context wrapper and import the above mentioned function components for better usability.

Create a file AuthContext.js and add the snippets to the file.

```javascript
import { useContext, createContext, useState, useEffect } from "react";
import {
  signInWithPopup,
  signOut,
  onAuthStateChanged,
  GoogleAuthProvider,
} from "firebase/auth";
import { auth } from "../firebase"; // your firebase config file

const AuthContext = createContext();

export const AuthContextProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  const googleSignIn = () => {
    const provider = new GoogleAuthProvider();
    signInWithPopup(auth, provider);
  };

  const logOut = () => {
    signOut(auth);
  };

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
    });
    return () => unsubscribe();
  }, [user]);

  return (
    <AuthContext.Provider value={{ user, googleSignIn, logOut }}>
      {children}
    </AuthContext.Provider>
  );
};

export const UserAuth = () => {
  return useContext(AuthContext);
};
```

Import the `AuthContextProvider` component to your root component and wrap it with `AuthContextProvider`.

```javascript
"use client";
import Navbar from "./components/Navbar"; // Menu component for navigation
import { AuthContextProvider } from "./context/AuthContext";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <AuthContextProvider>
          <Navbar />
          {children}
        </AuthContextProvider>
      </body>
    </html>
  );
}
```

And there you have it! Users can now sign in to your Next.js app using their Google accounts.

- <h3 class="text-sm" id="Conclusion">Conclusion</h3>

In this article, we've explored the exciting world of Firebase Authentication with Google in Next.js. We've seen how easy it is to set up Firebase, install the required packages, and configure Firebase for your Next.js project. We've also learned how to implement Google authentication and manage user authentication states.

By incorporating Firebase Authentication, you're enhancing your app's security and providing users with a convenient way to access your services. Remember, creating a seamless and secure authentication system is essential for any modern web application. Firebase makes this task not only achievable but enjoyable.

So, go ahead and implement Firebase Authentication with Google in your Next.js project. Your users will thank you, and you'll be on your way to building a fantastic web app!


Firebase Authentication is one of its gems, allowing you to add user authentication effortlessly. It's secure, reliable, and comes with Google's seal of approval.

More Stories related to 'authentication'

Also read the similar topics