react-simple-access-engine

Provider-based access control primitives for React.

Install

npm install react-simple-access-engine

What it provides

• AbacProvider to inject permissions once at the app boundary
• useAbac(feature, action) for function-style access checks
• AbacFunction render-prop wrapper for flexible branching
• AbacComponent for component-level guards
• AbacPage for page-level guards with a default forbidden fallback

Permission shape

The engine expects permissions in the shape below:

{
  billing: ["view", "pay", "export"],
  workspace: ["create", "view"],
}

Feature and action matching is case-insensitive.

Wildcard access is supported:

• billing: ["*"] grants every action under billing
• * : ["*"] grants every action across every feature

Match precedence:

1. exact feature + action
2. feature + "*"
3. "*" + "*"

Basic usage

import {
  AbacProvider,
  AbacComponent,
  AbacPage,
  AbacFunction,
  useAbac,
} from "react-simple-access-engine";

const permissions = {
  billing: ["view", "pay", "export"],
  workspace: ["create", "view"],
};

export const App = () => (
  <AbacProvider permissions={permissions}>
    <AbacPage feature="billing" action="view">
      <BillingPage />
    </AbacPage>
  </AbacProvider>
);

API

AbacProvider

Wrap your app once and pass the permissions object:

<AbacProvider permissions={permissions}>
  <App />
</AbacProvider>

If permissions is undefined, access is treated as not ready yet.

useAbac(feature, action)

Returns:

{
  canAccess: boolean;
  isReady: boolean;
}

AbacFunction

Render-prop wrapper:

<AbacFunction feature="billing" action="view">
  {({ canAccess, isReady }) =>
    isReady && canAccess ? <BillingPanel /> : <EmptyState />
  }
</AbacFunction>

AbacComponent

Component wrapper:

<AbacComponent feature="billing" action="view">
  <BillingPanel />
</AbacComponent>

Optional props:

• fallback: rendered when access is denied
• loadingFallback: rendered while permissions are unresolved

AbacPage

Page wrapper:

<AbacPage feature="billing" action="view">
  <BillingPage />
</AbacPage>

If access is denied, it renders a forbidden page by default. You can override that with fallback.

Notes

• The package does not depend on Redux.
• The package does not require React Router.
• Keep permissions normalized in one place, ideally at your app boundary.