Structuring an auth flow in React Navigation

WHAT THIS TESTS Whether you understand that React Navigation is declarative: the screens that exist should be a function of auth state, not the result of imperative navigate calls. The interviewer wants to see clean separation between unauthenticated and authenticated experiences.

A GOOD ANSWER COVERS Keep an isSignedIn or token value in context, Redux, or Zustand. Inside a single Stack navigator, conditionally render either the auth screens (Login, SignUp, ForgotPassword) or the app screens (the bottom-tab navigator) based on that value. When the token changes, React Navigation mounts the new group and unmounts the old one, so no manual navigation is needed. Persist the token in secure storage, and show a loading splash while you rehydrate it on cold start to avoid flashing the login screen.

COMMON WRONG ANSWERS Always rendering both stacks and calling navigation.navigate('Home') after login, which leaves the login screen on the back stack. Using navigation.reset everywhere to paper over that. Storing tokens in plain AsyncStorage or component state that is lost on restart. Forgetting the rehydration splash, causing a login flash for already-signed-in users.

LIKELY FOLLOW-UPS How do you handle token refresh and 401 responses globally? Where do you put the logout call so all protected state clears? How do you deep link into a protected screen when the user is not yet signed in?

ONE CONCRETE EXAMPLE In the root component you read token from your store. You return a NavigationContainer wrapping a Stack. If token is null you render Stack.Screen entries for Login and SignUp; otherwise you render a single Stack.Screen whose component is your Tab navigator. On successful login you simply call setToken(value); the conditional re-evaluates and the auth stack disappears. On logout you setToken(null) and clear secure storage, and the user lands back on Login with no protected screens reachable.