Frontend Routing & Protected Routes

Relevant source files

The following files were used as context for generating this wiki page:

• frontend/src/App.js
• frontend/src/routes/Routes.js
• frontend/src/routes/ProtectedRoute.js
• frontend/src/routes/SellerProtectedRoute.js
• frontend/src/routes/ProtectedAdminRoute.js
• frontend/src/routes/ShopRoutes.js
• frontend/src/routes/AdminRoutes.js

The frontend routing system, built with react-router-dom, is responsible for navigating users through the application and enforcing access control based on user roles. The central configuration in App.js defines all possible paths, from public-facing pages like the homepage and product listings to protected areas for authenticated users, sellers, and administrators. This structure ensures a secure and role-appropriate experience for each type of user.

The system relies on a set of higher-order components (ProtectedRoute, SellerProtectedRoute, ProtectedAdminRoute) that wrap around specific routes. These components check the user's authentication and authorization status, which is managed by Redux, before rendering the requested page. If the access criteria are not met, the user is redirected to an appropriate login page, effectively securing sensitive sections of the application.

Core Routing Architecture

The main application component, App.js, serves as the hub for all frontend routing. It utilizes BrowserRouter, Routes, and Route from react-router-dom to map URL paths to their corresponding React components.

Upon application load, a useEffect hook dispatches several Redux actions to fetch initial state, including user and seller authentication status, as well as product and event data. This initial data load is critical for the protected routes, as they rely on the Redux store to determine access rights.

Sources: frontend/src/App.js:63-69

Route Definitions

Routes are defined within the <Routes> component. The application distinguishes between three main types of routes:

1. Public Routes: Accessible to all visitors (e.g., /, /login, /products).
2. Protected User Routes: Require a standard user to be logged in (e.g., /profile, /checkout).
3. Role-Specific Protected Routes: Require a user with a specific role (Seller or Admin) to be logged in (e.g., /dashboard, /admin/dashboard).

The diagram below illustrates the high-level routing flow within App.js.

Sources: frontend/src/App.js:72-297

Page Component Aggregation

To maintain clean and readable route definitions in App.js, page components are imported from aggregator files. These files, known as "barrel files," export all page components from a single location.

• frontend/src/routes/Routes.js: Exports general user-facing pages.
• frontend/src/routes/ShopRoutes.js: Exports pages related to the seller dashboard.
• frontend/src/routes/AdminRoutes.js: Exports pages for the admin dashboard.

Sources: frontend/src/routes/Routes.js, frontend/src/routes/ShopRoutes.js, frontend/src/routes/AdminRoutes.js

Protected Route Components

The application uses a role-based access control (RBAC) strategy implemented through wrapper components. Each protected route is wrapped by a component that verifies the user's credentials before rendering the page.

Component	Target Role	Redux State Checked	Redirect on Failure
ProtectedRoute	User	user.isAuthenticated	/login
SellerProtectedRoute	Seller	seller.isSeller	/shop-login
ProtectedAdminRoute	Admin	user.isAuthenticated & user.role === 'Admin'	/login

This table summarizes the different types of protected route components and their behavior.
Sources: frontend/src/routes/ProtectedRoute.js, frontend/src/routes/SellerProtectedRoute.js, frontend/src/routes/ProtectedAdminRoute.js

ProtectedRoute (for Authenticated Users)

This component protects routes that require any authenticated user. It checks the isAuthenticated flag from the user slice in the Redux store.

Logic:

1. Retrieves isAuthenticated and loading from the user state.
2. If loading is false:
   • If isAuthenticated is false, it navigates the user to the /login page.
   • If isAuthenticated is true, it renders the child component.

Sources: frontend/src/routes/ProtectedRoute.js:6-15

The following diagram shows the sequence for accessing a user-protected route.

Sources: frontend/src/routes/ProtectedRoute.js:6-15, frontend/src/App.js:120-126

SellerProtectedRoute (for Sellers)

This component is designed specifically for seller-only routes, such as the seller dashboard. It checks the isSeller flag from the seller slice in the Redux store.

Logic:

1. Retrieves isSeller and isLoading from the seller state.
2. If isLoading is true, it returns a <Loader /> component.
3. If isLoading is false:
   • If isSeller is false, it navigates the user to the /shop-login page.
   • If isSeller is true, it renders the child component.

Sources: frontend/src/routes/SellerProtectedRoute.js:6-15

The diagram below illustrates the process for accessing a seller-protected route.

Sources: frontend/src/routes/SellerProtectedRoute.js:6-15, frontend/src/App.js:188-194

ProtectedAdminRoute (for Admins)

This component secures the administrative section of the application. It performs a more stringent check, verifying both authentication status and if the user's role is 'Admin'.

Logic:

1. Retrieves isAuthenticated, loading, and user from the user state.
2. If loading is true, it returns a <Loader />.
3. If loading is false:
   • If isAuthenticated is false OR user.role is not 'Admin', it navigates the user to the /login page.
   • Otherwise, it renders the child component.

Sources: frontend/src/routes/ProtectedAdminRoute.js:6-15

The sequence for accessing an admin route is as follows:

Sources: frontend/src/routes/ProtectedAdminRoute.js:6-15, frontend/src/App.js:256-262

Summary

The frontend routing architecture effectively separates public and private sections of the application. By leveraging react-router-dom and custom protected route components that interface with a Redux-managed state, the system provides robust, role-based access control. This ensures that users, sellers, and administrators can only access the pages and features relevant to their permissions, which is a fundamental security requirement for an e-commerce platform.