Auth46: Confirm It's You

A full-height, centered step-up authentication screen that shows an optional icon badge, heading, and description above a bordered card containing the signed-in account line, a single password <input> with a show/hide toggle button and an inline "forgot password" link, a submit button, and a trailing cancel prompt beneath the card.

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

Base UI flavor

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

This installs the block to components/beste/block/auth46.tsx, plus the button, input, and field shadcn/ui primitives it uses for the submit and toggle buttons, the password input, and the labelled field group.

Quick start

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

import { Auth46, auth46Demo } from "@/components/beste/block/auth46";

export default function ConfirmPage() {
  return <Auth46 {...auth46Demo} />;
}

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

import { ShieldCheck } from "lucide-react";
import { Auth46 } from "@/components/beste/block/auth46";

export default function ConfirmPage() {
  return (
    <Auth46
      icon={<ShieldCheck className="size-6" />}
      heading="Confirm it's you"
      description="Re-enter your password to change your billing details."
      user={{ signedInLabel: "Signed in as", email: "[email protected]" }}
      labels={{ password: "Password", submit: "Confirm" }}
      forgotPasswordLink={{ label: "Forgot password?", href: "/reset" }}
      cancelPrompt={{ text: "Didn't mean to?", linkLabel: "Cancel", href: "/account" }}
    />
  );
}

Props

type Labels = {
  password?: string;
  passwordPlaceholder?: string;
  submit?: string;
  passwordToggle?: string;
};

Behavior notes

• Every top-level content prop is conditionally rendered: icon, heading, description, user, forgotPasswordLink, submit label, and cancelPrompt each render only when their prop (or nested value) is present, so passing an empty object yields a bare password field.
• The show/hide state lives in an internal useState(false) that is never lifted out; the toggle Button flips the <input> between type="password" and type="text" and swaps the Eye/EyeOff glyph, with no callback exposed to the parent.
• The form has no submit handler wired for the integrator: onSubmit only calls e.preventDefault(), and neither the submit button nor the password value emits an event or captured value, so validation and submission are left entirely to you.
• The password <input> is uncontrolled and carries autoFocus, so the field receives focus on mount and its value is never read by the component.
• Both forgotPasswordLink and cancelPrompt render through next/link, and the field label is associated to the input via a useId-generated id for accessibility.
• The submit button always renders as type="submit" (never disabled) whenever a submit label is provided, unlike a gated confirmation flow.