Account Locked

Auth23: Account Locked

Full-height lockout screen shown after too many failed sign-in attempts: a centered shield icon, a heading and description, a live mm:ss countdown card, a retry button that stays disabled until the timer ends, and a reset-password link. Built for rate-limited sign-in protection.

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

Base UI flavor

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

This installs the block to components/beste/block/auth23.tsx and the button shadcn/ui primitive it's built on.

Quick start

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

import { Auth23, auth23Demo } from "@/components/beste/block/auth23";

export default function AccountLockedPage() {
  return <Auth23 {...auth23Demo} />;
}

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

import { ShieldX } from "lucide-react";
import { Auth23 } from "@/components/beste/block/auth23";

export default function AccountLockedPage() {
  return (
    <Auth23
      icon={<ShieldX className="size-7" />}
      heading="Account temporarily locked"
      description="Too many failed sign-in attempts. Please wait before trying again."
      lockSeconds={90}
      retryButton={{ label: "Try again", href: "/sign-in" }}
      resetPasswordPrompt={{ text: "Forgot your password?", linkLabel: "Reset it", href: "/forgot-password" }}
      labels={{ countdown: "Try again in" }}
    />
  );
}

Props

type Auth23Labels = { countdown?: string; retry?: string };

Behavior notes

• The countdown is local state driven by a setTimeout loop, ticking secondsLeft down once per second from lockSeconds; it's formatted as m:ss (e.g. 1:30) via a fixed padStart(2, "0") on the seconds portion, not a full mm:ss with leading-zero minutes.
• The bordered countdown card (label plus the large mono m:ss readout) is only mounted while secondsLeft > 0; once the timer reaches zero it disappears from the DOM rather than just visually clearing.
• retryButton is disabled and renders as plain non-link text while locked; once the countdown reaches zero it swaps to a real asChild link to retryButton.href.
• labels.retry is declared on the Auth23Labels type but never read by the component: the retry button's visible text always comes from retryButton.label, so setting labels.retry has no visible effect. Only labels.countdown is actually used.