RBAC for React App

[reboottime]

RBAC for React App

• Use Case: In a CRM dashboard, it's common to have role-based access control for the pages a user can see, which is usually implemented using RBAC. Digging into details, we want:

  • Role-based access control for pages, plus possibly access control on UI elements that users can see and interact with on a page
  • A 404 page displayed when a user visits a page they don't have permission to access
  • Dynamic page (document) title updates

• The above requirements are from a product feature perspective. From a developer perspective, we expect the codebase to be configurable and extensible.

• Tech Stack: React Query and React Router are my preferred frontend stacks, they will be used in my solution

[reboottime]

The High Level Solution

For presenting high level ideas only, edge cases are not considered.

The interaction logic flow is as follows:

• User logs into the dashboard
• Frontend requests the backend system to get the current user's permissions information back
• After getting user permissions information back, frontend logic calculates routes allowed based on the routes configuration and user permissions

Now dive into sample solution into details:

Sample Solutions

• Configure routes with page title and permission requirements

const routes = [
 // everybody can see it
  {
    path: '/dashboard',
    element: <Dashboard />,
    title: 'Dashboard'
  },
const routes = [
 // everybody can see it
 {
   path: '/dashboard',
   element: <Dashboard />,
   title: 'Dashboard'
 },
 // only people with leads view permission can see it
 {
   path: '/customers',
   element: <Leads />,
   title: 'Leads',
   permissions: ['leads:view'],
   children: [
     {
       path: '',
       element: <CustomersTable />,
       permissions: ['leads:view']
     },
     {
       path: ':id',
       element: <CustomerDetail />,
       permissions: ['leads:view-detail']
     },
     {
       path: 'new',
       element: <CustomerCreate />,
       permissions: ['leads:create']
     },
     {
       path: ':id/edit',
       element: <CustomerEdit />,
       permissions: ['leads:edit-edtail']
     },
     {
       path: ':id/documents',
       element: <CustomerDocuments />,
       permissions: ['documents:view-detail-doc']
     }
   ]
 }
];
];

• Calculates the allowed routes

// hooks/useUserRoutes.js
export function useUserRoutes() {
  const { data: permissions = [] } = useGetUserPermissions();
  
  return useMemo(allRoutes.filter(route => {
    // No permissions required
    if (!route.permissions || route.permissions.length === 0) return true;
    
    // Check if user has ALL required permissions
    return route.permissions.every(permission => 
      permissions?.includes(permission)
    );
  }), [permissions]);
}

• Render Routes to App Entry

function renderRoutes(routes) {
 return routes.map(route => (
   <Route 
     key={route.path}
     path={route.path}
     element={route.element} 
   >
     {route.children && renderRoutes(route.children)}
   </Route>
 ));
}

function AppRoutes() {
 const { isSettled } = useGetUserPermissions();
 const accessibleRoutes = useUserRoutes();
 
 if (!isSettled) {
   return <Loading />
 }
 
 return (
   <Routes>
     <Route path="/" element={<Home />} />
     {renderRoutes(routes)}
     <Route path="*" element={<NotFound />} />
   </Routes>
 );
}

Sidebar

Apparently, you can decide the page sidebar based on user's permissions to.

So you can design a func called useGetUserSidebar on top of user permission and route configuration

[reboottime]

Recommend readings

https://auth0.com/docs/manage-users/access-control/rbac