Unlocking the Secrets of Firebase Authentication with Google in Next.js

• Introduction

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!

• Why Firebase Authentication

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.

• Setting Up Firebase

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.

• Installing Required Packages

In your Next.js project directory, you need to install the necessary packages to work with Firebase. Use npm or yarn to add firebase and firebase/auth. These packages will make it seamless to integrate Firebase Authentication into your project.

npm i firebase

• Configuring Firebase

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.

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 firebase 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.

• Authentication with Google

Now, it's time to dive into the exciting part - setting up Google authentication. Firebase makes this incredibly straightforward. You'll need to signInWithPopup, signOut, onAuthStateChanged, GoogleAuthProvider from 'firebase/auth' 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.

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.

"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.

• Conclusion

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!