Standardizing React Route Protection with react-protected

Stop copy-pasting your React route protection. Here’s a better way.

The react-protected library standardizes route access by separating guard logic from framework-specific routing. It offers two distinct packages including a framework-agnostic core and a dedicated React Router adapter. This approach eliminates the need to manually rewrite PrivateRoute components for every new project.

Why This Matters

Technical reality often involves engineers rewriting PrivateRoute components and role check hooks for every new project, leading to inconsistent implementations and maintenance debt. Standardizing this logic via a library like react-protected ensures that security requirements like RBAC and ABAC are handled uniformly across various routing frameworks. This separation of concerns allows developers to define access rules once and apply them predictably, reducing the risk of security gaps caused by unique, untested implementations in every repository.

Key Insights

• @react-protected/core provides framework-agnostic logic with zero dependencies on React or specific routers.
• The library supports both config-based and JSX-based route definitions for flexible integration styles.
• RBAC (Role-Based Access Control) is implemented by passing custom role check logic to the GuardProvider.
• ABAC (Attribute-Based Access Control) allows for granular permission checks like ‘contracts:read’ via the permissions property.
• Integration with TanStack Router is achievable using the core package within the beforeLoad lifecycle hook.

Working Examples

Config-based router implementation using react-protected/react-router.

const router = createGuardedRouter([{ path: '/admin', element: <AdminPage />, access: 'authenticated', roles: ['admin'] }], { getUser: () => useAuthStore.getState().user, hasRole: (user, roles) => roles.some((role) => user.roles.includes(role)), loginPath: '/login', forbiddenPath: '/403' })

Integration with TanStack Router using the framework-agnostic core package.

const guard = createGuard({ getUser: () => useAuthStore.getState().user, hasRole: (user, roles) => roles.some((role) => user.roles.includes(role)) }); const dashboardRoute = createRoute({ path: '/dashboard', beforeLoad: ({ location }) => { const result = guard.check({ path: '/dashboard', access: 'authenticated' }, location.pathname); if (!result.allowed) throw redirect({ to: result.redirectTo }) }, component: DashboardPage })

Practical Applications

• Use Case: Admin dashboard protection where routes require both ‘authenticated’ status and specific ‘admin’ roles. Pitfall: Hardcoding role checks inside individual components leads to difficult-to-test and fragmented security logic.
• Use Case: Granular feature access for specific modules like ‘/contracts’ using ‘permissions’ strings. Pitfall: Copy-pasting PrivateRoute logic across projects results in inconsistent redirection behavior and increased surface area for bugs.

References:

• https://dev.to/aastakhov/stop-copy-pasting-your-react-route-protection-heres-a-better-way-2k8o
• https://github.com/astakhovaskold/react-protected