PermissionGate
Renders a subtree only for whoever holds the permission, without the core knowing your backend.
@stellaria/nebula-webPermissionGatePropsPreview
PermissionGate takes a permission key and renders its children only when the current resolver
grants it. What happens when it does not is up to mode: hide the subtree, or keep it visible and
disabled.
The core does not know how you authorise
The catalogue never talks to your API. A PermissionProvider receives a resolver from your app —
(key) => boolean — and every gate asks that. Your permissions can come from a token, a store or a
response you cached; none of it reaches the component.
Type the keys once
Augment the registry a single time and every gate in the app is checked:
declare module "@stellaria/nebula-tokens" {
interface NebulaPermissions {
keys: "orders.read" | "orders.write" | "invoices.void";
}
}No generics at the call sites, and a typo in a key stops the build instead of silently hiding a button.
It is not security
It decides what to render, nothing else. Anything that matters is checked again on the server: a gate the user cannot see is still a request they can send.
Props
6| Prop | Type | Default |
|---|---|---|
children What the permission protects. | ReactNode | — |
className Lands on the wrapper the inert mode adds. There is no wrapper when the gate lets you through. | string | — |
deniedLabel Text announced before the inert subtree, so a screen reader learns why nothing responds. Only read in the inert mode, and without it the denial is silent — which is the case worth avoiding. | string | — |
fallback What renders in place of the subtree when it is hidden. Only used by `"hide"` — the inert mode shows the real children instead. Left out, denial renders nothing. | ReactNode | null |
mode What denial looks like. `"hide"` removes the subtree; the other mode keeps it on screen and marks it `inert`, so it is visible but unreachable by pointer and by keyboard alike. Hiding is the safer default: a control the user can see but not use needs a reason they can read. | PermissionDeniedMode | "hide" |
permission requiredThe key this subtree is gated on. It is resolved by the app's own resolver, which is why the key type is the app's and not the library's — the core never learns what the keys mean. | K | — |