In many React applications, you will have certain pages or routes that should only be accessible to authenticated users. This is known as route protection. The main goal of route protection is to prevent unauthorized users from viewing sensitive content or performing actions that require authentication. Without proper route protection, anyone could navigate to any route in your app, even if they are not logged in. This could expose user data or allow unwanted access to restricted features. By protecting private routes, you ensure that only users with a valid session can access specific parts of your application, improving both security and user experience.

To implement route protection in a React app using Auth0, you can create a PrivateRoute component. This component will check the user's authentication status before rendering the requested route. If the user is authenticated, the component will render the desired content. If not, it can redirect the user to the login page or display a message.

Here is a simple example of a PrivateRoute component using the useAuth0 hook:

import React, { useEffect } from "react";
import { Routes, Route, useLocation } from "react-router-dom";
import { useAuth0 } from "@auth0/auth0-react";

function PrivateRoute({ children }) {
  const { isAuthenticated, isLoading, loginWithRedirect } = useAuth0();
  const location = useLocation();

  useEffect(() => {
    if (!isLoading && !isAuthenticated) {
      loginWithRedirect({
        appState: { returnTo: location.pathname },
      });
    }
  }, [isLoading, isAuthenticated, loginWithRedirect, location]);

  if (isLoading || !isAuthenticated) {
    return <div>Loading...</div>;
  }

  return children;
}

function Dashboard() {
  return <h2>Dashboard</h2>;
}

export default function AppRoutes() {
  return (
    <Routes>
      <Route
        path="/dashboard"
        element={
          <PrivateRoute>
            <Dashboard />
          </PrivateRoute>
        }
      />
    </Routes>
  );
}

In this example, the PrivateRoute component first checks if the authentication state is still loading. If so, it displays a loading message. Once loading is complete, it checks if the user is authenticated. If the user is authenticated, the protected route is rendered. If not, the user is redirected to the login page. By using this pattern, you can easily wrap any route you want to protect and ensure only authenticated users have access.