Authentication in React Native

# CHAPTER 21

Authentication in React Native #

1. Introduction #

2. Learning Objectives #

• Understand the mechanics of JSON Web Tokens (JWT).

• Architect a global AuthContext.

• Build a Login screen that fetches and saves tokens.

• Conditionally render navigation stacks (Protected Routes).

• Implement an automatic session-restore feature on app launch.

3. The JWT Mechanics #

4. Step 1: The Auth Context #

import React, { createContext, useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

export const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [userToken, setUserToken] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  // 1. On App Launch, check if a token is already on the hard drive!
  useEffect(() => {
    const bootstrapAsync = async () => {
      let token = await AsyncStorage.getItem('userToken');
      if (token) setUserToken(token); // Restore session!
      setIsLoading(false); // Done checking
    };
    bootstrapAsync();
  }, []);

  // 2. The Login Function (Called by the UI)
  const login = async (token) => {
    await AsyncStorage.setItem('userToken', token); // Save to disk
    setUserToken(token); // Save to RAM (Triggers navigation update!)
  };

  // 3. The Logout Function
  const logout = async () => {
    await AsyncStorage.removeItem('userToken');
    setUserToken(null);
  };

  return (
    <AuthContext.Provider value={{ userToken, isLoading, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

5. Step 2: Protected Routes (The Magic Switch) #

• If userToken is null, we return the <AuthStack> (Login, Signup).

• If userToken exists, we return the <MainStack> (Home, Profile).

import React, { useContext } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { AuthContext } from './AuthContext';

function AppNavigator() {
  const { userToken, isLoading } = useContext(AuthContext);

  if (isLoading) {
    return <SplashScreen />; // Show a logo while reading the hard drive
  }

  return (
    <NavigationContainer>
      {/* THE MAGIC SWITCH! */}
      {userToken == null ? (
        // No Token? Show Login Screen. (User CANNOT access the Home screen)
        <Stack.Navigator>
          <Stack.Screen name="Login" component={LoginScreen} />
        </Stack.Navigator>
      ) : (
        // Token exists! Show Main App. (Login screen is completely destroyed)
        <Stack.Navigator>
          <Stack.Screen name="Home" component={HomeScreen} />
        </Stack.Navigator>
      )}
    </NavigationContainer>
  );
}

6. Step 3: The Login Screen #

import React, { useState, useContext } from 'react';
import { View, TextInput, Button } from 'react-native';
import { AuthContext } from './AuthContext';
import axios from 'axios';

export default function LoginScreen() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const { login } = useContext(AuthContext);

  const handleLogin = async () => {
    try {
      // 1. Ask the server to authenticate
      const response = await axios.post('https://api.example.com/login', { email, password });
      
      // 2. Grab the JWT token from the response
      const token = response.data.token;
      
      // 3. Pass it to our Global Context
      login(token); 
      // BOOM! The Context changes 'userToken', triggering the App.js magic switch.
      // The screen will instantly swap to the Home Screen!
    } catch (e) {
      alert("Invalid email or password");
    }
  };

  return (
    <View style={{ padding: 50 }}>
      <TextInput placeholder="Email" onChangeText={setEmail} autoCapitalize="none" />
      <TextInput placeholder="Password" onChangeText={setPassword} secureTextEntry />
      <Button title="Login" onPress={handleLogin} />
    </View>
  );
}

7. Visual Learning: The Authentication Flow #

[ USER LAUNCHES APP ]
         |
[ useEffect reads AsyncStorage ]
      /           \
 (No Token)     (Token found!)
     |               |
 [ Login ]       [ Home ]
     |
(User logs in)
     |
(Context updates token)
     |
(App.js magically switches to [ Home ])

8. Common Mistakes #

• Navigating to Home Manually: Beginners often write navigation.navigate('Home') inside the handleLogin function. DO NOT DO THIS. If you navigate manually, the user can press the physical "Back" button on Android and accidentally go back to the Login screen while authenticated! By conditionally rendering the Stacks (Section 5), the Login stack is physically destroyed from memory when the token is received. It is impossible to "go back" to it.

9. Best Practices #

• Token Expiration: JWT tokens expire (usually after 24 hours). If a user opens the app on day 2, the useEffect will find the token and send them to the HomeScreen, but the first Axios API call they make will return a 401 Unauthorized error. You must use an Axios Response Interceptor (learned in Ch 19) to catch that 401, trigger the logout() context function automatically, and kick them back to the Login screen!

10. Practice Exercises #

1. 1. In a conditionally rendered navigation architecture, what variable dictates whether the <AuthStack> or the <MainStack> is actively drawn on the screen?

1. 2. What asynchronous function is triggered inside the useEffect on app launch to seamlessly log a returning user straight into the dashboard?

11. MCQs with Answers #

12. Interview Questions #

• Q: Explain the paradigm of "Protected Routes" in React Navigation. How is the global AuthContext utilized to enforce this boundary?

• Q: Walk through the complete lifecycle of a JWT authentication flow, starting from the user pressing "Submit" on the Login form, the token caching strategy, and ending with the execution of a secure Axios interceptor on subsequent API requests.

• Q: A returning user launches your app, reads their valid JWT from AsyncStorage, and is successfully routed to the Dashboard. 5 minutes later, their token expires on the backend. Describe the exact error handling architecture required to gracefully eject the user back to the Login screen.

13. FAQs #

14. Summary #

15. Next Chapter Recommendation #