Sign in, sign up and verify-code forms: server errors read out as alerts, a password meter that says what is missing, a one-time code with paste and SMS autofill. Your provider logos, not ours. Part of the Layro System: layro.vercel.app
import * as React from "react";
import { AuthCard, LoginForm, SignupForm, VerifyCodeForm } from "@/components/ui/auth-forms-signin-signup";
/* The whole sign-in flow. Sign in fails on purpose so you can see the error
read out as an alert. Sign up rates the password as you type and says
what is missing. Verify accepts 123456; paste works in any box, and the
phone offers the code from the SMS. */
const wait = (ms: number) => new Promise<void>((r) => setTimeout(r, ms));
type Step = "login" | "signup" | "verify";
export default function AuthDemo() {
const [step, setStep] = React.useState<Step>("login");
return (
<div className="flex min-h-screen w-full flex-col items-center justify-center gap-5 bg-background p-6">
<div role="group" aria-label="Screen" className="inline-flex rounded-[10px] [corner-shape:squircle] bg-muted p-0.5">
{(["login", "signup", "verify"] as Step[]).map((s) => (
<button
key={s}
type="button"
aria-pressed={step === s}
onClick={() => setStep(s)}
className={`h-8 rounded-[8px] [corner-shape:squircle] px-3 text-[12.5px] font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring ${step === s ? "bg-background shadow-sm" : "text-foreground/70 hover:text-foreground"}`}
>
{s === "login" ? "Sign in" : s === "signup" ? "Sign up" : "Verify"}
</button>
))}
</div>
{step === "login" && (
<AuthCard title="Welcome back" description="Sign in to your workspace">
<LoginForm forgotHref="#" signupHref="#" onSubmit={async () => { await wait(700); throw new Error("That email and password don't match. Try again or reset your password."); }} />
</AuthCard>
)}
{step === "signup" && (
<AuthCard title="Create your account" description="Free for 14 days, no card">
<SignupForm termsHref="#" privacyHref="#" loginHref="#" onSubmit={async () => { await wait(700); setStep("verify"); }} />
</AuthCard>
)}
{step === "verify" && (
<AuthCard title="Check your email" description="One more step">
<VerifyCodeForm destination="maya@northwind.studio" onVerify={async (c) => { await wait(600); if (c !== "123456") throw new Error("That code is not right. Check the latest email."); }} onResend={() => wait(400)} />
</AuthCard>
)}
</div>
);
}
Part of Layro System — browse the full library on 21st.dev.