Question 200622 in React native Question posted in
The official React Native documentation can be found here.

Navigation no working on User Authentication with React Native (Expo)

I’m new to React Native and I’m starting with Expo.

I’m using "Firebase Auth" service and I’m able to create users.

The problem is with the navigation after creating an account or login:

  • Despite having a successful login and account creation the app keeps the user in the signup / login screens when it’s expected to bring the user to the "homeScreen"
  • I believe it might be an issue with the User state change because when I refresh the app after creating the user or doing the login, then the app takes the user to HomeScreen, but I don’t know were to fix the behaviour in the code.

This is my useEffect function (to update the user state) and Navigation container in App.js

  // Perform authentication check on app startup 
  useEffect(() => {    
    setIsLoading(true);
    console.log("App.js - Calling performAuthenticationCheck()");
    performAuthenticationCheck()
      .then((user) => {
        setUser(user);
        setIsLoading(false);
        console.log("App.js - SetUser Email is: ", user.email);       
        navigation.navigate('Home');

      })
      .catch((error) => {
        console.log('Authentication Check Error: ', error);
        setIsLoading(false);
      });
  }, []);

.....

return (
  <NavigationContainer>
    <StatusBar style="auto" />
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      {user ? (
        <Stack.Group screenOptions={{ headerShown: false }}>
          <Stack.Screen name="Home" component={HomeScreen}/>
          <Stack.Screen name="Profile" component={ProfileScreen} />
          <Stack.Screen name="AppTabs" component={AppTabs} />
        </Stack.Group>
      ) : (
        <Stack.Group screenOptions={{ headerShown: false }}>
          <Stack.Screen name="Login" component={LoginScreen} />
          <Stack.Screen name="Signup" component={EmailSignupScreen} />
        </Stack.Group>
      )}
    </Stack.Navigator>
  </NavigationContainer>
);

This is how I handle the login from the LoginScreen

  const handleLogin = () => {
    signInWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        // Login successful, do something with the userCredential
        const user = userCredential.user;
        console.log('LoginScreen - User Credentials received: ', userCredential.user.email);      
        setUser(user);                
                       
      })
      .catch((error) => {
        // Log the error
        console.log('Firebase Login Error: ', error);
        // Set the error state for display
        setError(error.message);
      });
  };

The setUer is supposed to update the user state so the navigation routes to HomeScreen, but it’s not executing it as expected.

I’m expecting for the app to navigate to HOmeScreen upon having a successful login or signup.

Where is the mistake?

Tags:

2

Answers


  1. 0

    In the official documentation, it says

    Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:

    So why don’t we use it?

    const LoginScreen = ({navigation}) => {
  //..
  const handleLogin = () => {
      signInWithEmailAndPassword(auth, email, password)
        .then((userCredential) => {
          // Login successful, do something with the userCredential
          //..             
          navigation.navigate('Home')
          //..
        })
        .catch((error) => {
          // Log the error
          //..
        })
  }
  //..
  return (
    <>
      //..
      <Button
        title="Log In"
        onPress={() =>
          handleLogin()
        }
      />
    </>
  )
}
    Login or Signup to reply.
  2. 0

    App.js and login.js are different pages and manage states themselves. You can pass state from a page to components via props, but not between pages

    What you need here is very clearly global state. You should look for solutions like redux, zustand.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search