How To implement Google Sign-In using Firebase ReactJS / Next Js #2024
Sure, let’s break down the steps with some additional explanations:
- Firebase Project Setup:
- Firebase provides backend services for your web application, including authentication. Create a new project on the Firebase Console to get started.
- 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.
- 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.
- 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.
- 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.
- Create a file named
// 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