Auth19: OAuth Authorize App

Full-height OAuth consent screen: a centered app icon and heading over a bordered card that lists the requested permission scopes as a checkmarked list, followed by an authorize and a cancel action. Built for third-party app connect and developer platform authorization flows.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/auth19?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/auth19?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/auth19.tsx and the button shadcn/ui primitive it's built on.

Quick start

The installed file exports auth19Demo alongside the block: the exact props behind the preview above. Spread it to get a working consent screen in one line.

import { Auth19, auth19Demo } from "@/components/beste/block/auth19";

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

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Puzzle } from "lucide-react";
import { Auth19 } from "@/components/beste/block/auth19";

export default function AuthorizePage() {
  return (
    <Auth19
      icon={<Puzzle className="size-7" />}
      heading="Authorize Linear"
      description="Linear by Linear Orbit, Inc. wants to access your Beste account."
      scopes={[
        { title: "Read your profile", description: "Name, email, and profile picture." },
        { title: "Access your projects", description: "View and update issues in your workspace." },
      ]}
      authorizeButton={{ label: "Authorize", href: "/oauth/authorize" }}
      cancelButton={{ label: "Cancel", href: "/oauth/cancel" }}
      labels={{ scopesHeading: "This will allow Linear to:" }}
    />
  );
}

Props

type Scope = { title: string; description?: string };

type Auth19Labels = { scopesHeading?: string; footer?: string };

Behavior notes

• Both authorizeButton and cancelButton render as asChild next/link anchors, not real OAuth redirect or grant calls; wiring the actual consent exchange is left to the integrator.
• The scopes list renders only when scopes.length > 0; each row is skipped independently for its description line if that field is omitted.
• labels.scopesHeading (the small caption above the scope list) and labels.footer (the "revoke access" line under the card) each render only when explicitly set, so both can be omitted to simplify the screen.
• The icon slot is a fixed size-14 rounded-md square with a muted background, distinct from the circular icon treatment used in auth20/auth23/auth27/auth28.