Add Google Sign-in Feature to Next.js or React App Using Firebase

Next.js 14 | React | Firebase

Google Sign in using Next.js and Firebase

Hello everyone, My name is Rohit. In this article, I will guide you through how to build a Chatbot using Next.js, Tailwind CSS, and OpenAI API. If you face any issues then feel free to comment or DM me on my social media handles. X && Instagram

Source Code

Before diving into the code, there are a few things you need to set up. First and foremost, you’ll need to initialize a Next.js application. Next, decide whether you want to use page router configuration or app router configuration, depending on your preference. Also, Install the firebase using the command: npm i firebase

Add a config.js file to your root directory and add the following lines to this file:

import { initializeApp } from "firebase/app";
import 'firebase/auth';

const firebaseConfig = {
    apiKey: "@#####################",
    authDomain: "############",
    projectId: "#########",
    storageBucket: "###############",
    messagingSenderId: "#############",
    appId: "#######################",
    measurementId: "########"
};

const app = initializeApp(firebaseConfig);

export default app;

Now inside the page.js file.

• Import the necessary libraries and modules for the React app.

Initialize State and Router:

• Use the useState hook to manage the user state.
• Use useRouter hook to navigate to different pages.

Set Up Firebase Authentication Listener:

• Utilize the useEffect hook to set up an authentication listener.
• Update the user state based on authentication changes.

Google Sign-In Function:

• Create a function signInWithGoogle to handle Google authentication.
• Use getAuth to initialize Firebase auth and GoogleAuthProvider for Google sign-in.

Render UI Based on Authentication State:

• Display different UI components based on whether the user is logged in or not.

After the Login. The user should see the dashboard page. For this, make a folder inside the app directory and name it “dashboard”. Inside the “dashboard” folder make a javascript file and name it “page.js”. The algorithm of this dashboard page is something like this:

Import Required Modules:

• Import the necessary modules and functions from Firebase and Next.js.

Initialize Auth and Router:

• Initialize the authentication and router objects using Firebase functions and Next.js useRouter hook.

Check User Authentication on Page Load:

• Use useEffect to check the user's authentication status when the component mounts.

Handle Logout:

• Implement a function to handle user logout using the signOut function from Firebase.

Dashboard UI:

• Create a simple dashboard UI displaying a welcome message and a logout button.

You can get help from here:

That’s it. If you gained some information today, please follow me and clap so that Medium starts recommending this article to more developers. Thanks for reading!

Attention all developers seeking to make social connections and establish themselves while earning passive income — look no further! I highly recommend ‘From Code to Connections’, a book that will guide you through the process. Don’t miss out, grab your copy now on Amazon worldwide or Amazon India! You can also go for Gumroad