protected route

client/package-lock.json

@@ -13,6 +13,7 @@
         "@testing-library/user-event": "^13.5.0",
         "axios": "^1.6.8",
         "bootstrap": "^5.3.3",
+        "js-cookie": "^3.0.5",
         "jspdf": "^2.5.2",
         "jspdf-autotable": "^3.8.4",
         "md5": "^2.3.0",
@@ -12533,6 +12534,15 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",

client/package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.6.8",
     "bootstrap": "^5.3.3",
+    "js-cookie": "^3.0.5",
     "jspdf": "^2.5.2",
     "jspdf-autotable": "^3.8.4",
     "md5": "^2.3.0",

client/src/App.js

@@ -1,9 +1,7 @@
 import React from "react";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import CourseForm from "./Pages/CourseForm";
-import FacultyForm from "./Pages/FacultyForm";
 import './App.css';
-import Welcome from "./Pages/Welcome"
 import AuthPage from "./Pages/Login";
 import HomePage from "./Pages/HomePage";
 import ForgetPwPage from "./Pages/ForgetPw";
@@ -12,26 +10,23 @@ import FilterPage from "./Pages/FilterPage";
 import WelcomeWithFilter from "./Pages/WelcomeWithFilter";
 import "react-toastify/dist/ReactToastify.css";
 import CourseTable from "./Pages/CourseTable";
-import GenerateCSV from "./Pages/GenerateCSV";
 import ConsolidatedTable from "./Pages/ConsolidatedTable";
 import CourseConsolidated from "./Pages/courseConsolidated";
+import PrivateRoute from "./components/PrivateRoute";
 
 function App() {
   return (
       <Routes>
         <Route path="/" element={<AuthPage />}></Route>
-        <Route path="/generate-csv" element={<GenerateCSV />} />
-        <Route path="/course-form/:id" element={<CourseForm />} />
-        <Route path="/faculty-form/:id" element={<FacultyForm />} />
-        <Route path="/Welcom" element={<WelcomeWithFilter />} />
-        <Route path="/AuthPage" element={<AuthPage />}></Route>
+        <Route path="/course-form/:id" element={<PrivateRoute element={<CourseForm />} />} />
+        <Route path="/Welcom" element={<PrivateRoute element={<WelcomeWithFilter />} />} />
         <Route path="/Home" element={<HomePage />}></Route>
         <Route path="/ForgetPw" element={<ForgetPwPage />}></Route>
         <Route path="/ResetPw/:token" element={<ResetPwPage />}></Route>
-        <Route path="/Filter" element={<FilterPage />} />
-        <Route path="/courses" element={<CourseTable />} />
-        <Route path="/consolidated" element={<ConsolidatedTable />} />
-        <Route path="/courseConsolidated" element={<CourseConsolidated />} />
+        <Route path="/Filter" element={<PrivateRoute element={<FilterPage />} />}  />
+        <Route path="/courses" element={<PrivateRoute element={<CourseTable />} />}  />
+        <Route path="/consolidated" element={<PrivateRoute element={<ConsolidatedTable />} />}  />
+        <Route path="/courseConsolidated" element={<PrivateRoute element={<CourseConsolidated />} />}  />
       </Routes>
   );
 }

client/src/components/PrivateRoute.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Navigate } from 'react-router-dom';  // Use Navigate for redirect
+import Cookies from "js-cookie";
+
+const PrivateRoute = ({ element: Element, ...rest }) => {
+  const token = Cookies.get("token");  
+
+  // If token exists, render the element. Otherwise, redirect to the login page
+  return token ? Element : <Navigate to="/" />;
+};
+
+export default PrivateRoute;