Auth27: Sign-In Error

Full-height authentication error screen: a warning icon in a destructive-tinted circle, a heading and explanation, an optional monospace error-code chip, a try-again and back-to-sign-in pair of actions, and a contact-support line. Built for failed sign-in and OAuth callback error states.

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/auth27?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

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

Quick start

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

import { Auth27, auth27Demo } from "@/components/beste/block/auth27";

export default function SignInErrorPage() {
  return <Auth27 {...auth27Demo} />;
}

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

import { TriangleAlert } from "lucide-react";
import { Auth27 } from "@/components/beste/block/auth27";

export default function SignInErrorPage() {
  return (
    <Auth27
      icon={<TriangleAlert className="size-7" />}
      heading="We couldn't sign you in"
      description="Something went wrong while signing you in. Please try again."
      labels={{ errorDetail: "Error code: AUTH_4012" }}
      tryAgainButton={{ label: "Try again", href: "/sign-in" }}
      backButton={{ label: "Back to sign in", href: "/sign-in" }}
      supportPrompt={{ text: "Still stuck?", linkLabel: "Contact support", href: "/support" }}
    />
  );
}

Props

type Auth27Labels = { errorDetail?: string };

Behavior notes

• The icon circle uses bg-destructive/10 text-destructive, the only auth block in this set to tint its header icon with the destructive color instead of the neutral muted circle the rest of the family uses.
• labels.errorDetail (e.g. the demo's "Error code: AUTH_4012") renders as a small bordered, monospace, pill-like chip between the description and the action buttons; it's a single free-form string, not a structured { code, message } shape, so any label text works, not just an error code.
• Both tryAgainButton and backButton render as plain asChild next/link anchors with no retry logic or error-state clearing wired in; re-attempting sign-in is entirely the integrator's responsibility.
• tryAgainButton and backButton are independent booleans by presence, so a variant that only offers one action (e.g. just "Back to sign in") is possible by omitting the other.