Enable Two-Factor

Auth39: Enable Two-Factor

A full-height, centered security setup step that renders a rounded icon, heading, and description above a card holding a radio group of selectable two-factor method cards, each with an icon, title, and description, followed by a submit button and an optional skip prompt link.

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

Base UI flavor

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

This installs the block to components/beste/block/auth39.tsx, plus the button, radio-group, and field shadcn/ui primitives it uses for the submit action, the method selection group, and the form field layout.

Quick start

The installed file exports auth39Demo alongside the block: the exact props behind the preview above. Spread it to get a working 2FA method picker in one line.

import { Auth39, auth39Demo } from "@/components/beste/block/auth39";

export default function Page() {
  return <Auth39 {...auth39Demo} />;
}

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

import { KeyRound, ShieldCheck, Smartphone } from "lucide-react";
import { Auth39 } from "@/components/beste/block/auth39";

export default function Page() {
  return (
    <Auth39
      icon={<ShieldCheck className="size-6" />}
      heading="Add two-factor authentication"
      description="Choose a second step to keep your account secure."
      methods={[
        {
          value: "app",
          title: "Authenticator app",
          description: "Use a TOTP app like 1Password or Authy.",
          icon: <Smartphone className="size-5" />,
        },
        {
          value: "key",
          title: "Security key",
          description: "Use a hardware key or passkey.",
          icon: <KeyRound className="size-5" />,
        },
      ]}
      labels={{ submit: "Continue" }}
      skipPrompt={{ text: "Prefer to do this later?", linkLabel: "Skip for now", href: "/account" }}
    />
  );
}

Props

type TwoFactorMethod = {
  value: string;
  title: string;
  description: string;
  icon: React.ReactNode;
};

Behavior notes

• The selected method is tracked by internal useState seeded from methods[0]?.value ?? "", so the first method is pre-selected and the selection is never lifted out or exposed via a callback.
• Selection is keyed by method.value, so two methods sharing a value would both be highlighted as active.
• The <form> calls e.preventDefault() on submit and does nothing else; there is no onSubmit prop, so wiring the actual 2FA enrollment is left to the integrator.
• The submit Button is only rendered when labels.submit is a truthy string; otherwise the card shows just the method group with no action.
• The leading icon badge, heading, description, and skipPrompt block each render only when their prop is provided, so the layout collapses gracefully when any is omitted.
• The active method card is styled with border-primary bg-primary/5 while inactive cards get hover-only treatment; the visible RadioGroupItem control stays in sync with the whole-card <label> click target.
• The skip link uses next/link; it navigates to skipPrompt.href and carries no skip callback, so it is a plain navigation rather than a dismiss handler.