React Authentication Flows

Edit PagePage History

Overview

Whenever you log in to a website, you're using authentication. This is a critical aspect of web applications, ensuring that users can securely access their data and that protected resources remain secure. However, most of us only know authentication as the username and password login form:

However, how does authentication actually work? This guide covers implementing secure authentication patterns in React applications.

This guide covers:

• User authentication flows (login/logout)
• Protecting routes from unauthorized access
• Managing authentication tokens
• Handling user sessions
• Implementing role-based access control (RBAC)

Authentication vs. Authorization

Often "Auth" is used interchangeably with "Authorization", but they are actually quite different. Understanding the difference between authentication and authorization is crucial for implementing secure applications. Let's explain this using a hotel key card system.

1 - Authentication (Who are you?)

Authentication is like checking in at the hotel front desk:

• You prove your identity (passport/ID)
• The front desk verifies your reservation
• They issue you a key card, since they have "authenticated" you are who you say you are, and you have a valid reservation.

In web applications:

// Authentication example
async function loginUser(credentials) {
  try {
    // Send credentials to verify identity
    const response = await fetch('/api/login', {
      method: 'POST',
      body: JSON.stringify(credentials)
    });

    if (!response.ok) {
      throw new Error('Invalid credentials');
    }

    // Receive "key card" (JWT token)
    const { token, user } = await response.json();
    
    // Store the "key card" for future use
    localStorage.setItem('token', token);
    
    return user;
  } catch (error) {
    console.error('Authentication failed:', error);
    throw error;
  }
}

Authorization (What can you access?)

Authorization is like using your key card at different doors:

• Your key card works only for your room
• It might also work for the gym during certain hours
• It won't work for other guests' rooms or staff areas

Notice that in the Authorization example above, we don't need to re-authenticate your identity nor your registration. Your key card is proof that you are who you say you are, and you have a valid reservation! This is the same way that we can use JWT tokens (or sessions, cookies, etc.) to authenticate users in web applications.

In web applications:

// Authorization example
function RoomAccess({ roomNumber, children }) {
  const { user, keyCard } = useAuth();
  
  // Check if user has access to this specific "room"
  const canAccessRoom = useCallback(() => {
    if (!user || !keyCard) return false;

    // Check if key card is valid for this room
    return user.assignedRooms.includes(roomNumber);
  }, [user, keyCard, roomNumber]);

  // If no access, show "wrong room" message
  if (!canAccessRoom()) {
    return <div>Access Denied: Wrong Room</div>;
  }

  return children;
}

// Usage example
function HotelApp() {
  return (
    <div>
      {/* Public area - no key card needed */}
      <Lobby />

      {/* Need valid key card */}
      <RoomAccess roomNumber="101">
        <GuestRoom />
      </RoomAccess>

      {/* Need staff key card */}
      <RoomAccess roomNumber="STAFF_ONLY">
        <ServiceArea />
      </RoomAccess>
    </div>
  );
}

Key Differences

Aspect	Authentication	Authorization
Purpose	Verifies identity	Determines access rights
Timing	Happens first	Happens after authentication
Question	"Who are you?"	"Can you access this?"
Hotel Analogy	Checking in at front desk	Using key card at room door
Implementation	Login forms, JWT tokens	Role checks, permission gates

🎥 Video: Authentication vs Authorization

Authentication Flow

Here's a visual representation of a basic authentication flow:

1. User Authentication

Login Flow Implementation

Here's a basic implementation of a login form with authentication state management:

import { useState, createContext, useContext } from 'react';

// Create authentication context
const AuthContext = createContext(null);

// Auth Provider component
export function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  // Login function
  const login = async (credentials) => {
    try {
      setLoading(true);
      const response = await fetch('https://api.example.com/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(credentials),
      });

      if (!response.ok) {
        throw new Error('Login failed');
      }

      const data = await response.json();
      
      // Store token in secure storage
      localStorage.setItem('token', data.token);
      
      // Set user data
      setUser(data.user);
      
      return data;
    } catch (error) {
      console.error('Login error:', error);
      throw error;
    } finally {
      setLoading(false);
    }
  };

  // Logout function
  const logout = () => {
    localStorage.removeItem('token');
    setUser(null);
  };

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

// Custom hook for using auth context
export function useAuth() {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth must be used within an AuthProvider');
  }
  return context;
}

// Login component
function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const { login, loading } = useAuth();
  const [error, setError] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      await login({ email, password });
      // Redirect to dashboard or home page
    } catch (err) {
      setError('Invalid credentials');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {error && <div className="error">{error}</div>}
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email"
        required
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password"
        required
      />
      <button type="submit" disabled={loading}>
        {loading ? 'Logging in...' : 'Login'}
      </button>
    </form>
  );
}

🎥 Video: Email Authentication Explained

2. Protected Routes

Once we have an authenticated user, we can implement a ProtectedRoute component to protect routes from unauthorized access. This is a common pattern in React applications to ensure that users are authenticated before they can access protected routes.

import { Navigate, useLocation } from 'react-router-dom';
import { useAuth } from './AuthContext';

function ProtectedRoute({ children, requiredRole = null }) {
  const { user, loading } = useAuth();
  const location = useLocation();

  // Show loading state while checking authentication
  if (loading) {
    return <div>Loading...</div>;
  }

  // Redirect to login if not authenticated
  if (!user) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }

  // Check role-based access if required
  if (requiredRole && user.role !== requiredRole) {
    return <Navigate to="/unauthorized" replace />;
  }

  return children;
}

// Usage in router
function AppRouter() {
  return (
    <Routes>
      <Route path="/login" element={<LoginPage />} />
      <Route path="/public" element={<PublicPage />} />
      <Route
        path="/dashboard"
        element={
          <ProtectedRoute>
            <DashboardPage />
          </ProtectedRoute>
        }
      />
      <Route
        path="/admin"
        element={
          <ProtectedRoute requiredRole="admin">
            <AdminPage />
          </ProtectedRoute>
        }
      />
    </Routes>
  );
}

Protected routes flow:

🎥 Video: Protected Routes in react router version 6

3. Token Management

Once a user logs in, we create and send back a token. The front end is responsible for storing this token in a secure way, and sending it with every request to the API. The API will then validate the token to ensure that the user is authenticated.

// Token management utility
const TokenService = {
  getToken: () => {
    return localStorage.getItem('token');
  },

  setToken: (token) => {
    localStorage.setItem('token', token);
  },

  removeToken: () => {
    localStorage.removeItem('token');
  },

  // Add token to API requests
  getAuthHeader: () => {
    const token = TokenService.getToken();
    return token ? { Authorization: `Bearer ${token}` } : {};
  },

  // Check if token is expired
  isTokenExpired: (token) => {
    try {
      const decoded = JSON.parse(atob(token.split('.')[1]));
      return decoded.exp < Date.now() / 1000;
    } catch (e) {
      return true;
    }
  }
};

// API client with token management
const apiClient = axios.create({
  baseURL: 'https://api.example.com',
});

// Add token to requests
apiClient.interceptors.request.use(
  (config) => {
    const token = TokenService.getToken();
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// Handle token expiration
apiClient.interceptors.response.use(
  (response) => response,
  async (error) => {
    const originalRequest = error.config;

    if (error.response.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;
      
      try {
        // Attempt to refresh token
        const newToken = await refreshToken();
        TokenService.setToken(newToken);
        
        // Retry original request
        return apiClient(originalRequest);
      } catch (refreshError) {
        // Token refresh failed, logout user
        TokenService.removeToken();
        window.location.href = '/login';
        return Promise.reject(refreshError);
      }
    }

    return Promise.reject(error);
  }
);

Token lifecycle:

4. Session Management

Sessions are a way to keep a user logged in after they have logged in. This is typically done through a combination of a token and a refresh token. The refresh token is used to get a new access token when the current access token expires.

function useSession() {
  const { user, setUser } = useAuth();
  const [sessionExpired, setSessionExpired] = useState(false);

  useEffect(() => {
    let sessionCheckInterval;

    const checkSession = async () => {
      try {
        const response = await fetch('/api/check-session', {
          headers: TokenService.getAuthHeader(),
        });

        if (!response.ok) {
          throw new Error('Session invalid');
        }
      } catch (error) {
        setSessionExpired(true);
        setUser(null);
      }
    };

    if (user) {
      // Check session every 5 minutes
      sessionCheckInterval = setInterval(checkSession, 5 * 60 * 1000);
      checkSession();
    }

    return () => {
      if (sessionCheckInterval) {
        clearInterval(sessionCheckInterval);
      }
    };
  }, [user, setUser]);

  return { sessionExpired };
}

Session flow:

5. Role-Based Access Control (RBAC)

Role-based access control (RBAC) is a way to control access to resources based on the roles of the users. This is a common pattern in React applications to ensure that users are authenticated before they can access protected routes.

// Define permission levels
const Permissions = {
  READ: 'read',
  WRITE: 'write',
  ADMIN: 'admin'
};

// Role definitions
const Roles = {
  USER: {
    permissions: [Permissions.READ]
  },
  EDITOR: {
    permissions: [Permissions.READ, Permissions.WRITE]
  },
  ADMIN: {
    permissions: [Permissions.READ, Permissions.WRITE, Permissions.ADMIN]
  }
};

// Permission check hook
function usePermissions() {
  const { user } = useAuth();
  
  const hasPermission = useCallback((permission) => {
    if (!user || !user.role) return false;
    return Roles[user.role].permissions.includes(permission);
  }, [user]);

  return { hasPermission };
}

// Protected component based on permissions
function PermissionGate({ permission, children }) {
  const { hasPermission } = usePermissions();

  if (!hasPermission(permission)) {
    return null;
  }

  return children;
}

// Usage example
function AdminPanel() {
  return (
    <PermissionGate permission={Permissions.ADMIN}>
      <div>Admin Only Content</div>
    </PermissionGate>
  );
}

RBAC flow:

🎥 Video: Who's allowed to do what? RBAC vs ABAC & The Art of Access Control 🎥 Video: Implementing RBAC in React

Best Practices

1. Security

   • Never store sensitive data in localStorage
   • Use HTTPS for all API requests
   • Implement token refresh mechanisms
   • Handle session timeouts gracefully

2. User Experience

   • Show loading states during authentication
   • Provide clear error messages
   • Redirect users to intended destination after login
   • Maintain session state across page refreshes

3. Code Organization

   • Centralize authentication logic
   • Use custom hooks for reusable auth functionality
   • Implement proper error boundaries
   • Follow the principle of least privilege