Components
Protect
Permission-gated children -- hides UI until the user has the right tuple.
<Protect />
Renders children only if the current user has a specified permission. Renders fallback otherwise.
Import
Usage
import { Protect }
Props
| Prop | Type | Required | Description |
|---|---|---|---|
permission | { namespace: string; object: string; relation: string } | Yes | The tuple to check against |
fallback | ReactNode | No | Rendered when the check returns false. Default: null |
loading | ReactNode | No | Rendered while the check is in flight |
children | ReactNode | Yes | Rendered when the check returns true |
invert | boolean | No | Invert -- render children when the user lacks the permission |
Mental model
<Protect> wraps the PermissionService Check RPC with a React Suspense boundary and a 30-second cache. It's purely client-side; do not rely on it as your only authorization layer -- always enforce on the server too.
Checking multiple permissions
<Protect
A top-level <ProtectAll permissions={[...]}> + <ProtectAny permissions={[...]}> composite lands in v1.1.
Accessibility
<Protect> renders nothing when the check is in flight and no loading prop is set. If the gated content is above the fold, provide a skeleton via loading to avoid layout shift.