Security Question Setup

Auth48: Security Question Setup

A full-height centered card that lets a user set a security question for account recovery: an optional circular icon, heading, and description sit above a bordered card holding a Select of security questions, a free-text answer Input, and a submit Button, with an optional skip prompt link below.

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

Base UI flavor

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

This installs the block to components/beste/block/auth48.tsx, plus the button, input, select, and field shadcn/ui primitives it uses for the submit action, the answer entry, the question dropdown, and the labeled field layout.

Quick start

The installed file exports auth48Demo alongside the block: the exact props behind the preview above. Spread it to get a working security question form in one line.

import { Auth48, auth48Demo } from "@/components/beste/block/auth48";

export default function SecurityQuestionPage() {
  return <Auth48 {...auth48Demo} />;
}

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

import { ShieldQuestion } from "lucide-react";
import { Auth48 } from "@/components/beste/block/auth48";

export default function SecurityQuestionPage() {
  return (
    <Auth48
      icon={<ShieldQuestion className="size-6" />}
      heading="Set a security question"
      description="We'll use this to verify your identity if you ever get locked out."
      questions={[
        { value: "pet", label: "What was the name of your first pet?" },
        { value: "city", label: "In what city were you born?" },
      ]}
      defaultQuestion="pet"
      labels={{
        question: "Security question",
        answer: "Your answer",
        submit: "Save security question",
      }}
      skipPrompt={{ text: "Set this up later?", linkLabel: "Skip for now", href: "/dashboard" }}
    />
  );
}

Props

type SecurityQuestion = {
  value: string;
  label: string;
};

Behavior notes

• The selected question is held in a local useState seeded from defaultQuestion; there is no onChange/onValueChange callback exposed, so the current selection is never lifted out of the component.
• The answer Input is fully uncontrolled: its value is never read into state or forwarded anywhere, so whatever the user types is discarded on submit.
• The <form> onSubmit only calls e.preventDefault(); there is no submit handler prop, so wiring the actual save request is left entirely to the integrator.
• Each of icon, heading, description, and every labels sub-field (question label, answer label, submit) is conditionally rendered, so omitting one drops it from the layout rather than showing an empty slot.
• The submit Button is only rendered when labels.submit is set, and it is always enabled (no dirty/valid gating).
• Labels and inputs are associated via a useId-derived fieldId, so accessibility linking works even with multiple instances on a page.
• skipPrompt renders through a next/link Link, and the whole prompt paragraph is omitted when the prop is absent.