How to authenticate with google using firebase in React ? - GeeksforGeeks

01 Apr, 2021
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:
Firebase
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to set background images in ReactJS ?
How to create a table in ReactJS ?
How to navigate on path by button click in react router ?
How to create a multi-page website using React.js ?
How to build a basic CRUD app with Node.js and ReactJS ?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript