Three-step sign-in card: email and password, a second factor with an app / email / backup code switch, then a confirmation. Async handlers, one live region for errors, keyboard and screen-reader friendly.
"use client";
import { LockKeyhole } from "lucide-react";
import { useCallback, useState } from "react";
import { StepperLogin } from "@/components/ui/stepper-login";
const settings = {
brand: "Acme Console",
delayMs: 700,
resendSeconds: 60,
};
const wait = (ms: number) =>
new Promise<void>((resolve) => {
setTimeout(resolve, ms);
});
/**
* Mock checks, no network: any email and password pass, "wrong" as the password fails, any six
* digits (or xxxxx-xxxxx backup code) pass except 000000.
*/
export default function Demo(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
const [run, setRun] = useState(0);
const { delayMs } = s;
const restart = useCallback(() => setRun((value) => value + 1), []);
const sendCode = useCallback(() => wait(delayMs), [delayMs]);
const signIn = useCallback(
async ({ password }: { password: string }) => {
await wait(delayMs);
if (password === "wrong") {
throw new Error("Wrong email or password. Check both and try again.");
}
},
[delayMs]
);
const verify = useCallback(
async ({ code }: { code: string }) => {
await wait(delayMs);
if (code === "000000") {
throw new Error("That code has expired. Enter the latest one.");
}
},
[delayMs]
);
return (
<div className="flex min-h-[max(640px,100svh)] w-full flex-col items-center justify-center gap-4 bg-background bg-[radial-gradient(var(--color-border)_1px,transparent_1px)] bg-size-[18px_18px] p-6 text-foreground">
<StepperLogin
brand={s.brand}
footer={
<span className="flex items-center gap-2">
<LockKeyhole aria-hidden="true" className="size-3.5 shrink-0" />
Every sign-in is verified with a second factor.
</span>
}
key={run}
onComplete={restart}
onSendCode={sendCode}
onSignIn={signIn}
onVerify={verify}
resendSeconds={s.resendSeconds}
/>
<p className="text-muted-foreground text-xs">
Demo: any email and password, any six digits. “wrong” and 000000 show
the errors.
</p>
</div>
);
}