How to Use Tokens in a React Native Router for Authentication

Introduction

Tokens are commonly used in React Native applications to manage user authentication. This documentation explains how to use tokens within a router to control navigation based on the user's authentication status.

Prerequisites

Before implementing token-based authentication, ensure you have the following dependencies:

React Native React Navigation (for routing) SecureStore (for storing tokens securely)

Implementation

Initialize Authentication State:

To begin, create a state variable isAuth using the useState hook to manage the user's authentication status.

const [isAuth, setIsAuth] = useState<boolean | null>(null);

Check Token on Component Mount:

Use the useEffect hook to check for the presence of a token when the component mounts. Adjust the logic to fit your authentication mechanism.

useEffect(() => {
    SecureStore.getItemAsync("token").then((token) => {
        if (token) {
            setIsAuth(true); // User is authenticated
        } else {
            setIsAuth(false); // User is not authenticated
        }
    });
}, []);

Configure Router:

Configure your React Navigation router to conditionally navigate users based on their authentication status. Here's an example using initialRouteName:

<RootStack.Navigator
    screenOptions={{ headerShown: false }}
    initialRouteName={isAuth ? "TabNavigator" : "TabNavigatorUnlogged"}
>
    <RootStack.Screen name="LoginStack" component={LoginStack} />

    <RootStack.Screen name="TabNavigatorUnlogged" component={TabNavigatorUnlogged} />

    <RootStack.Screen name="TabNavigator" component={TabNavigator} />

    <RootStack.Screen name="RateSalesTeamModal" component={RateSalesTeamModal}>
    
</RootStack.Navigator>

In this example, if isAuth is true, the user will be directed to the "TabNavigator" screen (for authenticated users), and if isAuth is false or null, they will be directed to the "TabNavigatorUnlogged" screen (for unauthenticated users).

Conclusion

By implementing token-based authentication within your React Native router, you can effectively control the navigation flow of your application based on the user's authentication status.