Check Your Inbox

Auth20: Check Your Inbox

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.

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/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.

Quick start

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>jane@example.com</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" }}
    />
  );
}

Props

type Auth20Labels = { resendCountdown?: string };

Behavior notes

• 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.
• The resend countdown is local component state driven by a setTimeout loop (useEffect re-arming on every tick), not a server-verified timer; it starts at resendSeconds and counts down to 0.
• While counting down, the countdown line shows 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.
• Clicking the resend button only resets 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).