@humano/frontend-permissions

Small, data-agnostic building blocks for view/action permissions in React 18/19:

• usePermissionCheckerFromFn — memoize (viewId, action) => boolean
• useViewPermissions — canEditar(), can("custom"), …
• PermissionGate / useGuardedAction — UI
• filterMenuByRouteOptions / getFirstAllowedRoute — filter nav trees and pick a default route
• hasPathAccessInOptions / matchPathToOptions — path matching (pass your router basename explicitly; no default is assumed)

No HTTP client, no auth provider, no hardcoded host or product routes — bring your own.

Install

npm install @humano/frontend-permissions
# or: pnpm add / yarn add

Peer: react ^18 || ^19.

Imports

Recommended root import:

import {
  usePermissionCheckerFromFn,
  useViewPermissions,
  PermissionGate,
  filterMenuByRouteOptions,
} from '@humano/frontend-permissions';

Subpath imports still work:

import { useViewPermissions } from '@humano/frontend-permissions/useViewPermissions';

Menu filtering

1. Get allowed route keys from your backend (e.g. string list).
2. Set applicationBasePath to the same value as your React Router basename (or "").
3. Call filterMenuByRouteOptions(items, allowedPaths, { applicationBasePath, isDevelopment }).

Publish (maintainers)

From a clone of the package:

cd packages/frontend-permissions
npm run build
npm publish --access public
# scope must match your npm organization; see package "name" field

License

MIT – see LICENSE.