Thursday, October 2, 2025
HomeLanguagesHow to authenticate with google using firebase in React ?

How to authenticate with google using firebase in React ?

The following approach covers how to authenticate with Google using firebase in react. We have used firebase module to achieve so.

Creating React Application And Installing Module:

Step 1: Create a React myapp using the following command:

npx create-react-app myapp

Step 2: After creating your project folder i.e. myapp, move to it using the following command:

cd myapp

Project structure: Our project structure will look like this.

Step 3: After creating the ReactJS application, Install the firebase module using the following command:

npm install firebase@8.3.1 --save

Step 4: Go to your firebase dashboard and create a new project and copy your credentials.

const firebaseConfig = {
      apiKey: "your api key",
      authDomain: "your credentials",
      projectId: "your credentials",
      storageBucket: "your credentials",
      messagingSenderId: "your credentials",
      appId: "your credentials"
};

Step 5: Initialize the Firebase into your project by creating Firebase.js file with the following code.

Firebase.js




import firebase from 'firebase';
  
const firebaseConfig = {
    // Your credentials
};
  
firebase.initializeApp(firebaseConfig);
var auth = firebase.auth();
var provider = new firebase.auth.GoogleAuthProvider(); 
export {auth , provider};


Step 6: Go to your firebase dashboard and Enable the google sign-in method as shown below. 

Step 7: Now install the npm package i.e. react-firebase-hooks using the following command.

npm i react-firebase-hooks

This package helps us to listen to the current state of the user.

Step 8: Create two files i.e. login.js and main.js with the following code.

login.js




import React from 'react';
import {auth , provider}  from './firebase.js';
  
const Login = () => {
  
    // Sign in with google
    const signin = () => {
        auth.signInWithPopup(provider).catch(alert);
    }
      
    return (
        <div>
            <center>
                <button style={{"marginTop" : "200px"}} 
                onClick={signin}>Sign In with Google</button>
            </center>
        </div>
    );
}
  
export default Login;


Main.js




import React from 'react';
import {auth} from './firebase';
  
const Mainpage = () => {
  
    // Signout function
    const logout = () => {
        auth.signOut();
    }
      
    return (
        <div>
            Welcome
               
            {
                auth.currentUser.email
            }
            <button style={{"marginLeft" : "20px"}} 
            onClick={logout}>
                Logout
            </button>
        </div>
    );
}
  
export default Mainpage;


Step 8: Finally Import all required files in App.js file as shown below.

App.js

Javascript




import React from 'react';
import {auth} from './firebase';
import {useAuthState} from 'react-firebase-hooks/auth';
import Login from './login';
import Mainpage from './main';
  
function App() {
  const [user] = useAuthState(auth);
  return (
    user ? <Mainpage/> : <Login/>
  );
}
  
export default App;


Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
RELATED ARTICLES

Most Popular

Dominic
32331 POSTS0 COMMENTS
Milvus
85 POSTS0 COMMENTS
Nango Kala
6703 POSTS0 COMMENTS
Nicole Veronica
11867 POSTS0 COMMENTS
Nokonwaba Nkukhwana
11926 POSTS0 COMMENTS
Shaida Kate Naidoo
6818 POSTS0 COMMENTS
Ted Musemwa
7079 POSTS0 COMMENTS
Thapelo Manthata
6775 POSTS0 COMMENTS
Umr Jansen
6776 POSTS0 COMMENTS