Access control
Show or hide React UI by the signed-in user’s roles and permissions, with hierarchical wildcard grants and permission names TypeScript checks.
Showing a user only what they may act on usually ends up as scattered user.permissions.includes(...)
checks that drift apart. This package puts the current user — the principal — in one context and
gives you a component, a hook and plain functions that all answer the same question the same way.
Package
What it adds over a hand-rolled check
Wildcards. Permission names are split on :, so granting invoice:* covers invoice:read and
invoice:line:edit without listing them. See Permissions.
Typed names. Augment the package once and Permission narrows from string to your own names,
so a typo is a type error rather than a silent denial.
A loading state. A principal you haven't fetched yet is distinct from one with no access, so nobody sees an "access denied" flash before their permissions arrive.
Start here
Role-based access control in React builds it end to end: loading the user's access, hiding UI, guarding routes, filtering navigation and typing permission names. Choosing between this and CASL? See react-acl vs CASL.
This hides UI. It does not protect data. Anything a user must not reach needs a check on your server as well.