Protected Routes
Relevant source files
The following files were used as context for generating this wiki page:
Protected routes are a security and user-experience mechanism designed to restrict access to specific parts of the application to authenticated users only. In this project, these routes ensure that features like publishing products, viewing personal products, or managing messages are not accessible to anonymous visitors.
The system relies on a higher-order component that wraps sensitive route elements, checking the global authentication state before allowing the component to render. If a user is not authenticated, they are automatically redirected to the login interface.
Sources: Front/src/components/ProtectedRoute.jsx:1-15, Front/src/routes/appRoutes.jsx:45-75
Architecture and Components
The protection mechanism is integrated into the routing layer of the application using react-router-dom.
ProtectedRoute Component
The ProtectedRoute component acts as a gatekeeper. It consumes the AuthContext to determine if a user object exists. If the user is null, it uses the <Navigate /> component to force a redirect to the /login path.
const ProtectedRoute = ({ children }) => {
const { user } = useAuth();
if (!user) {
return <Navigate to="/login" />;
}
return children;
};
Sources: Front/src/components/ProtectedRoute.jsx:5-15
Route Configuration
Routes are defined within AppRoutes.jsx. Public routes (Home, Login, Register) are defined normally, while restricted routes are wrapped within the <ProtectedRoute> component.
| Route Path | Component | Protected |
|---|---|---|
/ | Home | No |
/login | Login | No |
/register | Register | No |
/publish | PublishProduct | Yes |
/my-products | MyProducts | Yes |
/profile | Profile | Yes |
/messages | Messages | Yes |
Sources: Front/src/routes/appRoutes.jsx:45-78
Data and Logic Flow
The following diagram illustrates the logic flow when a user attempts to access a protected URL.
The application checks the presence of a user object in the global state. This state is managed by the AuthProvider which wraps the entire application, ensuring the authentication status is available to the routing logic.
Sources: Front/src/App.js:10-18, Front/src/components/ProtectedRoute.jsx:6-12
Navigation and Interaction Logic
Authentication state also affects UI elements and interactive logic within components. For instance, the Navbar conditionally renders links based on whether a user is logged in.
Manual Redirection Logic
In addition to the ProtectedRoute component, certain page-level components implement manual checks for actions that require authentication. For example, in the ProductDetail page, the "Contact Seller" action triggers a check:
const handleContactSeller = () => {
if (!user) {
navigate('/login');
return;
}
// ... proceed to contact logic
};
Sources: Front/src/pages/productDetail.jsx:17-21
Context Integration
The authentication state is provided to the protected routes via the AuthProvider. This provider is located at the root of the component tree, ensuring that any routing changes can immediately react to login or logout events.
Conclusion
The "Protected Routes" feature provides a centralized and reusable method for securing the application's internal pages. By leveraging React Context and the ProtectedRoute wrapper, the system ensures that sensitive user operations—such as managing products or private messaging—remain exclusive to authenticated users, maintaining the integrity of the university marketplace.