How would you implement protected routes that require user authentication?

Implementing protected routes—where access is restricted to authenticated users—is a common requirement in modern web apps to guard sensitive pages or features.

Here’s a general approach and examples for React Router and Angular Router on how to implement protected routes that check if a user is authenticated before allowing access:

🛡️ Conceptual Overview

1. Authentication Check: Before rendering the protected component, check if the user is logged in (e.g., via a token, session, or auth context).

2. Conditional Rendering or Redirection:

   • If authenticated, allow access (render the component).

   • If not, redirect to a login page or show an unauthorized message.

3. Persist Authentication State: Use global state, context, or a service to store auth status.

✅ React Router Example

Step 1: Create a ProtectedRoute component

import { Navigate } from 'react-router-dom';

function ProtectedRoute({ isAuthenticated, children }) {
  if (!isAuthenticated) {
    // Redirect to login if not authenticated
    return <Navigate to="/login" replace />;
  }
  // Render the protected component if authenticated
  return children;
}

Step 2: Use ProtectedRoute in your routing setup

import { Routes, Route } from 'react-router-dom';

function App() {
  const isAuthenticated = /* get from context or state, e.g. */ true;

  return (
    <Routes>
      <Route path="/login" element={<LoginPage />} />
      <Route
        path="/dashboard"
        element={
          <ProtectedRoute isAuthenticated={isAuthenticated}>
            <Dashboard />
          </ProtectedRoute>
        }
      />
    </Routes>
  );
}

✅ Angular Router Example

Step 1: Create an Auth Guard

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service'; // your auth logic

@Injectable({
  providedIn: 'root',
})
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(): boolean {
    if (this.authService.isLoggedIn()) {
      return true; // Allow access
    } else {
      this.router.navigate(['/login']); // Redirect if not authenticated
      return false;
    }
  }
}

Step 2: Apply the guard to routes

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [AuthGuard],
  },
];

🧠 Key Points

• Centralize auth state: Use context (React) or services (Angular) to hold auth info.

• Redirects: Always redirect unauthenticated users to login or an error page.

• Flexible guards: You can extend auth guards to check roles or permissions.

• Persist auth: Use cookies, localStorage, or secure tokens to persist sessions.