Create private route component Issue #230 resolved

client/src/components/PrivateRoute/PrivateRoute.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Navigate, Outlet } from 'react-router-dom';
+
+/**
+ * PrivateRoute Component
+ * Protects routes that require authentication
+ * Redirects to login page if user is not authenticated
+ */
+const PrivateRoute = () => {
+  // Check if user is authenticated
+  // This checks for authentication token in localStorage
+  const isAuthenticated = () => {
+    const token = localStorage.getItem('authToken');
+    return token !== null;
+  };
+
+  // If authenticated, render child routes using Outlet
+  // If not authenticated, redirect to login page
+  return isAuthenticated() ? <Outlet /> : <Navigate to="/login" replace />;
+};
+
+export default PrivateRoute;

client/src/components/PrivateRoute/index.js

@@ -0,0 +1 @@
+export { default } from './PrivateRoute';

client/src/components/Routes.js

@@ -1,7 +1,7 @@
 /**
  *To avoid bloated App.js component, page routes created at this component.
  */
-
+import PrivateRoute from './PrivateRoute';
 import React from "react";
 import {
   RouterProvider,
@@ -27,20 +27,24 @@ import Logout from "./Logout";
  * Creating routes via createBrowserRouter method makes project ready for react-router-dom 6.4 data fetching.
  * MainLayout component has common items like navbar and footer.
  */
-
 const router = createBrowserRouter(
   createRoutesFromElements(
     <Route path="/" element={<MainLayout />} errorElement={<ErrorPage />}>
+      {/* Public Routes - accessible without login */}
       <Route index element={<Homepage />} />
       <Route path="/homepage" element={<Navigate replace to="/" />} />
       <Route path="/locations" element={<LocationsPage />} />
       <Route path="/guides" element={<GuidesPage />} />
       <Route path="/about" element={<AboutPage />} />
-      <Route path="/profile" element={<ProfilePage />} />
       <Route path="/login" element={<LoginPage />} />
-      <Route path="/logout" element={<Logout />} />
       <Route path="/terms" element={<TermsConditionPage />} />
-      <Route path="/Demo" element={<Demo />} />
+
+      {/* Private Routes - require authentication */}
+      <Route element={<PrivateRoute />}>
+        <Route path="/profile" element={<ProfilePage />} />
+        <Route path="/logout" element={<Logout />} />
+        <Route path="/Demo" element={<Demo />} />
+      </Route>
     </Route>
   )
 );