What is the recommended way to implement a conditional authentication flow?

Short answer

Conditionally render the Auth screens or Main App screens inside the same Navigator based on the user's authenticated state, instead of navigating manually with navigate.

Explanation

The official React Navigation documentation recommends not manually calling navigation.navigate("Home") after sign-in. Instead, use a variable representing authentication state (isLoggedIn). When it changes from false to true, the router automatically removes the login screens from the stack and shows the main app screens, preventing the user from pressing Back to return to the login screen.

Code example

function AppNavigator({ userToken }: { userToken: string | null }) {
  return (
    <Stack.Navigator>
      {userToken == null ? (
        // Unauthenticated user routes:
        <Stack.Screen name="SignIn" component={SignInScreen} />
      ) : (
        // Authenticated user routes:
        <>
          <Stack.Screen name="Dashboard" component={DashboardScreen} />
          <Stack.Screen name="Settings" component={SettingsScreen} />
        </>
      )}
    </Stack.Navigator>
  );
}

Common mistakes

• Manually using navigation.replace or Reset after sign-in, making the code fragile and complex compared with explicit conditional rendering.

Follow-up questions

• How do you manage professional startup screens and Splash Screens with expo-splash-screen?
• What is the key difference between Native Stack Navigator and Stack Navigator in React Navigation?

Sources

• React Navigation docs — Authentication flows