如何防止登录用户看到登录页面

Question

So I have a React Native app that I'm working on, and this is my authentication flow:

const Stack = createStackNavigator();

const MainContainer = () => {
  const { currentUser } = useAuth();

  if (currentUser) {
    return <HamburgerStack />;
  } else {
    return (
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="Register" component={RegisterScreen} />
        <Stack.Screen name="ForgotPassword" component={ForgotPasswordScreen} />
      </Stack.Navigator>
    );
  }
};

export default MainContainer;

I'm using firebase for authentication and currentUser is a Context hook.

When I get into the app and I'm already logged in there is one moment that the authentication pages are shown, probably because firebase is looking for the user's info on the device.

I cannot think of how to prevent the user to see them. Any tips?

Thank :)

Answer 1

What I did is created a separate stack for the dashboard, authentication, admin, and a splash screen (dummy) and wrapped all of them in a single stack.

MainStack.js

import React, { useEffect } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { StatusBar, View } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';

import AuthStack from './AuthStack';
import UserStack from './UserStack';
import AdminStack from './AdminStack';

import colors from '../constants/colors';
import Splash from '../screens/Splash';



export default function MainStack() {

    const Stack = createStackNavigator();

    return (
        <SafeAreaProvider>
            <NavigationContainer>

                <View>
                    <StatusBar backgroundColor={colors.DarkGrey} />
                </View>

                <Stack.Navigator initialRouteName='Splash' screenOptions={{ animationEnabled: false }}>
                    
                    <Stack.Screen name="Splash" component={Splash} options={{ headerShown: false }} />
                    <Stack.Screen name="AuthStack" component={AuthStack} options={{ headerShown: false }} />
                    <Stack.Screen name="UserStack" component={UserStack} options={{ headerShown: false }} />
                    <Stack.Screen name="AdminStack" component={AdminStack} options={{ headerShown: false }} />

                </Stack.Navigator>

            </NavigationContainer>
        </SafeAreaProvider>

    );
};

AuthStack.js

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import Login from '../screens/AuthScreens/Login';
import Signup from '../screens/AuthScreens/Signup';

export default function AuthStack() {

    const Stack = createStackNavigator();

    return (

        <Stack.Navigator initialRouteName='Login' screenOptions={{ animationEnabled: false }}>
            <Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
            <Stack.Screen name="Signup" component={Signup} options={{ headerShown: false }} />
        </Stack.Navigator>

    );
};

UserStack.js (Dashboard)

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import TabNavigator from './TabNavigator/Index';
import EditProfile from '../screens/UserScreens/EditProfile';
import CarDetails from '../screens/UserScreens/CarDetails';
import Checkout from '../screens/UserScreens/Checkout';
import SelectCar from '../screens/UserScreens/SelectCar';
import BookingDetails from '../screens/UserScreens/BookingDetails';

export default function UserStack() {

    const Stack = createStackNavigator();

    return (

        <Stack.Navigator initialRouteName='TabNavigator' screenOptions={{ animationEnabled: false }}>

            <Stack.Screen name="TabNavigator" component={TabNavigator} options={{ headerShown: false }} />
            <Stack.Screen name="EditProfile" component={EditProfile} options={{ headerShown: false }} />
            <Stack.Screen name="SelectCar" component={SelectCar} options={{ headerShown: false }} />
            <Stack.Screen name="CarDetails" component={CarDetails} options={{ headerShown: false }} />
            <Stack.Screen name="Checkout" component={Checkout} options={{ headerShown: false }} />
            <Stack.Screen name="BookingDetails" component={BookingDetails} options={{ headerShown: false }} />
        </Stack.Navigator>

    );
};

Splash.js (It's a screen with no UI)

in this, I had to get data from the database so it's like that you can directly check for user and navigate

import React, { useEffect } from "react";
import { firebase } from "@react-native-firebase/auth"
import database from '@react-native-firebase/database';
import SplashScreen from 'react-native-splash-screen'

export default function Splash({ navigation }) {

    useEffect(() => {
        let user = firebase.auth().currentUser;
        // console.log('currentUser: ',user);
        if (user) {
            database()
                .ref('/Users/' + user.uid)
                .once('value')
                .then(snapshot => {
                    let Data = snapshot.val();
                    // console.log(Data);
                    if (Data.Role == 'ADMIN') {

                        navigation.replace('AdminStack');
                        SplashScreen.hide();

                        console.log("Success:", "Admin Logged In successfully");
                    } else {
                        navigation.replace('UserStack');
                        SplashScreen.hide();

                        console.log("Success:", "User Logged In successfully");
                    }
                })
        } else {
            navigation.replace('AuthStack')
            SplashScreen.hide();

        }
    }, [])
    return null;
}