Too many failed sign-in attempts. For your security, please wait before trying again.
Try again in
1:30
Forgot your password? Reset it
Full-height lockout screen shown after too many failed attempts, with a live mm:ss countdown, a retry button that unlocks when the timer ends, and a reset-password link. Perfect for rate-limited sign-in protection.
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.
Upgrade to Pro
Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.
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.
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" }}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
icon | React.ReactNode | – | Icon rendered in a muted circle above the heading |
heading | string | – | Screen title |
description | string | – | Subtext below the heading |
lockSeconds | number | 90 | Initial countdown length, in seconds |
retryButton | { label: string; href: string } | – | Bottom action, disabled while locked; hidden entirely when not set |
resetPasswordPrompt | { text: string; linkLabel: string; href: string } | – | Line below the retry button; hidden entirely when not set |
labels | object | {} | Countdown copy, see below |
className | string | – | Extra classes for the outer <section> |
type Auth23Labels = { countdown?: string; retry?: string };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.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.