DEV Community

Firebase Google Sign in with React

Mary Gathoni on August 17, 2020

Introduction Firebase Authentication provides an easy way to log in users using their already existing social accounts. In this tutorial...

Read full post

Ben Force • Jan 28 '21

Very well written, thanks! I'm pretty new at React, so learning about useContext was an added bonus.

Mary Gathoni • Jan 28 '21

You're welcome 😊

imabigfan • Feb 25 '21

Hi Mary,
I am trying to use your code for a few days. Keep getting the following message:
Unhandled Rejection (TypeError): Cannot destructure property 'displayName' of 'user' as it is null.
Getting pretty frustrated trying to solve it.

Can you please... help me?

Jocimar Lopes • Mar 29 '21

You can use a condition to check IF user is there. Something like this:

useEffect(() => {
    auth.onAuthStateChanged(async (user) => {
        if(user){
            const { displayName, email } = user;
            setUser({
                displayName,
                email,
            });
        }
    });
}, []);

Jocimar Lopes • Mar 29 '21 • Edited

Hello, Mary, I've been looking for a tuto like this for two days. Have found several pro devs guides and none of them managed to put things in such a clean way.

To be honest, I'm a newbie with React, have little experience with ES6 and some years as a Java developer. So, I was looking for something that I could not only copy/paste. I was looking for a guide in which I could understand the logic of hooks and Context Providers applied to Firebase authentication.

Your write up is awesome, because I can debug it, if needed. And it is short. And it is clean :)

Thank you very much and keep up with the good job.

Jocimar Lopes • Mar 29 '21

If you got this error:
Attempted import error: 'auth' is not exported from 'firebase/app'

try this import:
import firebase from "firebase/app";
require("firebase/auth");

more info here
github.com/firebase/firebaseui-web...

Catalina Meneses • Sep 21 '21

I you're using "firebase": "^9.0.2", read this firebase.google.com/docs/web/modul...

Jorge Guerra • Jun 30 '21

Believe me! This is the best react context tutorial I've found. Thanks for sharing. 🙏🏼

Akki • Apr 10 '21 • Edited

What if I want a user to redirect to login page on doing logout?
Is this a good idea?

import { Redirect } from "react-router-dom";
export const logOut = () => {
auth
.signOut()
.then(() => {
console.log("logged out..");
return ;
})
.catch((error) => {
console.warn(error.message);
});
};

Abhishek150190 • May 6 '21

Its not Redirecting after logging in, can anybody tell

Abhishek150190 • May 6 '21

I think you have missed two things in the article one is while declaring the UserProvider.js "export default (props)"-props inside the brackets and secondly adding a return statement before redirect. Overall your article was pretty insightful .Keep up the good work buddy

Mary Gathoni • Aug 6 '21

I'll look into it and make changes. Thanks for pointing that out

lethal254 • Nov 30 '20

Thanks for this. I am an upcoming Kenyan developer too and am glad to see we are well represented.

Antonin • Nov 7 '20

Perfect, thanks !

dewanshDT • Jul 9 '21

This is exactly what I was looking for, thank you.

Anton Vynogradenko • May 29 '21 • Edited

I think:

 if (redirect) {
    <Redirect to={redirect}/>
  }

should be:

 if (redirect) {
    return <Redirect to={redirect}/>
 }

Kevin • Feb 1 '21

Brilliantly written, well done!

curlyfriesplease • Aug 14 '22

Thank you so much Mary, this is exactly what I needed :)
Really helpful!

Anupam Dubey • Jun 2 '22

This is the first article I came across where actually every step end-to-end is well "articulated". Thanks for this!

Gulshan Aggarwal • Jul 3 '21

Hey @Mary Gathoni if you look at Userprovider.js file there will be an error when the user gets logged out because when the user logged out, doesn't have properties like displayName and email.