Route Guards for Authentication

Route Guards for Authentication in React

Route guards are mechanisms that restrict access to certain routes in a React application based on specific conditions, such as user authentication or role-based access control. In React, this is commonly done with React Router by redirecting users to a login page or another restricted area if they are not authenticated.

The basic idea is to check the authentication status before rendering a protected route. If the user is authenticated, they can access the route. If not, they will be redirected to a login page or another appropriate route.

---

1. Implementing Route Guards with React Router (v6+)

React Router v6 provides a powerful way to manage navigation with hooks such as useNavigate and useLocation. To implement a route guard, you can use the Navigate component to redirect unauthenticated users to the login page.

Example: Route Guard with useNavigate and Navigate

1. Installation (if React Router is not installed yet):

npm install react-router-dom

2. Creating a Route Guard Component:

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

const ProtectedRoute = ({ children, isAuthenticated }) => {
  if (!isAuthenticated) {
    // Redirect to login page if the user is not authenticated
    return <Navigate to="/login" replace />;
  }

  return children; // Render protected content if the user is authenticated
};

export default ProtectedRoute;

Explanation:

• isAuthenticated: This is a prop that determines if the user is authenticated. You can check this against a global state, local storage, or a context value.
• <Navigate to="/login" />: If the user is not authenticated, they are redirected to the /login route.
• children: If the user is authenticated, the protected content (i.e., the children components) is rendered.

3. Using ProtectedRoute in Your Application:

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import ProtectedRoute from './ProtectedRoute';

const HomePage = () => <h1>Home Page</h1>;
const Dashboard = () => <h1>Dashboard - Protected</h1>;
const LoginPage = () => <h1>Login Page</h1>;

const App = () => {
  const isAuthenticated = false; // Example authentication status

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

export default App;

Explanation:

• <ProtectedRoute>: The Dashboard route is wrapped inside the ProtectedRoute component to enforce authentication.
• isAuthenticated: Set to false here for demonstration purposes, but you should use your actual authentication logic (e.g., checking a token in local storage or a context value).

---

2. Redirecting Unauthenticated Users with useNavigate

You can also use useNavigate to programmatically redirect users within your route guards.

Example: Using useNavigate for Programmatic Redirection

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

const ProtectedRoute = ({ children, isAuthenticated }) => {
  const navigate = useNavigate();

  if (!isAuthenticated) {
    // Navigate to login page if the user is not authenticated
    navigate('/login');
    return null; // Don't render anything else
  }

  return children; // Render protected content if the user is authenticated
};

export default ProtectedRoute;

Explanation:

• useNavigate(): This hook allows you to programmatically navigate to a different route. In this case, if the user is not authenticated, they are redirected to the /login page.
• return null: Nothing is rendered while the user is redirected.

---

3. Handling Role-Based Route Guards

If you need role-based access control (e.g., only admins can access certain routes), you can extend the ProtectedRoute component to check the user’s role in addition to their authentication status.

Example: Role-Based Access Control

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

const ProtectedRoute = ({ children, isAuthenticated, role, requiredRole }) => {
  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }

  if (role !== requiredRole) {
    return <Navigate to="/unauthorized" replace />;
  }

  return children; // Render protected content if authenticated and authorized
};

export default ProtectedRoute;

Using Role-Based Guard in Routes

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import ProtectedRoute from './ProtectedRoute';

const AdminPage = () => <h1>Admin Page</h1>;
const UnauthorizedPage = () => <h1>Unauthorized Access</h1>;

const App = () => {
  const isAuthenticated = true; // Assume authenticated user
  const role = 'user'; // Example role (could be 'admin' or 'user')

  return (
    <Router>
      <Routes>
        <Route
          path="/admin"
          element={
            <ProtectedRoute
              isAuthenticated={isAuthenticated}
              role={role}
              requiredRole="admin"
            >
              <AdminPage />
            </ProtectedRoute>
          }
        />
        <Route path="/unauthorized" element={<UnauthorizedPage />} />
      </Routes>
    </Router>
  );
};

export default App;

Explanation:

• Role Check: The ProtectedRoute now takes a role prop and a requiredRole prop to enforce role-based access.
• Unauthorized Redirect: If the user does not have the required role (in this case, 'admin'), they are redirected to the /unauthorized page.

---

4. Handling Redirects After Login

Often, you may want to redirect the user back to the page they were trying to access after they successfully log in. You can store the attempted route in the location state and navigate to it after login.

Example: Redirecting After Login

1. LoginPage Component:

import React, { useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';

const LoginPage = () => {
  const [username, setUsername] = useState('');
  const location = useLocation();
  const navigate = useNavigate();

  const handleSubmit = (e) => {
    e.preventDefault();
    // Assume authentication is successful
    const redirectTo = location.state?.from || '/dashboard';
    navigate(redirectTo);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
        placeholder="Enter your username"
      />
      <button type="submit">Login</button>
    </form>
  );
};

export default LoginPage;

2. ProtectedRoute with Redirect Location:

import React from 'react';
import { Navigate, useLocation } from 'react-router-dom';

const ProtectedRoute = ({ children, isAuthenticated }) => {
  const location = useLocation();

  if (!isAuthenticated) {
    // Save the location the user tried to access
    return <Navigate to="/login" state={{ from: location }} replace />;
  }

  return children;
};

export default ProtectedRoute;

Explanation:

• Location State: When an unauthenticated user tries to access a protected route, the current location (the route they wanted to access) is saved in the state and passed to the /login page.
• Redirect After Login: After the user logs in successfully, they are redirected to the route they were originally trying to access (location.state?.from).

---