Redirecting Based on Auth and User Settings in React Native Expo with Firebase

[SKempin]

I'm building a React Native app with Expo and Firebase (React Native Firebase library). At the top level of my app, I have an AuthProvider to handle user authentication, and beneath that, a UserSettingsProvider that fetches user data and provides the user's settings.

My goal is to ensure that when a user logs in, they are redirected smoothly, either to the onboarding screen (if a specific user setting value does not exist) or directly to the home screen if it does. Currently, when a user logs in, they are redirected to the /(tabs)/(index) screen by the AuthProvider. After that, the UserSettingsProvider loads, which may redirect the user again to the onboarding screen if they have not yet completed onboarding (e.g., if userSettings.firstName does not exist). This sequence causes a flash effect since the user briefly sees the main home screen before being redirected again.

// app/_layout.tsx

<ErrorBoundary fallback={CenteredTextView()} onError={() => logError}>
  <ApplicationProvider {...eva} theme={{ ...theme }}>
    <ThemeProvider value={colorScheme === 'dark' ? MFDarkTheme : MFLightTheme}>
      <AuthProvider>
        <UserSettingsProvider>
          <FirestoreProvider>
            <Stack>
              <Stack.Screen name="(auth)" options={{ headerShown: false }} />
              <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
              <Stack.Screen name="modal" options={{ presentation: 'modal' }} />
              <Stack.Screen name="(onboarding)" options={{ headerShown: false }} />
            </Stack>
          </FirestoreProvider>
        </UserSettingsProvider>
      </AuthProvider>
    </ThemeProvider>
  </ApplicationProvider>
</ErrorBoundary>

In the AuthProvider, I’m checking if the user is authenticated and, if so, redirecting to the /(tabs)/(index). But in the UserSettingsProvider, I need to validate whether a specific setting exists (e.g., userSettings.firstName). If it doesn't, the app should instead redirect to the onboarding screen.

Here’s a snippet from context/auth.tsx:

useEffect(() => {
    if (!navigationState?.key) return;

    const inAuthGroup = segments[0] === '(auth)'; // detect if in auth stack

    if (!user?.uid && !inAuthGroup) {
      router.replace('/(auth)/login');
    } else if (user?.uid && inAuthGroup) {
      router.replace('/(tabs)/(index)');
    }
  }, [user?.uid, segments, navigationState]);

And a snippet from context/userSettings.tsx where the user is redirected to onboarding if their firstName does not exist in Firestore:

useEffect(() => {
    if (!settingsLoading && !userSettings.firstName) {
      router.replace('/(onboarding)');
    }

  }, [settingsLoading, userSettings]);

What’s the best way to structure my app to ensure that navigation only occurs after both authentication and user settings have fully loaded? How can I handle app-wide navigation more effectively to prevent the flash, and how can I tackle the issue of redirecting users to the onboarding screen if a specific value doesn't exist in Firestore?

[mikehardy]

I suspect stackoverflow or the navigation library may be a better place for this - it seems pretty project-specific and while you are using two firebase modules (auth, and firestore) where you need to coordinate data loading to achieve your navigation, it could be any two different systems where network access was required and you needed data from both to successfully route

To me, that is a generic navigation issue, not firebase-specific, so I'd start with navigation library for support