feat: add dynamic auth processing for PrivateRoute

Author: jescalada

src/routes.jsx

@@ -35,55 +35,83 @@ const dashboardRoutes = [
     path: '/repo',
     name: 'Repositories',
     icon: RepoIcon,
-    component: (props) => <PrivateRoute component={RepoList} />,
+    component: (props) => 
+      <PrivateRoute
+        component={RepoList}
+        fullRoutePath={`/dashboard/repo`}
+      />,
     layout: '/dashboard',
     visible: true,
   },
   {
     path: '/repo/:id',
     name: 'Repo Details',
     icon: Person,
-    component: (props) => <PrivateRoute component={RepoDetails} />,
+    component: (props) => 
+      <PrivateRoute
+        component={RepoDetails}
+        fullRoutePath={`/dashboard/repo/:id`}
+      />,
     layout: '/dashboard',
     visible: false,
   },
   {
     path: '/push',
     name: 'Dashboard',
     icon: Dashboard,
-    component: (props) => <PrivateRoute component={OpenPushRequests} />,
+    component: (props) =>
+      <PrivateRoute
+        component={OpenPushRequests}
+        fullRoutePath={`/dashboard/push`}
+      />,
     layout: '/dashboard',
     visible: true,
   },
   {
     path: '/push/:id',
     name: 'Open Push Requests',
     icon: Person,
-    component: (props) => <PrivateRoute component={PushDetails} />,
+    component: (props) =>
+      <PrivateRoute
+        component={PushDetails}
+        fullRoutePath={`/dashboard/push/:id`}
+      />,
     layout: '/dashboard',
     visible: false,
   },
   {
     path: '/profile',
     name: 'My Account',
     icon: AccountCircle,
-    component: (props) => <PrivateRoute component={User} />,
+    component: (props) =>
+      <PrivateRoute
+        component={User}
+        fullRoutePath={`/dashboard/profile`}
+      />,
     layout: '/dashboard',
     visible: true,
   },
   {
     path: '/admin/user',
     name: 'Users',
     icon: Group,
-    component: (props) => <PrivateRoute adminOnly component={UserList} />,
+    component: (props) =>
+      <PrivateRoute
+        component={UserList}
+        fullRoutePath={`/dashboard/admin/user`}
+      />,
     layout: '/dashboard',
     visible: true,
   },
   {
     path: '/admin/user/:id',
     name: 'User',
     icon: Person,
-    component: (props) => <PrivateRoute adminOnly component={User} />,
+    component: (props) =>
+      <PrivateRoute
+        component={User}
+        fullRoutePath={`/dashboard/admin/user/:id`}
+      />,
     layout: '/dashboard',
     visible: false,
   },

src/service/routes/config.js

@@ -15,4 +15,8 @@ router.get('/contactEmail', function ({ res }) {
   res.send(config.getContactEmail());
 });
 
+router.get('/uiRouteAuth', function ({ res }) {
+  res.send(config.getUIRouteAuth());
+});
+
 module.exports = router;

src/ui/components/PrivateRoute/PrivateRoute.tsx

@@ -1,23 +1,56 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Navigate } from 'react-router-dom';
 import { useAuth } from '../../auth/AuthProvider';
+import { getUIRouteAuth } from '../../services/config';
 
-const PrivateRoute = ({ component: Component, adminOnly = false }) => {
+interface PrivateRouteProps {
+  component: React.ComponentType<any>;
+  fullRoutePath: string;
+}
+
+interface UIRouteAuth {
+  enabled: boolean;
+  rules: {
+    pattern: string;
+    adminOnly: boolean;
+    loginRequired: boolean;
+  }[];
+}
+
+const PrivateRoute = ({ component: Component, fullRoutePath }: PrivateRouteProps) => {
   const { user, isLoading } = useAuth();
-  console.debug('PrivateRoute', { user, isLoading, adminOnly });
 
-  if (isLoading) {
-    console.debug('Auth is loading, waiting');
-    return <div>Loading...</div>; // TODO: Add loading spinner
+  const [loginRequired, setLoginRequired] = useState(false);
+  const [adminOnly, setAdminOnly] = useState(false);
+  const [authChecked, setAuthChecked] = useState(false);
+
+  useEffect(() => {
+    getUIRouteAuth((uiRouteAuth: UIRouteAuth) => {
+      if (uiRouteAuth?.enabled) {
+        for (const rule of uiRouteAuth.rules) {
+          if (new RegExp(rule.pattern).test(fullRoutePath)) {
+            // Allow multiple rules to be applied according to route precedence
+            // Ex: /dashboard/admin/* will override /dashboard/*
+            setLoginRequired(loginRequired || rule.loginRequired);
+            setAdminOnly(adminOnly || rule.adminOnly);
+          }
+        }
+      } else {
+        console.log('UI route auth is not enabled.');
+      }
+      setAuthChecked(true);
+    });
+  }, [fullRoutePath]);
+
+  if (!authChecked || isLoading) {
+    return <div>Loading...</div>; // TODO: Add a skeleton loader or spinner
   }
 
-  if (!user) {
-    console.debug('User not logged in, redirecting to login page');
+  if (loginRequired && !user) {
     return <Navigate to="/login" />;
   }
 
-  if (adminOnly && !user.admin) {
-    console.debug('User is not an admin, redirecting to not authorized page');
+  if (adminOnly && !user?.admin) {
     return <Navigate to="/not-authorized" />;
   }
 

src/ui/services/config.js

@@ -25,4 +25,16 @@ const getEmailContact = async (setData) => {
   });
 };
 
-export { getAttestationConfig, getURLShortener, getEmailContact };
+const getUIRouteAuth = async (setData) => {
+  const url = new URL(`${baseUrl}/config/uiRouteAuth`);
+  await axios(url.toString()).then((response) => {
+    setData(response.data);
+  });
+};
+
+export {
+  getAttestationConfig,
+  getURLShortener,
+  getEmailContact,
+  getUIRouteAuth,
+};