在 React-Native 中登录/退出 Firebase 的最佳方式？

Question

I am having a problem understanding how to implement:

1. sign a user in
2. keep listening to the user changes
3. sign a user out
4. unsubscribe to the listener

using :

const unsubscribe = firebase.auth().onAuthStateChanged((user) => {
    if (user) {
        // Signed in
    } else {
        // Signed out
    }
});
unsubscribe();

I understand that the above listener is recommended but I don't understand how to use it. Can someone explain in more details?

I wanna know if this function should be called when I first sign a user in, but then when and how should I sign them out? Should I call this function in each screen of the app (for ex. in componentDidMount)?

Moreover, where should I unsubscribe() to the listener? In which screen? Let's say there are THREE screens: Login, Screen 1, Screen 2 . I call the listener in Login screen, then when the user is in Screen 1 or Screen 2 , how am I supposed to keep listening to the changes and sign him out when I should AND unsubscribe to the listener?

Answer 1

firebase.auth().onAuthStateChanged opens up a listener, so a good idea is to make a useEffect that has the user as input, and change the user state according to if you are signed in or not. Once you use the sign out method, the onAuthStateChange will trigger. Then you can pass down the user everywhere through props o any global state you like.

 useEffect(() => {
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
         setUser(user)
      } else {
          setUser(null)
      }
  });
   
  }, [user])

I use react-query instead of useEffect, and then I get the user claims, just to give you another example.

 const fetchClaims = async () => {
    setLoading(true);

    const fetchedUser = await auth.onAuthStateChanged((user) => {
      if (user) {
        user.getIdTokenResult().then((idTokenResult) => {
          // console.log(idTokenResult.claims);
          setIsClient(idTokenResult.claims.client);
          setIsMaster(idTokenResult.claims.master);
          setNickName(idTokenResult.claims.name);
          setUserEmail(idTokenResult.claims.email);
          setClientName(idTokenResult.claims.clientName);
          setIsPremium(idTokenResult.claims.premium);
          setUserPicture(idTokenResult.claims.picture);
        });
        setUser(user);
        setLoading(false);
      } else {
        setUser(null);
        setIsClient(false);
        setIsMaster(false);
        setClientName(null);
        setUserEmail(null);
        setLoading(false);
        setIsPremium(false);
      }
    });
    return fetchedUser;
  };




  useQuery("fetchClaimsData", fetchClaims );