Handling deep linking with react navigation v5 authentication flow

Viewed 1296

I want to access an authenticated screen from a deep-link using react navigation v5 with expo. So I followed the authentication flow from react navigation and I ended with a start up navigator like that :

const StartupNavigator = (props: Partial<StackNavigatorProps>): ReactElement => {
    const {startUp} = useStartUp();

    const renderStacks = () => {
        if (startUp.isReady) {
            return <Stack.Screen name={Routes.HOME} component={BottomTabNavigator}/>;
        }
        if (startUp.isLoading) {
            return <Stack.Screen name={Routes.CHECK} component={CheckScreen}/>;
        }
        if (startUp.isBuilding) {
            return <Stack.Screen name={Routes.BUILD} component={BuildScreen}/>;
        }
        if (startUp.isAuthentifying) {
            return <Stack.Screen name={Routes.AUTH} component={AuthNavigator}/>;
        }
    };

    return (
        <Stack.Navigator {...props} headerMode={"none"}>
            {renderStacks()}
        </Stack.Navigator>
    );
};

So I have 4 initial state :

  1. isReady : The user is authenticated, and can access protected screens.
  2. isLoading: First state when opening the app, check the app version..... then set the isAuthentifying state
  3. isAuthentifying: The authentication navigator for registering, and login.
  4. isBuilding: After authentication, fetch the user information, then set the state to isReady

Note, when opening the app, the state is set by default to isLoading

Then, I made an NavigationContainer following this link for handling deep-linking

How to redirect to an authenticated screen passing by the authentication (note that I don't have an auto login process)

0 Answers
Related