How To implement Google Sign-In using Firebase ReactJS / Next Js #2024

Table of Contents

Sure, let’s break down the steps with some additional explanations:

  1. Firebase Project Setup:
    • Firebase provides backend services for your web application, including authentication. Create a new project on the Firebase Console to get started.
  2. Firebase Authentication Setup:
    • Within your Firebase project, navigate to the “Authentication” section and enable Google as a sign-in provider. This allows users to sign in to your app using their Google accounts.
  3. ReactJS Application Creation:
    • Use a tool like Create React App to set up a new ReactJS application. This provides a structured starting point for your project.
  4. Install Firebase in Your React App:
    • Firebase provides a JavaScript SDK that you can use in your React app. Install it using npm, a package manager for JavaScript.
  5. Firebase Initialization in Your App:
    • Create a file named firebase.js to initialize Firebase in your app. This file will contain your Firebase project configuration, allowing your app to communicate with Firebase services.

 

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app"
import { getAuth, GoogleAuthProvider, signInWithPopup } from "firebase/auth"
import { getFirestore } from "firebase/firestore"
import { getStorage } from "firebase/storage"
import { redirect } from "next/dist/server/api-utils"
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
 apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
  measurementId: "G-0K4TQ64H3B",
}
// Initialize Firebase
const app = initializeApp(firebaseConfig)
const db = getFirestore(app)
const storage = getStorage(app)
const auth = getAuth(app)
const provider = new GoogleAuthProvider()

// signInWithGoogle

const signInWithGoogle = () => {
  signInWithPopup(auth, provider)
    .then(result => {
      console.log(result)
      const name = result.user.displayName
      const email = result.user.email
      const img = result.user.photoURL
      localStorage.setItem("name", name)
      localStorage.setItem("email", email)
      localStorage.setItem("img", img)

      window.location.replace("/records")
    })
    .catch(error => {
      console.log(error)
    })
}

export { app, auth, db, storage, signInWithGoogle }

 

Google Sign-In Button Component:

  • Create a React component (e.g., GoogleSignInButton.js) responsible for rendering a button that users can click to sign in with Google. This component will use the Firebase authentication library to handle the sign-in process. import { signInWithGoogle } from “../../firebase/firebase”

Handling Google Sign-In:

Inside your GoogleSignInButton component, define a function (signInWithGoogle) that initiates the Google Sign-In process when the button is clicked. This function uses Firebase’s authentication methods to handle the sign-in operation.

Using the Google Sign-In Button in Your App:

Import and use the GoogleSignInButton component in your main application file or component. This makes the “Sign In with Google” button a part of your app’s user interface.

Run Your React App:

Start your React app to see the result. This can be done with the npm start command. Open your app in a web browser, and you should see the “Sign In with Google” button. Clicking on it will trigger the Google Sign-In process, and Firebase will handle the authentication.

 

"use client"
import React from "react"
import { signInWithGoogle } from "../../firebase/firebase"
import Image from "next/image"

function signup() {
  return (
    <div className=" w-full  h-screen  bg-gray-900 flex items-center flex-col justify-center">
      <div className="flex items-center mb-8">
        <Image
          src={localStorage.getItem("img")}
          width={60}
          height={60}
          alt="user"
          className=" rounded-full mr-2"
        />
        <div className="text-white">
          <h3> {localStorage.getItem("name")}</h3>
          <h3> {localStorage.getItem("email")}</h3>
        </div>
      </div>

      <button
        className=" bg-red-500 p-2 text-white rounded-sm"
        onClick={signInWithGoogle}
      >
        sign in with google
      </button>
    </div>
  )
}
export default signup

 

No data found.