We sent a sign-in link to [email protected]. Click the link in the email to continue.
Open email appResend available in 30s
Full-height confirmation screen shown after a magic link is sent, with a mail icon, the destination email, an open-email button, a live resend countdown, and a change-email link. Perfect for passwordless and email-link flows.
Full-height confirmation screen shown right after a magic link is sent: a centered mail icon, a heading, a description that can bold the destination address, an open-email-app button, a live resend countdown, and a change-email link. Built for passwordless and email-link sign-in flows.
Upgrade to Pro
Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.
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/auth20?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/auth20?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/auth20.tsx and the button shadcn/ui primitive it's built on.
The installed file exports auth20Demo alongside the block: the exact props behind the preview above. Spread it to get a working confirmation screen in one line.
import { Auth20, auth20Demo } from "@/components/beste/block/auth20";
export default function CheckInboxPage() {
return <Auth20 {...auth20Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { MailOpen } from "lucide-react";
import { Auth20 } from "@/components/beste/block/auth20";
export default function CheckInboxPage() {
return (
<Auth20
icon={<MailOpen className="size-7" />}
heading="Check your inbox"
description="We sent a sign-in link to <strong>[email protected]</strong>."
primaryButton={{ label: "Open email app", href: "https://mail.google.com" }}
resendPrompt={{ text: "Didn't receive it?", linkLabel: "Resend link" }}
resendSeconds={30}
backLink={{ label: "Use a different email", href: "/sign-in" }}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
icon | React.ReactNode | – | Icon rendered in a muted circle above the heading |
heading | string | – | Screen title |
description | string | – | Confirmation copy, rendered as HTML (see notes) |
primaryButton | { label: string; href: string } | – | "Open email app" style call to action; hidden entirely when not set |
resendPrompt | { text: string; linkLabel: string } | – | Text and link label shown once the countdown reaches zero |
resendSeconds | number | 30 | Initial and reset value of the resend countdown, in seconds |
backLink | { label: string; href: string } | – | "Use a different email" link with a back arrow; hidden entirely when not set |
labels | object | {} | Countdown copy, see below |
className | string | – | Extra classes for the outer <section> |
type Auth20Labels = { resendCountdown?: string };description is injected via dangerouslySetInnerHTML, so it can wrap the email address in an inline <strong> tag (as the demo does) and have it styled by the surrounding [&>strong]:font-semibold rule; it isn't sanitized, so only pass trusted copy.setTimeout loop (useEffect re-arming on every tick), not a server-verified timer; it starts at resendSeconds and counts down to 0.labels.resendCountdown (default "Resend available in {seconds}s") with the literal {seconds} token replaced by the current value; once it hits 0, the same line swaps to resendPrompt.text plus a clickable "Resend link" button.secondsLeft back to resendSeconds locally; it does not call any API to actually resend an email, so the integrator must wire that side effect themselves (e.g. via an onClick wrapper before installing).