Auth52: Password Reset With Live Strength

A centered password reset card whose segmented strength meter and checked requirement list update as the field is typed, with a confirmation field and a breach-check note underneath.

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

Base UI flavor

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

This installs the block to components/beste/block/auth52.tsx, the shadcn/ui input component it depends on, and the button21 component it uses for the action.

Quick start

The installed file exports auth52Demo alongside the block: the exact props behind the preview above. Spread it to get a working reset page in one line.

import { Auth52, auth52Demo } from "@/components/beste/block/auth52";

export default function ResetPage() {
  return <Auth52 {...auth52Demo} />;
}

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

import { Auth52 } from "@/components/beste/block/auth52";

export default function ResetPage() {
  return (
    <Auth52
      wordmark="sirius"
      heading="Choose a new password"
      description="Once you set a password here, every other session on your account is signed out."
      passwordLabel="New password"
      passwordPlaceholder="At least twelve characters"
      confirmLabel="Type it again"
      confirmPlaceholder="The same password"
      strengthLabels={["Too short", "Weak", "Reasonable", "Strong"]}
      requirements={[
        { label: "Twelve characters or more", minLength: 12 },
        { label: "Upper and lower case", needsMixedCase: true },
        { label: "At least one number", needsNumber: true },
        { label: "At least one symbol", needsSymbol: true },
      ]}
      submitLabel="Set the password and sign in"
      note="We check new passwords against public breach lists."
      backLink={{ label: "Back to sign in", href: "/signin" }}
    />
  );
}

Props

type Requirement = {
  label: string;
  minLength?: number;
  needsNumber?: boolean;
  needsSymbol?: boolean;
  needsMixedCase?: boolean;
};

Behavior notes

• Requirements are declarative rather than functions: each entry sets whichever of minLength, needsNumber, needsSymbol and needsMixedCase apply, and the block's meets helper evaluates all of them together. A requirement with no flags passes as soon as the field is non-empty.
• The meter has one segment per requirement, so the strength scale is derived from your rules rather than fixed at four levels. Add a fifth requirement and the meter grows a fifth segment.
• strengthLabels is indexed independently and clamped to its own length, so a mismatch between the number of labels and the number of requirements degrades to the closest label instead of rendering undefined.
• Only the password field is controlled. The confirmation field is uncontrolled and is never compared against it, so mismatch validation is yours to add.
• The meter is aria-hidden because the requirement list beneath it carries the same information as text, with the met state shown by a filled check rather than colour alone.
• The submit button has no handler and the block performs no network call. The breach-check described in note is copy, not behavior.
• The card is bg-background on a bg-muted section, which is how the set raises a centered auth card off the page.