Staaarter

OAuth Authorize App

Full-height OAuth consent screen. Shows the requesting app's icon and name, a bulleted list of scopes it wants (icon plus short description per line), and Authorize/Cancel buttons side by side.

By Staaarter Team
Auth
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, avatar, avatar-initials dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/oauth-authorize-app.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/auth/auth19.tsx instead.

Usage

The file also exports auth19Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Auth19, auth19Demo } from "@/components/blocks/auth/auth19";

export default function Page() {
  return <Auth19 {...auth19Demo} />;
}

Props

PropTypeDefaultDescription
appNamestringnoneName of the app requesting access.
appIcon{ src: string; alt: string }undefinedApp icon image; falls back to initials when omitted.
scopesScopeItem[]nonePermission rows, each with an icon and short description.
authorizeLabelstring"Authorize"Label on the primary button.
cancelLabelstring"Cancel"Label on the outline button.
classNamestringnoneExtra classes for the outer section element.

Types

type ScopeItem = { icon: LucideIcon; description: string };

Behavior notes

  • Entirely static/server-rendered; the app icon renders in a rounded-square Avatar (overridden from the default circular shape) with initials as a fallback.
  • "Authorize" and "Cancel" are plain buttons with no handlers wired up, both are backend-requiring actions left inert.
  • scopes renders in whatever order the array is passed in, the component does not group or sort permissions.