Access Gate — cinder playground

Overview

Authorization presentation gate for controls and sections that stay visible when the current user is missing an application scope or permission.

Usage

<script lang="ts">
  import { AccessGate } from '@lostgradient/cinder/access-gate';
  import { Button } from '@lostgradient/cinder/button';
</script>

<AccessGate granted={false} reason="Requires scope: workflows:cancel">
  <Button label="Cancel workflow" />
</AccessGate>

<AccessGate
  granted={false}
  variant="section"
  reason="Requires scope: storage:admin"
  requirement="storage:admin"
/>

Live preview

When to use

Use when

Showing a mutating action that the current user cannot activate because an application authorization scope is missing.
Replacing a panel, tab, or administrative section with a lock state that names the missing scope or permission.

Avoid when

Checking browser permissions, media capabilities, or feature support — use capability-gate instead.
Resolving roles, scopes, or policies — compute granted in application code and pass the boolean in.

Examples

Disabled action

Keeps an unauthorized action visible with an accessible scope reason.

Locked section

Replaces a protected region with a scope-required placeholder.

Props

Props for access-gate
Name	Type	Default	Required	Description
`granted`	`boolean`		req	Whether the consumer-authorized action or section is available.
`variant`	`'inline' \| 'section'`	`'inline'`		Presentation mode.
`reason`	`text`		req	Human-readable explanation shown to users and wired to assistive technology.
`requirement`	`text`			Named scope, permission, or policy requirement shown in the section placeholder.
`children`	`snippet`			Gated content. Rendered untouched when access is granted.

AccessGate