react-access-engine — Unified Access Control for React
Unified access
control for React.js, Next.js & Node.js
Define access once. Use it everywhere. Frontend hooks + backend engine for RBAC, ABAC, feature flags, experiments, plan gating, and remote config - same logic everywhere.
import { defineAccess, AccessProvider, Allow, Feature }
from 'react-access-engine'
const config = defineAccess({
roles: ['viewer', 'editor', 'admin'],
permissions: {
viewer: ['posts:read'],
editor: ['posts:read', 'posts:write'],
admin: ['*'],
},
features: {
'dark-mode': true,
'ai-assist': { allowedPlans: ['pro'] },
},
})
// React — hooks & components
function App() {
return (
<AccessProvider config={config} user={user}>
<Allow permission="posts:write">
<Editor />
</Allow>
<Feature name="ai-assist">
<AIPanel />
</Feature>
</AccessProvider>
)
}
// Node.js — same config, pure functions
import { hasPermission, evaluateFeature }
from 'react-access-engine'
app.get('/api/posts', (req, res) => {
if (!hasPermission(req.user, 'posts:read', config))
return res.status(403).json({ error: 'Forbidden' })
// ...
})Everything you need for access control
Stop stitching together RBAC libraries, feature flag services, and experiment platforms. One package for React and Node.js.
RBAC & ABAC
Role-based and attribute-based access control with wildcard permissions, namespace support, and composable rules.
Policy Engine
Declarative policy rules with allow/deny effects, priority ordering, custom conditions, and resource-level attribute checks.
Feature Flags
Declarative feature gates with role targeting, plan gating, environment scoping, dependencies, and deterministic rollouts.
Rollouts & Segments
Progressive percentage rollouts, user segmentation, and environment-based targeting for controlled feature releases.
A/B Experiments
SSR-safe experiment assignment with percentage-based bucketing, deterministic hashing, and variant tracking.
Plan Gating
Hierarchical subscription plans with automatic tier comparison. Gate features and UI by the user's current plan.
Remote Config
Load access configuration remotely with stale-while-revalidate caching, polling, and optional signature verification.
Plugin System
Extensible plugin architecture with hooks for access checks, feature evaluations, policy evaluations, and custom condition operators.
DevTools
Built-in devtools overlay with real-time access checks, feature evaluations, policy traces, and config inspection.
Type-Safe & SSR-Ready
Full TypeScript inference with InferRoles, InferPermissions, InferFeatures. SSR-safe works with Next.js App Router.
Backend & Node.js
Same engine functions work in Express, Fastify, or any Node.js server. Shared config pattern — one config, frontend and backend, zero drift.
Zero Dependencies
No external runtime dependencies. ~6KB gzipped, fully tree-shakeable - only ship the functions you actually use.
Why react-access-engine?
Compare with combining separate RBAC libraries, feature flag services, and DIY solutions.
| Feature | RAE | RBAC Lib | Flag Service | DIY |
|---|---|---|---|---|
| RBAC with wildcard permissions | Partial | |||
| ABAC / Policy engine | Partial | |||
| Feature flags | ||||
| A/B Experiments | Partial | |||
| Plan / subscription gating | Partial | |||
| Remote config with polling | ||||
| Plugin system | ||||
| DevTools overlay | Partial | |||
| SSR-safe (Next.js) | Partial | Partial | Partial | |
| Tree-shakeable | ||||
| Zero dependencies | ||||
| Type-safe inference | Partial |
Why react-access-engine
What is react-access-engine?
An open-source, type-safe access control library for React, Node.js, and Next.js. It replaces separate RBAC libraries, feature flag services, and experiment platforms by combining everything in a single, tree-shakeable package with zero dependencies. Use the same config on the frontend (hooks & components) and the backend (engine functions).
Role-Based Access Control (RBAC)
Define roles like admin, editor, and viewer with wildcard permissions and namespace support. Use the Can component or usePermission hook to conditionally render UI based on the current user's role and permissions.
Attribute-Based Access Control (ABAC)
Go beyond roles with declarative policy rules that evaluate user attributes, resource properties, and environmental conditions. The policy engine supports allow/deny effects, priority ordering, and custom condition operators for fine-grained authorization.
Feature Flags & A/B Experiments
Ship features behind flags with role targeting, plan gating, percentage rollouts, and dependency chains. Run SSR-safe A/B experiments with deterministic hashing and variant tracking. Use the Feature component or useFeature hook.
Plan Gating & Remote Config
Gate features by subscription tier with hierarchical plan comparison. Load and refresh access configuration from a remote API with stale-while-revalidate caching, polling intervals, and optional HMAC signature verification.
Type-Safe & SSR-Ready
Full TypeScript inference with InferRoles, InferPermissions, and InferFeatures helpers. Designed for server-side rendering works seamlessly with Next.js App Router, React Server Components, and static site generation.
Plugins & DevTools
Extend react-access-engine with the plugin system for audit logging, analytics, and custom operators. Debug access checks, feature evaluations, and policy traces in real time with the built-in DevTools overlay available via react-access-engine-devtools.
Get started in minutes
Install with npm i react-access-engine, define your config once with defineAccess(), and use it everywhere — React hooks and components on the frontend, engine functions on the backend. Works with Express, Fastify, or any Node.js server. Read the quick start guide or explore the backend docs and interactive playground to see react-access-engine in action. View the full API reference for detailed documentation on all 8 components, 9 hooks, and 18 engine exports.
Ready to get started?
One provider, one config, total control.