Implementing Authentication Flow with React Navigation in React Native

re's how to implement an AuthContext provider in React Native, and conditionally render stack screens based on authentication status (isSignedIn). This includes full code, file structure, and setup.

✅ 1. File Structure

/your-app
│
├── App.js
├── /context
│   └── AuthContext.js
├── /navigation
│   └── AppNavigator.js
├── /screens
│   ├── HomeScreen.js
│   ├── ProfileScreen.js
│   ├── HelpScreen.js
│   ├── SignInScreen.js
│   └── SignUpScreen.js

✅ 2. AuthContext.js (Context Setup)

import React, { createContext, useState, useEffect } from 'react';

export const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [isSignedIn, setIsSignedIn] = useState(false);

  // Mock effect to simulate user sign in status
  useEffect(() => {
    // Replace with real auth logic
    const checkAuthStatus = async () => {
      const user = await fakeAuthCheck();
      setIsSignedIn(user);
    };
    checkAuthStatus();
  }, []);

  const signIn = () => setIsSignedIn(true);
  const signOut = () => setIsSignedIn(false);

  return (
    <AuthContext.Provider value={{ isSignedIn, signIn, signOut }}>
      {children}
    </AuthContext.Provider>
  );
};

const fakeAuthCheck = () =>
  new Promise((resolve) => setTimeout(() => resolve(false), 1000));

✅ 3. AppNavigator.js (Stack + Conditional Auth Flow)

// /navigation/AppNavigator.js
import React, { useContext } from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { NavigationContainer } from '@react-navigation/native';

import HomeScreen from '../screens/HomeScreen';
import ProfileScreen from '../screens/ProfileScreen';
import HelpScreen from '../screens/HelpScreen';
import SignInScreen from '../screens/SignInScreen';
import SignUpScreen from '../screens/SignUpScreen';

import { AuthContext } from '../context/AuthContext';

const Stack = createNativeStackNavigator();

const AppNavigator = () => {
  const { isSignedIn } = useContext(AuthContext);

  return (
    <NavigationContainer>
      <Stack.Navigator>
        {isSignedIn ? (
          <>
            <Stack.Screen name="Home" component={HomeScreen} />
            <Stack.Screen name="Profile" component={ProfileScreen} />
            <Stack.Screen name="Help" component={HelpScreen} />
          </>
        ) : (
          <>
            <Stack.Screen name="SignIn" component={SignInScreen} />
            <Stack.Screen name="SignUp" component={SignUpScreen} />
            <Stack.Screen name="Help" component={HelpScreen} />
          </>
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default AppNavigator;

✅ 4. App.js (Wrap with Provider)

import React from 'react';
import { AuthProvider } from './context/AuthContext';
import AppNavigator from './navigation/AppNavigator';

export default function App() {
  return (
    <AuthProvider>
      <AppNavigator />
    </AuthProvider>
  );
}

✅ 5. Example SignInScreen (Triggering Auth State)

// /screens/SignInScreen.js
import React, { useContext } from 'react';
import { View, Text, Button } from 'react-native';
import { AuthContext } from '../context/AuthContext';

const SignInScreen = () => {
  const { signIn } = useContext(AuthContext);

  return (
    <View>
      <Text>Sign In Screen</Text>
      <Button title="Sign In" onPress={signIn} />
    </View>
  );
};

export default SignInScreen;

Debug School

Implementing Authentication Flow with React Navigation in React Native

Top comments (0)