chore(auth): refactor routes to use PrivateRoute guard

Author: jescalada

src/index.jsx

@@ -2,21 +2,28 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { createBrowserHistory } from 'history';
 import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
+import { AuthProvider } from './ui/auth/AuthProvider';
 
 // core components
 import Admin from './ui/layouts/Admin';
 import Login from './ui/views/Login/Login';
 import './ui/assets/css/material-dashboard-react.css';
+import NotAuthorized from './ui/views/Extras/NotAuthorized';
+import NotFound from './ui/views/Extras/NotFound';
 
 const hist = createBrowserHistory();
 
 ReactDOM.render(
-  <Router history={hist}>
-    <Routes>
-      <Route exact path='/admin/*' element={<Admin />} />
-      <Route exact path='/login' element={<Login />} />
-      <Route exact path='/' element={<Navigate from='/' to='/admin/repo' />} />
-    </Routes>
-  </Router>,
+  <AuthProvider>
+    <Router history={hist}>
+      <Routes>
+        <Route exact path='/admin/*' element={<Admin />} />
+        <Route exact path='/login' element={<Login />} />
+        <Route exact path='/not-authorized' element={<NotAuthorized />} />
+        <Route exact path='/' element={<Navigate from='/' to='/admin/repo' />} />
+        <Route path='*' element={<NotFound />} />
+      </Routes>
+    </Router>
+  </AuthProvider>,
   document.getElementById('root'),
 );

src/routes.jsx

@@ -16,6 +16,8 @@
 
 */
 
+import React from 'react';
+import PrivateRoute from './ui/components/PrivateRoute/PrivateRoute';
 import Person from '@material-ui/icons/Person';
 import OpenPushRequests from './ui/views/OpenPushRequests/OpenPushRequests';
 import PushDetails from './ui/views/PushDetails/PushDetails';
@@ -33,58 +35,58 @@ const dashboardRoutes = [
     path: '/repo',
     name: 'Repositories',
     icon: RepoIcon,
-    component: RepoList,
+    component: (props) => <PrivateRoute component={RepoList} />,
     layout: '/admin',
     visible: true,
   },
+  {
+    path: '/repo/:id',
+    name: 'Repo Details',
+    icon: Person,
+    component: (props) => <PrivateRoute component={RepoDetails} />,
+    layout: '/admin',
+    visible: false,
+  },
   {
     path: '/push',
     name: 'Dashboard',
     icon: Dashboard,
-    component: OpenPushRequests,
+    component: (props) => <PrivateRoute component={OpenPushRequests} />,
     layout: '/admin',
     visible: true,
   },
   {
     path: '/push/:id',
     name: 'Open Push Requests',
     icon: Person,
-    component: PushDetails,
+    component: (props) => <PrivateRoute component={PushDetails} />,
     layout: '/admin',
     visible: false,
   },
   {
     path: '/profile',
     name: 'My Account',
     icon: AccountCircle,
-    component: User,
+    component: (props) => <PrivateRoute component={User} />,
     layout: '/admin',
     visible: true,
   },
   {
-    path: '/user/:id',
-    name: 'User',
-    icon: Person,
-    component: User,
+    path: '/user',
+    name: 'Users',
+    icon: Group,
+    component: (props) => <PrivateRoute adminOnly component={UserList} />,
     layout: '/admin',
-    visible: false,
+    visible: true,
   },
   {
-    path: '/repo/:id',
-    name: 'Repo Details',
+    path: '/user/:id',
+    name: 'User',
     icon: Person,
-    component: RepoDetails,
+    component: (props) => <PrivateRoute adminOnly component={User} />,
     layout: '/admin',
     visible: false,
   },
-  {
-    path: '/user',
-    name: 'Users',
-    icon: Group,
-    component: UserList,
-    layout: '/admin',
-    visible: true,
-  },
 ];
 
 export default dashboardRoutes;

src/ui/services/auth.js

@@ -0,0 +1,22 @@
+const baseUrl = import.meta.env.VITE_API_URI
+  ? `${import.meta.env.VITE_API_URI}`
+  : `${location.origin}`;
+
+/**
+ * Gets the current user's information
+ * @return {Promise<Object>} The user's information
+ */
+export const getUserInfo = async () => {
+  try {
+    const response = await fetch(`${baseUrl}/api/auth/me`, {
+      credentials: 'include', // Sends cookies
+    });
+
+    if (!response.ok) throw new Error(`Failed to fetch user info: ${response.statusText}`);
+
+    return await response.json();
+  } catch (error) {
+    console.error('Error fetching user info:', error);
+    return null;
+  }
+};