add google login firebase react code example

Example 1: google sign in in firebase react

//add to your firebase.js file: google provider sign-in
const googleProvider = new firebase.auth.GoogleAuthProvider();
export { firebase, db, auth, functions, googleProvider }

//Actions/GoogleAuthentication.js
import { firebase, googleProvider, db } from '../components/firebase/firebase'
import React, {useEffect} from "react";
import { useHistory, Redirect } from 'react-router-dom'

export const SignInWithGoogle = () => {
    const history = useHistory();
    useEffect(() => {
        setTimeout(() => {
            history.push('/dashboard');
         }, 10000);
       },[]);

    return () => {
        return firebase.auth().signInWithPopup(googleProvider)
        .then(async result =>{
            console.log(result.credential.accessToken)
            const user = result.user
            console.log(user)
            localStorage.setItem('userid', user.uid)
            localStorage.setItem('photoURL', user.photoURL)
            //TODO if userid exists IN USERS db then use update IF NULL use set
            await db.collection('users').doc(user.uid).update({
               // id: user.uid,
                name: user.displayName,
                email: user.email,
                phone: user.phoneNumber,
                photoURL: user.photoURL
            })
        })
        .then(() => {
            history.push('/dashboard');
        })
        .catch( err => {
            console.log(err)
        })       
    }
}

export const startLogout = () => {
    return () => {
        return firebase.auth().signOut()
    }
}

Example 2: add firebase in react

import * as firebase from 'firebase'

const firebaseConfig = {
    apiKey: "AIzaSyC6EDL8gMkZc3GGzGveMqWe5zvAr5DNiL4",
    authDomain: "blood-components.firebaseapp.com",
    databaseURL: "https://blood-components.firebaseio.com",
    projectId: "blood-components",
    storageBucket: "blood-components.appspot.com",
    messagingSenderId: "388223113819",
    appId: "1:388223113819:web:1273570a12add0fedafd7e",
    measurementId: "G-K6NM078FWD"
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();
const db = firebase.firestore();

//initiating references to the databases
const usersRef = db.collection('users')

// for privileges purposes
const functions = firebase.functions();

//google provider sign-in
const googleProvider = new firebase.auth.GoogleAuthProvider();


export { firebase, db, auth, functions, googleProvider }