Persist auth state in react/react native for Firebase

Question

I am using react native for an ios app and firebase for authentication. Every time I leave the app and come back, it asks for a login. I want to persist the firebase login but don't really know where to put it.

I know I need to put this in:

firebase.auth().setPersistence(firebase.auth.Auth.Persistence.LOCAL)

I have the following signIn function that runs when the login button is pressed on the signInScreen:

const signIn = async () => {
    setLoading(true);
    try {
      await firebase.signIn(email, password);
      const uid = firebase.getCurrentUser().uid;
      const userInfo = await firebase.getUserInfo(uid);
      const emailArr = userInfo.email.split("@");
      setUser({
        username: emailArr[0],
        email: userInfo.email,
        uid,
        isLoggedIn: true,
      });
    } catch (error) {
      alert(error.message);
    } finally {
      isMounted.current && setLoading(false);
    }
  };

I have the following signIn stuff in my firebaseContext:

const Firebase = {
  getCurrentUser: () => {
    return firebase.auth().currentUser;
  },

  signIn: async (email, password) => {
    return firebase.auth().signInWithEmailAndPassword(email, password);
  },

  getUserInfo: async (uid) => {
    try {
      const user = await db.collection("users").doc(uid).get();
      if (user.exists) {
        return user.data();
      }
    } catch (error) {
      console.log("Error @getUserInfo", error);
    }
  },

  logOut: async () => {
    return firebase
      .auth()
      .signOut()
      .then(() => {
        return true;
      })
      .catch((error) => {
        console.log("Error @logout", error);
      });
  },
};

Where do I put the persist code I listed above from the docs?

Thanks!

default is already local, you don't need to set it - firebase.google.com/docs/auth/web/… — Someone Special
– Someone Special, Commented May 6, 2021 at 19:58

Tarik Huber · Accepted Answer · 2021-05-06 19:55:08Z

1

When do you check if someon is signed in or not?

From the code shown it looks like you check it manuelly by calling currentUser. You have to consider that the persistance of auth state is asynchronous. That means if you call currentUser on auth before the localy saved auth state is loaded you would get there null and thing that the user is not signed in.

To get the auth state Firebase recommend to use the onAuthStateChanges event listener. With that you can listen to auth state changes no matter if you logged in or the persistet auth state is loaded.

The usage is very simple:

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
  } else {
    // No user is signed in.
  }
});

That is the reson I asked where you check if someon is signed in or not. If I could see that code I could help you adopt it to use that event listener.

answered May 6, 2021 at 19:55

Tarik Huber

7,4582 gold badges16 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

gmacerola Over a year ago

I just invited you to collaborate on the github repo if you have a minute to look at it.

gmacerola Over a year ago

Thank you very much for your response. Yeah, I read that but also don't know where to put it. This is located on private repo, I just invited you to collaborate on it if you have a minute to look at it I would greatly appreciate any guidance as to where it would be placed.

Tarik Huber Over a year ago

Hi, I have pushed the change to your project. If you want a boilerplate for react and firebase you could try this one: react-most-wanted.com Maybe it would be interesting for you.

gmacerola Over a year ago

I am pushing that update to my ios app as it seemed to work in metro. Thank you for the help! I am super intrigued by your RMW. It looks awesome! I will try it for my next React project. Question: will you do the same with react native and expo?

Tarik Huber Over a year ago

Thx 😄 Unfortunately I won't do it for native Apps. RMW is for Web and PWA. For native Apps I use Flutter.

Collectives™ on Stack Overflow

Persist auth state in react/react native for Firebase

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related