Recovery Codes

Auth22: Recovery Codes

Full-height two-factor backup screen: a centered key icon and heading over a bordered card that lists single-use recovery codes in a two-column monospace grid, copy and download actions, a destructive warning callout, and a confirmation checkbox that gates the continue button. Built for 2FA setup and account recovery 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/auth22?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/auth22.tsx and the button, checkbox, and field shadcn/ui primitives it's built on.

Quick start

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

import { Auth22, auth22Demo } from "@/components/beste/block/auth22";

export default function RecoveryCodesPage() {
  return <Auth22 {...auth22Demo} />;
}

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

import { KeyRound } from "lucide-react";
import { Auth22 } from "@/components/beste/block/auth22";

export default function RecoveryCodesPage() {
  return (
    <Auth22
      icon={<KeyRound className="size-7" />}
      heading="Save your recovery codes"
      description="Keep these codes somewhere safe."
      codes={["4f9k-2x7p", "8m3q-1v6z", "7c2w-9b4n", "5h8d-3t1r"]}
      downloadFileName="recovery-codes.txt"
      continueButton={{ label: "Continue", href: "/dashboard" }}
      labels={{
        copy: "Copy codes",
        download: "Download",
        warning: "You won't be able to view these codes again.",
        confirm: "I have saved my recovery codes",
      }}
    />
  );
}

Props

type Auth22Labels = {
  copy?: string;
  copied?: string;
  download?: string;
  warning?: string;
  confirm?: string;
};

Behavior notes

• The copy button performs a real navigator.clipboard.writeText(codes.join("\n")) call; on success it swaps its icon and label to labels.copied (default "Copied") for 2 seconds via setTimeout, then reverts.
• The download button performs a real client-side download: it builds a Blob from codes.join("\n"), creates an object URL, and clicks a temporary <a download> anchor, all without any server request; the file name comes from downloadFileName.
• The continue button is disabled (and rendered as a plain, non-link <Button>) whenever labels.confirm is set and the checkbox is unchecked; once checked, or whenever labels.confirm is omitted entirely, it becomes a real asChild link to continueButton.href.
• The confirmation checkbox and its label only render when labels.confirm is set; the warning callout (destructive-tinted, with a TriangleAlert icon) only renders when labels.warning is set.
• Both the copy and download buttons are individually optional via labels.copy / labels.download, so either action can be dropped without affecting the other.