Auth47: Recovery Phrase Entry

A full-height centered recovery screen that renders a heading, description, and a responsive numbered grid of wordCount monospace text inputs (paste into the first box to auto-split a full phrase across all boxes), a submit button that stays disabled until every word is filled, and an optional back link with a left-arrow icon.

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

Base UI flavor

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

This installs the block to components/beste/block/auth47.tsx, plus the button, input-group, and field shadcn/ui primitives it uses for the restore button, the numbered word inputs, and the field grouping with helper text.

Quick start

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

import { Auth47, auth47Demo } from "@/components/beste/block/auth47";

export default function RecoveryPage() {
  return <Auth47 {...auth47Demo} />;
}

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

import { Auth47 } from "@/components/beste/block/auth47";

export default function RecoveryPage() {
  return (
    <Auth47
      heading="Enter your recovery phrase"
      description="Paste your 24-word phrase to restore access."
      wordCount={24}
      labels={{
        helper: "Paste the full phrase into the first box to fill them all.",
        submit: "Restore account",
      }}
      backLink={{ label: "Back to sign in", href: "/login" }}
    />
  );
}

Props

Behavior notes

• The input array is seeded from wordCount via useState; changing wordCount after mount does not resize the existing state, so treat it as a mount-time value only.
• Pasting into any box splits the clipboard text on whitespace, and if it yields more than one part the paste is intercepted and distributed across all boxes from index 0, with parts[i] ?? "" filling short phrases and extra words beyond wordCount silently dropped.
• The submit button is disabled until allFilled is true, meaning every box has non-whitespace content; there is no onSubmit callback prop, and the <form> calls e.preventDefault(), so submission is inert and wiring the actual restore action is left to the integrator.
• Entered words live only in internal useState and are never lifted out or exposed via a change handler, so the parent cannot read the phrase.
• The grid is grid-cols-2 on mobile and sm:grid-cols-3 from the small breakpoint up; each box carries a numbered InputGroupAddon, font-mono text, and autoComplete="off", autoCapitalize="none", spellCheck={false}.
• heading, description, labels.helper, labels.submit, and backLink are each conditionally rendered, so omitting any of them removes its element entirely rather than showing a blank.
• The section is min-h-screen, so the block always fills the full viewport height regardless of content.