Authentication Navigation in React Native

Authentication Navigation means changing the available navigation screens according to the user's authentication state.

A common flow is:

Login
  ↓
Authentication
  ↓
Main Application

When the user logs out, the application can return to the Login screen.

Most applications contain screens that should only be available to authenticated users.

• Home screen
• Profile screen
• Dashboard
• Courses
• Orders
• Settings

Authentication navigation helps organize access to these screens.

An application normally needs to know whether the user is currently authenticated.

isLoggedIn = false

When the user successfully logs in:

isLoggedIn = true

The navigation interface can then change according to this value.

React's useState hook can be used to store a simple authentication state.

import React, {
    useState
} from 'react';

const [isLoggedIn, setIsLoggedIn] =
    useState(false);

Initially, the user is considered logged out.

When the user is not authenticated, the application can display the Login screen.

if (!isLoggedIn) {
    return <LoginScreen />;
}

The user can then enter their credentials and attempt to log in.

When authentication is successful, the application can display the main navigation.

if (isLoggedIn) {
    return <MainApp />;
}

This creates two basic navigation states.

Logged Out → Login
Logged In  → Main App

Start Application
        ↓
Check Authentication
        ↓
   Is User Logged In?
      /        \
    No          Yes
    ↓            ↓
 Login       Main App
    ↓            ↓
Success       Home
    ↓
 Main App

This is one of the most common authentication navigation patterns.

function LoginScreen({
    onLogin
}) {

    return (

        <View>

            <Text>
                Login
            </Text>

            <Button
                title="Login"
                onPress={onLogin}
            />

        </View>

    );

}

The onLogin function can be called when the user successfully completes authentication.

After a successful login, update the authentication state.

setIsLoggedIn(true);

React will re-render the component and display the authenticated navigation.

A logout function can change the authentication state back to false.

function logout() {

    setIsLoggedIn(false);

}

After logout, the application can display the Login screen again.

A common structure is to keep authentication navigation separate from the main application navigation.

Root Navigation
      |
      ├── Auth Stack
      │     ├── Login
      │     └── Register
      │
      └── App Stack
            ├── Home
            ├── Courses
            └── Profile

function AuthStack() {

    return (

        <Stack.Navigator>

            <Stack.Screen
                name="Login"
                component={LoginScreen}
            />

            <Stack.Screen
                name="Register"
                component={RegisterScreen}
            />

        </Stack.Navigator>

    );

}

The Auth Stack can contain screens related to authentication.

function AppStack() {

    return (

        <Stack.Navigator>

            <Stack.Screen
                name="Home"
                component={HomeScreen}
            />

            <Stack.Screen
                name="Profile"
                component={ProfileScreen}
            />

        </Stack.Navigator>

    );

}

The App Stack contains screens available after authentication.

The root component can decide which navigation stack should be displayed.

{isLoggedIn
    ? <AppStack />
    : <AuthStack />
}

This creates a clear separation between authenticated and unauthenticated navigation.

function RootNavigator() {

    const [
        isLoggedIn,
        setIsLoggedIn
    ] = useState(false);

    return (

        <NavigationContainer>

            {isLoggedIn
                ? <AppStack />
                : <AuthStack />
            }

        </NavigationContainer>

    );

}

The root navigator decides which navigation tree should be visible.

The login state is usually controlled by a parent component. The login function can be passed to the Login screen as a prop.

<LoginScreen
    onLogin={() => setIsLoggedIn(true)}
/>

After a successful login, the parent updates the authentication state.

A real login screen commonly uses TextInput components for email, username or password.

<TextInput
    placeholder="Email"
/>

<TextInput
    placeholder="Password"
    secureTextEntry={true}
/>

The entered values can be stored using useState.

function handleLogin() {

    // Authentication logic

    onLogin();

}

In a real application, authentication logic can communicate with a backend API before calling onLogin().

Many mobile applications send login information to a server.

Login Form
    ↓
API Request
    ↓
Server Verification
    ↓
Success / Failure
    ↓
Update Authentication State

The navigation should change only after the application has determined that authentication was successful.

Login requests may take some time. A loading state can prevent multiple login requests.

const [
    loading,
    setLoading
] = useState(false);

When the login request starts:

setLoading(true);

After the request finishes:

setLoading(false);

Instead of allowing unauthenticated users to access protected screens, the application can display the authentication stack until login is complete.

if (!isLoggedIn) {

    return <AuthStack />;

}

return <AppStack />;

This keeps the navigation structure clear.

A logout button can be placed inside the Profile or Settings screen.

<Button
    title="Logout"
    onPress={logout}
/>

The logout function should update the authentication state.

setIsLoggedIn(false);

If an application needs to remember the user's login state after the application is restarted, authentication information can be stored using an appropriate persistent storage solution.

The application can then load that information when it starts and decide which navigation tree to display.

Application Starts
       ↓
Read Stored Auth State
       ↓
Check Authentication
       ↓
Show Auth or App Navigation

After authentication, the main application can contain a more advanced nested navigation structure.

Auth Stack
    |
    └── Login

App Navigation
    |
    └── Drawer
          |
          └── Main Tabs
                |
                ├── Home
                ├── Courses
                └── Profile

This structure is useful for larger applications.

Login
  ↓
Student Verification
  ↓
Student Dashboard
  ↓
Main Navigation
  ├── Home
  ├── Courses
  ├── Assignments
  └── Profile
  ↓
Logout
  ↓
Login

An education application can use this pattern to separate login screens from student application screens.

• Showing protected screens before authentication is complete.
• Changing navigation before the login request succeeds.
• Not handling login failures.
• Allowing repeated login requests.
• Keeping authentication state only in unrelated components.
• Not handling logout correctly.
• Creating unnecessarily complicated navigation trees.
• Forgetting to handle the initial authentication state.

import React, {
    useState
} from 'react';

import {
    View,
    Text,
    Button
} from 'react-native';

import {
    NavigationContainer
} from '@react-navigation/native';

import {
    createNativeStackNavigator
} from '@react-navigation/native-stack';

const Stack =
    createNativeStackNavigator();

function LoginScreen({
    onLogin
}) {

    return (

        <View>

            <Text>
                Login Screen
            </Text>

            <Button
                title="Login"
                onPress={onLogin}
            />

        </View>

    );

}

function HomeScreen({
    onLogout
}) {

    return (

        <View>

            <Text>
                Home Screen
            </Text>

            <Button
                title="Logout"
                onPress={onLogout}
            />

        </View>

    );

}

function AuthStack({
    onLogin
}) {

    return (

        <Stack.Navigator>

            <Stack.Screen
                name="Login"
                options={{
                    headerShown: false
                }}
            >

                {() => (
                    <LoginScreen
                        onLogin={onLogin}
                    />
                )}

            </Stack.Screen>

        </Stack.Navigator>

    );

}

function AppStack({
    onLogout
}) {

    return (

        <Stack.Navigator>

            <Stack.Screen
                name="Home"
                options={{
                    title: "Dashboard"
                }}
            >

                {() => (
                    <HomeScreen
                        onLogout={onLogout}
                    />
                )}

            </Stack.Screen>

        </Stack.Navigator>

    );

}

export default function App() {

    const [
        isLoggedIn,
        setIsLoggedIn
    ] = useState(false);

    return (

        <NavigationContainer>

            {isLoggedIn ? (

                <AppStack
                    onLogout={() =>
                        setIsLoggedIn(false)
                    }
                />

            ) : (

                <AuthStack
                    onLogin={() =>
                        setIsLoggedIn(true)
                    }
                />

            )}

        </NavigationContainer>

    );

}

• Keep authentication and application navigation clearly separated.
• Use a single source of truth for authentication state.
• Show loading feedback while checking authentication.
• Handle failed login attempts properly.
• Provide a clear logout mechanism.
• Do not expose protected screens before authentication is confirmed.
• Keep nested navigation understandable.
• Use persistent storage when the application needs to remember login state.

Start Application
        ↓
Check Authentication State
        ↓
Show Loading if Necessary
        ↓
Is User Authenticated?
       / \
     No   Yes
     ↓     ↓
 Auth     App
 Stack   Stack
  ↓        ↓
Login    Home
  ↓        ↓
Success  Main App
  ↓        ↓
 App     Logout
 Stack     ↓
  ↓       Auth
 Main App  Stack

Authentication Navigation is essential for applications that have both public and private screens. The application should clearly separate authentication screens from authenticated application screens and update navigation when the authentication state changes.