add auth checks on frontend for manual type in page path

src/App.tsx

 import AppHeader from "./components/AppHeader";
 import AppFooter from "./components/AppFooter";
-import WelcomePage from "./pages/WelcomePage.tsx";
-import SignUpStudentPage from "./pages/SignUpStudentPage.tsx";
-import SignUpProfessorPage from "./pages/SignUpProfessorPage.tsx";
-import LoginPage from "./pages/LoginPage.tsx";
-import LabsPage from "./pages/LabsPage.tsx";
-import OpeningsPage from "./pages/OpeningsPage.tsx";
-import DiscussionPage from "./pages/DiscussionPage.tsx";
-import ProfilePage from "./pages/ProfilePage.tsx";
-import './App.css'
-import {Route, Routes} from "react-router-dom";
+import WelcomePage from "./pages/WelcomePage";
+import SignUpStudentPage from "./pages/SignUpStudentPage";
+import SignUpProfessorPage from "./pages/SignUpProfessorPage";
+import LoginPage from "./pages/LoginPage";
+import LabsPage from "./pages/LabsPage";
+import OpeningsPage from "./pages/OpeningsPage";
+import DiscussionPage from "./pages/DiscussionPage";
+import ProfilePage from "./pages/ProfilePage";
+import './App.css';
+import { Route, Routes } from "react-router-dom";
 import {
+    ADMIN_ROLE,
     adminPagePath,
     discussionPagePath,
     labsPagePath,
     loginPagePath,
-    openingsPagePath, profilePagePath, signupConfirmationPagePath,
+    openingsPagePath,
+    PROFESSOR_ROLE,
+    profilePagePath,
+    signupConfirmationPagePath,
     signUpProfessorPagePath,
     signUpStudentPagePath,
+    STUDENT_ROLE,
     welcomePagePath
-} from "./utils.ts";
-import DiscussionItemPage from "./pages/DiscussionItemPage.tsx";
-import AdminPage from "./pages/AdminPage.tsx";
-import SignUpConfirmationPage from "./pages/SignUpConfirmationPage.tsx";
+} from "./utils";
+import DiscussionItemPage from "./pages/DiscussionItemPage";
+import AdminPage from "./pages/AdminPage";
+import SignUpConfirmationPage from "./pages/SignUpConfirmationPage";
+import ProtectedRoute from "./components/ProtectedRoute.tsx";
+
 
 export default function App() {
     return (
         <div className="app">
-            <AppHeader/>
+            <AppHeader />
             <Routes>
-                <Route path={welcomePagePath} element={<WelcomePage/>}/>
-                <Route path={signUpStudentPagePath} element={<SignUpStudentPage/>}/>
-                <Route path={signUpProfessorPagePath} element={<SignUpProfessorPage/>}/>
-                <Route path={loginPagePath} element={<LoginPage/>}/>
-                <Route path={signupConfirmationPagePath} element={<SignUpConfirmationPage/>}/>
-                <Route path={adminPagePath} element={<AdminPage/>}/>
-                <Route path={labsPagePath} element={<LabsPage/>}/>
-                <Route path={`${labsPagePath}/:collegeName`} element={<LabsPage/>}/>
-                <Route path={`${labsPagePath}/:collegeName/:majorName`} element={<LabsPage/>}/>
-                <Route path={openingsPagePath} element={<OpeningsPage/>}/>
-                <Route path={discussionPagePath} element={<DiscussionPage/>}/>
-                <Route path={`${discussionPagePath}/:id`} element={<DiscussionItemPage/>}/>
-                <Route path={`${profilePagePath}/:role/:fullName`} element={<ProfilePage/>}/>
+                <Route path={welcomePagePath} element={<WelcomePage />} />
+                <Route path={signUpStudentPagePath} element={<SignUpStudentPage />} />
+                <Route path={signUpProfessorPagePath} element={<SignUpProfessorPage />} />
+                <Route path={loginPagePath} element={<LoginPage />} />
+                <Route path={signupConfirmationPagePath} element={<SignUpConfirmationPage />} />
+                <Route
+                    path={adminPagePath}
+                    element={<ProtectedRoute component={AdminPage} roles={[ADMIN_ROLE]} />}
+                />
+                <Route
+                    path={labsPagePath}
+                    element={<ProtectedRoute component={LabsPage} roles={[STUDENT_ROLE, PROFESSOR_ROLE, ADMIN_ROLE]} />}
+                />
+                <Route
+                    path={`${labsPagePath}/:collegeName`}
+                    element={<ProtectedRoute component={LabsPage} roles={[STUDENT_ROLE, PROFESSOR_ROLE, ADMIN_ROLE]} />}
+                />
+                <Route
+                    path={`${labsPagePath}/:collegeName/:majorName`}
+                    element={<ProtectedRoute component={LabsPage} roles={[STUDENT_ROLE, PROFESSOR_ROLE, ADMIN_ROLE]} />}
+                />
+                <Route
+                    path={openingsPagePath}
+                    element={<ProtectedRoute component={OpeningsPage} roles={[STUDENT_ROLE, PROFESSOR_ROLE, ADMIN_ROLE]} />}
+                />
+                <Route
+                    path={discussionPagePath}
+                    element={<ProtectedRoute component={DiscussionPage} roles={[STUDENT_ROLE, PROFESSOR_ROLE, ADMIN_ROLE]} />}
+                />
+                <Route
+                    path={`${discussionPagePath}/:id`}
+                    element={<ProtectedRoute component={DiscussionItemPage} roles={[STUDENT_ROLE, PROFESSOR_ROLE, ADMIN_ROLE]} />}
+                />
+                <Route
+                    path={`${profilePagePath}/:role/:fullName`}
+                    element={<ProtectedRoute component={ProfilePage} roles={[STUDENT_ROLE, PROFESSOR_ROLE]} />}
+                />
             </Routes>
-            <AppFooter/>
+            <AppFooter />
         </div>
     );
 }

src/components/ProtectedRoute.tsx

+import React from 'react';
+import {Navigate} from 'react-router-dom';
+import {useUserContext} from "../contexts/UserContext.tsx";
+import {loginPagePath, NO_TOKEN} from "../utils.ts";
+
+interface ProtectedRouteProps {
+    component: React.ComponentType<any>;
+    roles: string[];
+}
+
+const ProtectedRoute: React.FC<ProtectedRouteProps> = ({component: Component, roles}) => {
+    const {token, role} = useUserContext();
+
+    if (token === NO_TOKEN || !roles.includes(role)) {
+        return <Navigate to={loginPagePath}/>;
+    }
+
+    return <Component/>;
+};
+
+export default ProtectedRoute;