DEV Community

Authenticate users with firebase and react.

Tallan Groberg on February 26, 2020

In this article, we are going to make a basic user auth with firebase. If you have experience with any other type of user auth, you probably got fr...

Read full post

Alexander Satchell • Aug 20 '20

Hey Tallan, thank you for helping me get my User Auth set up! I have a quick question, Whenever I refresh the page, my token leaves local storage and the user is signed out. Is there a function I can employ in the authMethod.js file to prevent this from happening? Thanks!

Tallan Groberg • Aug 20 '20

I can’t help you out for a couple weeks, I’m very sorry, I’m currently on vacation.

I will do some research as soon as I can and I really appreciate you taking the time to read my tutorial and asking questions but I cannot answer them in a timely manner.

Arne Pedersen • Aug 13 '20

Hey, Tallan. Thanks for a nice tutorial.
When I came to the part where you store the token in localStorage, I couldn't find the token at the same place in the res Object. I then started Googling this and it seems firebase automatically stores the user's credentials in local storage, and reloads it from there when the app restarts/page reloads, under Storage -> IndexedDB.

If the response object has changed since you created this tutorial, what would you suggest I do to move forward?

Tallan Groberg • Aug 14 '20

I’m going to have to look at the res object from firebase and all of application storage in order to give you the best answer, but I did notice that the token was in the indexDB when I wrote this tutorial. I found it easier to dig through object from firebase and save it to local storage rather than try and access indexDB. My recommendation is the dig through the object and save the token to local storage, however it is worth assessing the difficulty of cutting out the middle man and just using indexDB.

I will give you a better answer than this when I have the time to look at the code again.

Arne Pedersen • Aug 14 '20 • Edited

Wow, that's fantastic. I'm looking forward to hear what you find.

I can see that some people recommend useEffect and something called onAuthStateChanged, like so:

useEffect(() => {
   const unsub = firebase.auth().onAuthStateChanged((user) => {
      user ? setUser(user) : setUser(null);
    });
    return () => {
      unsub();
    };
  });
  return user;
};

I guess this is using the stored data in the indexedDB(?), but if you would consider this as a viable option - how would you recommend integrating this with the context? If you could comment on this as well, it would be really awesome!

Somtochukwu Okafor • Nov 3 '20 • Edited

Thanks Tallan for the amazing tutorial. I ran into some errors trying to reproduce it in my react project.
"TypeError: Cannot destructure property 'token' of 'Object(...)(...)' as it is undefined."

Please could you look at this?

Alex-omosa • Jan 28 '21

try checking the way you are importing firebaseAuth ,
Import like this
import { firebaseAuth } from './../provider/AuthProvider';
instead of like this
import firebaseAuth from './../provider/AuthProvider';

I got the same error, this how I solved it

Hüseyin Bera Bulut • Jan 25 '21

Hi Tallan thanks for tutorial, it's brilliant. There are two errors in the code above.
You fixed them in your source repo but if someone is stuck, it may help.

const {signout,} = useContext(firebaseAuth)

-> signout is need to be replaced by handleSignout.

const handleSignout = () => {
authMethods.signout()
}

-> we need to pass setErrors and setToken as parameters to authMethods.signout().