Protected Routes and Navigation Guards

Some pages in the MERN Blog — creating a post, editing a post, viewing the dashboard — should only be accessible to authenticated users. If an unauthenticated user tries to visit /posts/new they should be redirected to the login page, not shown an error or a blank page. This is a protected route, also called a navigation guard. React Router does not include this feature out of the box — you build it as a wrapper component that checks the auth state and either renders the protected content or redirects. In this lesson you will build a reusable ProtectedRoute component that handles all edge cases correctly, including the loading state while auth status is being verified.

The ProtectedRoute Pattern #

Request: User navigates to /posts/new

ProtectedRoute checks auth state:
  ├── Loading (checking token/session)
  │   └── Show spinner — do not redirect yet (would flash login page)
  ├── Authenticated (user is logged in)
  │   └── Render the protected page (CreatePostPage)
  └── Not authenticated
      └── Redirect to /login
          └── Pass the original URL as state so login can redirect back

Building the ProtectedRoute Component #

// src/components/auth/ProtectedRoute.jsx
import { Navigate, useLocation } from 'react-router-dom';
import { useAuth } from '@/context/AuthContext'; // covered in Chapter 21
import Spinner from '@/components/ui/Spinner';

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

  // While auth state is loading — show spinner, do not redirect yet
  if (loading) {
    return <Spinner message="Checking authentication..." />;
  }

  // Not authenticated — redirect to login with the original URL in state
  if (!user) {
    return (
      <Navigate
        to="/login"
        state={{ from: location.pathname }}
        replace  // replace prevents the /login entry from appearing in history
      />
    );
  }

  // Optional role check — redirect if user lacks required role
  if (requiredRole && user.role !== requiredRole) {
    return <Navigate to="/dashboard" replace />;
  }

  // Authenticated (and has role if required) — render the protected content
  return children;
}

export default ProtectedRoute;

Using ProtectedRoute in App.jsx #

// src/App.jsx
import ProtectedRoute from '@/components/auth/ProtectedRoute';

function App() {
  return (
    <PageLayout>
      <Routes>
        {/* Public routes */}
        <Route path="/"          element={<HomePage />} />
        <Route path="/posts/:id" element={<PostDetailPage />} />
        <Route path="/login"     element={<LoginPage />} />
        <Route path="/register"  element={<RegisterPage />} />

        {/* Protected — any authenticated user */}
        <Route
          path="/dashboard"
          element={
            <ProtectedRoute>
              <DashboardPage />
            </ProtectedRoute>
          }
        />
        <Route
          path="/posts/new"
          element={
            <ProtectedRoute>
              <CreatePostPage />
            </ProtectedRoute>
          }
        />
        <Route
          path="/posts/:id/edit"
          element={
            <ProtectedRoute>
              <EditPostPage />
            </ProtectedRoute>
          }
        />

        {/* Admin-only route */}
        <Route
          path="/admin"
          element={
            <ProtectedRoute requiredRole="admin">
              <AdminPage />
            </ProtectedRoute>
          }
        />

        {/* 404 */}
        <Route path="*" element={<NotFoundPage />} />
      </Routes>
    </PageLayout>
  );
}

Redirect Back After Login #

// src/pages/LoginPage.jsx
import { useNavigate, useLocation } from 'react-router-dom';

function LoginPage() {
  const navigate  = useNavigate();
  const location  = useLocation();
  const { login } = useAuth();

  // Where to go after login — default to /dashboard
  const from = location.state?.from || '/dashboard';

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      await login(formData.email, formData.password);
      // Replace the history entry so the user cannot go "back" to the login page
      navigate(from, { replace: true });
    } catch (err) {
      setError(err.message);
    }
  };

  return (
    <div className="login-page">
      <h1>Log In</h1>
      {location.state?.from && (
        <p className="login-page__notice">
          Please log in to access {location.state.from}
        </p>
      )}
      <form onSubmit={handleSubmit}>...</form>
    </div>
  );
}

Guest-Only Routes — Redirect if Already Logged In #

// Prevent authenticated users from visiting /login or /register
function GuestRoute({ children }) {
  const { user, loading } = useAuth();

  if (loading) return <Spinner />;
  if (user)    return <Navigate to="/dashboard" replace />;
  return children;
}

// Usage
<Route path="/login"    element={<GuestRoute><LoginPage /></GuestRoute>} />
<Route path="/register" element={<GuestRoute><RegisterPage /></GuestRoute>} />

Common Mistakes #

Mistake 1 — Not handling the auth loading state #

❌ Wrong — immediately redirecting before auth is checked:

function ProtectedRoute({ children }) {
  const { user } = useAuth();
  if (!user) return <Navigate to="/login" replace />;
  // If auth is still loading, user is null → always redirects on first load!
  return children;
}

✅ Correct — wait for loading to complete:

function ProtectedRoute({ children }) {
  const { user, loading } = useAuth();
  if (loading) return <Spinner />;    // ✓ wait — do not redirect yet
  if (!user)   return <Navigate to="/login" replace />;
  return children;
}

Mistake 2 — Not using replace on login redirect #

❌ Wrong — login page remains in browser history:

navigate('/dashboard'); // user can press Back and return to login page

✅ Correct — replace the history entry:

navigate('/dashboard', { replace: true }); // ✓ Back button skips login page

Mistake 3 — Relying only on frontend protection for sensitive data #

❌ Wrong — Express API routes with no authentication middleware:

router.delete('/api/posts/:id', deletePost); // no protect middleware!

✅ Correct — every protected API route must verify the JWT server-side:

router.delete('/api/posts/:id', protect, deletePost); // ✓ JWT required

Quick Reference #