Scoped Access Prompt React component
A connection prompt that gives people real control: switch each permission on or off, pick how long access lasts, and see the risk change before allowing it.
About the Scoped Access Prompt component
Scoped Access Prompt replaces the usual take-it-or-leave-it permission screen. People can turn off anything an app doesn't need and choose how long it keeps access.
A small risk meter responds as they go, so giving an app more power is always a visible choice. Afterwards the card shows exactly what was granted, with a way to revoke it.
When to use it
Use it for connecting third-party apps, AI agents and integrations to a workspace.
Make only the truly necessary permissions required. If everything is locked on, the choice isn't real.
Installation
Add the Scoped Access Prompt component to your project with the shadcn CLI. It lands in components/scoped-access-prompt.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/scoped-access-promptProps
<ScopedAccessPrompt /> accepts 10 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| appName | string | "Atlas Sync" |
| publisher | string | "Atlas Labs" |
| workspace | string | "Northwind" |
| scopes | { id: string; label: string; detail: string; level: AccessLevel; required?: boolean; defaultOn?: boolean }[] | DEFAULT_SCOPES |
| durations | { id: string; label: string; ends: string }[] | DEFAULT_DURATIONS |
| defaultDuration | string | "month" |
| onAllow | (grant: AccessGrant) => void | — |
| onDeny | () => void | — |
| onRevoke | () => void | — |
- theme"dark" | "light"Default: "dark"
- appNamestringDefault: "Atlas Sync"
- publisherstringDefault: "Atlas Labs"
- workspacestringDefault: "Northwind"
- scopes{ id: string; label: string; detail: string; level: AccessLevel; required?: boolean; defaultOn?: boolean }[]Default: DEFAULT_SCOPES
- durations{ id: string; label: string; ends: string }[]Default: DEFAULT_DURATIONS
- defaultDurationstringDefault: "month"
- onAllow(grant: AccessGrant) => void
- onDeny() => void
- onRevoke() => void
Scoped Access Prompt FAQ
- How is the risk level set?
- By the highest level switched on: read is low, write is medium and admin is high.
- Can a permission be locked on?
- Yes. Set required and it shows as Required with no switch.
- What do I get when someone allows it?
- onAllow receives the chosen permission ids and the duration id.
- Does this enforce the permissions?
- No. It collects the choice, and your backend has to apply it.
