Check on GitHub
Report an issue

Auth flow

📡 What you will learn

  • Add an authentication flow.
  • Render differents navigators.

👨‍🚀 Exercise 3

  • Add an authentication flow to your application.

The App function should return the NavigationContainer component, and the isSignedIn state variable should determine which navigator is rendered, either the RootNavigator or the AuthNavigator.

Example:

function App() {
  const [isSignedIn, setIsSignedIn] = useState(false);

  return (
    <NavigationContainer>
      {isSignedIn ? <RootNavigator /> : <AuthNavigator />}
    </NavigationContainer>
  );
}

The button to sign in should be in the AuthScreen component, and the button to sign out should be in the HomeScreen component.

It should look like this:

<Button title="Sign in" onPress={() => setIsSignedIn(!isSignedIn)} />

You can read the documentation https://reactnavigation.org/docs/auth-flow.

🔭 Hint: For now you can emulate the token with a simple useState.

👽 Bonus