JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1642
  • Score
    100M100P100Q82153F
  • License MIT

RBAC permission system for Object UI with object/field/row-level access control, permission guards, and hooks.

Package Exports

  • @object-ui/permissions

Readme

@object-ui/permissions

Role-Based Access Control (RBAC) for Object UI — permission guards, field-level access, and policy evaluation.

Features

  • 🔐 PermissionProvider - Context provider for permission-aware applications
  • 🛡️ PermissionGuard - Conditionally render components based on user permissions
  • 🎣 usePermissions - Hook for checking access to actions and resources
  • 📝 Field-Level Permissions - Control visibility and editability per field with useFieldPermissions
  • 🔍 Row-Level Security - Filter data based on permission conditions
  • ⚡ Permission Evaluator - Programmatic permission checking engine
  • 🎯 Type-Safe - Full TypeScript support with exported types

Installation

npm install @object-ui/permissions

Peer Dependencies:

  • react ^18.0.0 || ^19.0.0
  • react-dom ^18.0.0 || ^19.0.0

Quick Start

import { PermissionProvider, usePermissions, PermissionGuard } from '@object-ui/permissions';

function App() {
  return (
    <PermissionProvider
      roles={['admin', 'editor']}
      permissions={{
        orders: { read: true, create: true, update: true, delete: false },
      }}
    >
      <Dashboard />
    </PermissionProvider>
  );
}

function Dashboard() {
  const { can } = usePermissions();

  return (
    <div>
      <h1>Orders</h1>
      <PermissionGuard action="create" resource="orders" fallback={<p>No access</p>}>
        <button>Create Order</button>
      </PermissionGuard>
      {can('delete', 'orders') && <button>Delete</button>}
    </div>
  );
}

API

PermissionProvider

Wraps your application with permission context:

<PermissionProvider roles={['editor']} permissions={permissionMap}>
  <App />
</PermissionProvider>

usePermissions

Hook for checking permissions programmatically:

const { can, cannot, roles } = usePermissions();

if (can('update', 'orders')) {
  // allow editing
}

useFieldPermissions

Hook for field-level permission checks:

const { isVisible, isEditable } = useFieldPermissions('orders', 'discount');

PermissionGuard

Conditionally renders children based on permissions:

<PermissionGuard action="delete" resource="orders" fallback={<span>Read only</span>}>
  <DeleteButton />
</PermissionGuard>

evaluatePermission

Programmatic permission evaluation:

import { evaluatePermission } from '@object-ui/permissions';

const result = evaluatePermission({
  action: 'update',
  resource: 'orders',
  roles: ['editor'],
  permissions: permissionConfig,
});

createPermissionStore

Creates a permission store for advanced use cases:

const store = createPermissionStore(permissionConfig);
store.check('read', 'orders'); // true | false

Compatibility

  • React: 18.x or 19.x
  • Node.js: ≥ 18
  • TypeScript: ≥ 5.0 (strict mode)
  • @objectstack/spec: ^3.3.0
  • @objectstack/client: ^3.3.0
  • Tailwind CSS: ≥ 3.4 (for packages with UI)

License

MIT — see LICENSE.