Skip to main content

Exercise: Protected Routes with Authentication

Objective​

Implement a complete authentication flow with protected routes.

Requirements​

1. Auth Context​

interface AuthContext {
  user: User | null;
  login: (email: string, password: string) => Promise<void>;
  logout: () => void;
  register: (data: RegisterData) => Promise<void>;
  loading: boolean;
}

2. Routes​

  • /login - Login page
  • /register - Registration page
  • /dashboard - Protected dashboard
  • /profile - Protected profile
  • /settings - Protected settings

3. Protected Route Component​

<Route
  path='/dashboard'
  element={
    <ProtectedRoute>
      <Dashboard />
    </ProtectedRoute>
  }
/>

4. Features​

  • JWT token storage
  • Auto-redirect on auth change
  • Remember me functionality
  • Password reset flow
  • Role-based access

Time Estimate​

2-3 hours