Skip to content
Domain-Specific

PermissionGate

client20.25 kB

Renders a subtree only for whoever holds the permission, without the core knowing your backend.

@stellaria/nebula-webPermissionGateProps

Preview

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:

ts
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
PropTypeDefault

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.

ReactNodenull

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

required

The 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