Route Guards and Private Routes

🔐 What Are Route Guards and Private Routes?

In React apps, private routes (or route guards) are used to restrict access to specific pages unless certain conditions are met — usually authentication. For example, you don’t want users accessing a dashboard if they’re not logged in. This is where route guarding comes into play. 🚫✅

⚙️ What You Need

To implement protected routes, you typically need:

• 🔑 An authentication state (e.g. isAuthenticated)
• 🔁 React Router v6+ installed
• 🔁 A wrapper component to check access

🧱 Setting Up a PrivateRoute Wrapper

This component will check if the user is authenticated and either allow access or redirect them to the login page.

// PrivateRoute.js
import { Navigate } from 'react-router-dom';

function PrivateRoute({ isAuthenticated, children }) {
  return isAuthenticated ? children : <Navigate to="/login" replace />;
}

export default PrivateRoute;

📌 Using PrivateRoute in Routes

// App.js
import { Routes, Route } from 'react-router-dom';
import PrivateRoute from './PrivateRoute';
import Dashboard from './pages/Dashboard';
import Login from './pages/Login';

const isLoggedIn = true; // Replace with real auth logic

function App() {
  return (
    <Routes>
      <Route path="/login" element={<Login />} />
      <Route
        path="/dashboard"
        element={
          <PrivateRoute isAuthenticated={isLoggedIn}>
            <Dashboard />
          </PrivateRoute>
        }
      />
    </Routes>
  );
}

🔁 Redirect After Login

Once the user logs in, you may want to redirect them to the dashboard. Use useNavigate():

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

function LoginForm() {
  const navigate = useNavigate();

  const handleLogin = () => {
    // validate and log in
    navigate('/dashboard');
  };

  return <button onClick={handleLogin}>Login</button>;
}

🔄 Keeping Auth State in Context

To avoid prop drilling, store the authentication state in a global context:

// AuthContext.js
import { createContext, useContext, useState } from 'react';

const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const login = () => setIsAuthenticated(true);
  const logout = () => setIsAuthenticated(false);

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

export const useAuth = () => useContext(AuthContext);

Then wrap your entire app with <AuthProvider> in main.jsx or index.js.

🔒 Protecting Multiple Routes

You can protect multiple routes by wrapping them similarly:

<Route path="/profile" element={
  <PrivateRoute isAuthenticated={isLoggedIn}>
    <Profile />
  </PrivateRoute>
} />

📋 Summary

• ✅ Use route guards to protect sensitive pages
• ✅ Create a PrivateRoute wrapper to check auth
• ✅ Redirect unauthenticated users using <Navigate />
• ✅ Store auth status globally via Context API
• ✅ Use useNavigate() for manual redirects

🚀 Final Thoughts

Route guards and private routes are essential for creating secure, user-friendly React apps. Whether you’re building an admin dashboard, user profile system, or premium feature area, protecting routes ensures only the right people see the right content. 🔐⚛️