Device Login
Prov1.0.0A CLI device login that shows exactly what is being approved, side by side with the terminal.
Build for your project
Code/install build
Usage
Import it and pass your content. The props that matter most are listed next.
Example
import { DeviceAuth } from "@/components/ui/notchset/blocks/device-auth";
export function Device({ code }: { code: string }) {
return (
<DeviceAuth
command="relay login"
verifyUrl="relay.dev/device"
userCode={code}
device={{ name: "relay-cli 2.4 on macOS", facts: [{ label: "DEVICE", value: "Maya's MacBook" }] }}
workspaces={[{ value: "acme", label: "ACME LABS" }]}
scopes={[{ id: "runs:read", label: "runs:read", description: "Read runs and traces", defaultOn: true }]}
onLookup={async (c) => (await fetch(`/api/device/${c}`)).ok}
onAuthorize={async (grant) => {
await fetch("/api/device/approve", { method: "POST", body: JSON.stringify(grant) });
return ["Logged in as maya@acme.dev · Acme Labs"];
}}
/>
);
}Props
command / verifyUrl / userCode–stringWhat the terminal ran, where to go and the code it shows.
device–{ name, facts: { label, value }[] }What the browser shows on Is this you?
workspaces / scopes–options / { id, label, description, defaultOn?, dangerous? }[]dangerous is the warning shown while it's ticked; such scopes should be off by default.
onLookup / onAuthorize / onDeny–(code) => Promise<boolean> / (grant) => Promise<string[]> / () => PromiseYour device-flow endpoints; onAuthorize resolves with the terminal's success lines.
expiresIn / tokenNote / fillLabel–number / string / stringSeconds left, the granted note, and a demo-only fill button.
Anatomy
- The workspace choice is the Segmented Control.
- Every decision is your device-flow endpoint; the block shows both sides of it.
- Scopes are data: their defaults and warnings are yours to set.
DeviceAuthdata-slot="device-auth"The terminal and the browser's enter, confirm and result steps.
Source
components/ui/notchset/blocks/device-auth.tsx
This component is included with Pro.
Try the live preview above. Get Pro to install the source.
Build for your project
Code/install build
Installation
pnpm dlx shadcn@latest add @beautiful-ui-pro/device-authNeeds your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
For coding agents
Give your coding assistant the Markdown guide instead of screenshots.
Use it for
- A CLI, desktop app or TV app that signs in through the browser
- Showing people which scopes a device gets before they approve
Use something else when
- Web sign-in: use Sign In
- Service tokens: use API keys
Mistakes to avoid
- Bind the token to the chosen workspace and scopes on the server
- Keep dangerous scopes off by default and show the warning before approval
- Never pre-fill the code from anything but your own deep link (?user_code=)
Agents find it by
- device login, cli login, device authorization, oauth device flow, rfc 8628, connect a device, authorize cli, Notchset
Where agents read it
- Guide for this component: https://beautiful-ui.dev/md/device-auth.md
- Every component, for tools without MCP: /llms.txt
- MCP server:
https://beautiful-ui.dev/api/mcp(setup)
Behaviour
Keyboard
- Enter
- Continue with the code
- Space
- Toggle a scope
- Tab
- Code, workspace, scopes, DENY and AUTHORIZE
Accessibility
- The section is named Device login; the terminal's output is announced (aria-live)
- Scopes are checkboxes (role, aria-checked); the dangerous-scope warning is announced
- The code field marks errors (aria-invalid) tied to its message; the result is a status
Motion
- Steps
- Each step rises in (300ms)
- Working
- The scanner while waiting, looking up and connecting
- Approved
- The terminal's lines rise in one by one and a fresh caret blinks
- Expiry
- The clock rolls; under a minute it turns signal
Responsive
- The terminal stacks above the browser under 820px (container width).
Performance
- One timer for the clock; nothing else runs while idle.
Changelog
v1.0.0 · 2026-10-04
First release
Part of
Included with Pro
Pro is in early access.
