Authentication

A complete set of auth flow templates — login, signup, password recovery, two-factor, social login, and magic link. Copy the demo, wire up your own backend.

Login

A classic login form with email and password fields, remember-me option, and links to forgot password and signup flows.

Welcome back

Sign in to your account to continue

Don't have an account?

login-form.tsx
tsx
<div className="max-w-sm mx-auto space-y-6">
  <div className="text-center space-y-2">
    <Logo />
    <h3>Welcome back</h3>
    <p>Sign in to your account to continue</p>
  </div>

  <Input icon={<MailIcon />} type="email" placeholder="Email" />
  <Input icon={<LockIcon />} type="password" placeholder="Password" />

  <div className="flex justify-between">
    <Checkbox label="Remember me" />
    <Link href="/forgot-password">Forgot password?</Link>
  </div>

  <Button>Sign in</Button>
  <p>Don't have an account? <Link href="/signup">Sign up</Link></p>
</div>

Sign Up

Registration form with name, email, password confirmation, and terms acceptance. Validates input before submission.

Create an account

Get started with a free account

I agree to the and

Already have an account?

signup-form.tsx
tsx
<div className="max-w-sm mx-auto space-y-6">
  <Input icon={<UserIcon />} placeholder="Full name" />
  <Input icon={<MailIcon />} type="email" placeholder="Email" />
  <Input icon={<LockIcon />} type="password" placeholder="Password" />
  <Input icon={<LockIcon />} type="password" placeholder="Confirm password" />

  <Checkbox label="I agree to the Terms and Privacy Policy" />
  <Button>Create account</Button>
</div>

Forgot Password

A simple form that collects the user's email to send a password reset link. Includes reassuring copy and a back-to-login link.

Forgot your password?

No worries. Enter the email address associated with your account and we'll send you a link to reset it.

forgot-password.tsx
tsx
<div className="max-w-sm mx-auto space-y-6">
  <div className="text-center">
    <MailIcon size={20} />
    <h3>Forgot your password?</h3>
    <p>We'll send you a link to reset it.</p>
  </div>
  <Input icon={<MailIcon />} type="email" placeholder="Email" />
  <Button>Send reset link</Button>
  <Link href="/login">Back to sign in</Link>
</div>

Reset Password

New password and confirmation form. Users arrive here after clicking the reset link from their email.

Set new password

Your new password must be different from previously used passwords.

reset-password.tsx
tsx
<div className="max-w-sm mx-auto space-y-6">
  <div className="text-center">
    <LockIcon size={20} />
    <h3>Set new password</h3>
  </div>
  <Input type="password" placeholder="New password" />
  <Input type="password" placeholder="Confirm password" />
  <Button>Reset password</Button>
</div>

Two-Factor Authentication

Six individual digit inputs for entering a TOTP code. Auto-advances focus on input and supports backspace navigation between fields.

Two-factor authentication

Enter the 6-digit code from your authenticator app

Didn't receive a code?

two-factor.tsx
tsx
const [digits, setDigits] = useState(['', '', '', '', '', '']);

const handleChange = (index: number, value: string) => {
  const newDigits = [...digits];
  newDigits[index] = value;
  setDigits(newDigits);
  // Auto-advance to next input
  if (value && index < 5) {
    document.getElementById(`otp-${index + 1}`)?.focus();
  }
};

<div className="flex gap-2.5 justify-center">
  {digits.map((digit, i) => (
    <input
      key={i}
      id={`otp-${i}`}
      maxLength={1}
      value={digit}
      onChange={(e) => handleChange(i, e.target.value)}
      className="w-11 h-13 text-center text-lg font-semibold ..."
    />
  ))}
</div>

Social Login

OAuth provider buttons for Google, GitHub, and Apple. Includes a divider and email fallback option for maximum flexibility.

Sign in

Choose your preferred sign-in method

or
social-login.tsx
tsx
<div className="space-y-4">
  <Button variant="secondary" icon={<GoogleIcon />}>
    Continue with Google
  </Button>
  <Button variant="secondary" icon={<GitHubIcon />}>
    Continue with GitHub
  </Button>
  <Button variant="secondary" icon={<AppleIcon />}>
    Continue with Apple
  </Button>

  <Divider>or</Divider>

  <Input type="email" placeholder="Email address" />
  <Button>Continue with email</Button>
</div>

Magic Link

Passwordless authentication via email. Users enter their address and receive a one-time sign-in link. Includes a success state with confirmation UI.

Sign in with magic link

No password needed. We'll email you a secure link to sign in.

magic-link.tsx
tsx
const [sent, setSent] = useState(false);

{!sent ? (
  <>
    <Input type="email" placeholder="Enter your email" />
    <Button onClick={() => setSent(true)}>Send magic link</Button>
  </>
) : (
  <div className="text-center">
    <CheckCircleIcon className="text-success-500" />
    <p>Check your email</p>
    <p>We sent a magic link to {email}</p>
    <button onClick={() => setSent(false)}>
      Use a different email
    </button>
  </div>
)}

Split Layout

A two-column layout with branding and illustration on the left, authentication form on the right. The left panel is hidden on mobile for responsive design.

Welcome back

Sign in to continue to your dashboard

or
split-layout.tsx
tsx
<div className="flex min-h-[400px]">
  {/* Left - Branding (hidden on mobile) */}
  <div className="hidden md:flex flex-1 bg-linear-to-br
    from-brand-500 to-brand-700 p-8 flex-col justify-between">
    <div>
      <Logo />
      <h3>Build something great</h3>
      <p>Access your dashboard and collaborate.</p>
    </div>
    <SocialProof count="2,400+ developers" />
  </div>

  {/* Right - Form */}
  <div className="flex-1 p-8 flex flex-col justify-center">
    <LoginForm />
    <Divider>or</Divider>
    <SocialButtons compact />
  </div>
</div>

Best Practices

Security and UX recommendations for building authentication flows that are both safe and user-friendly.

Security

  • Always hash passwords server-side (bcrypt, argon2)
  • Implement rate limiting on auth endpoints
  • Use CSRF tokens for form submissions
  • Enforce strong password requirements
  • Set secure, httpOnly cookies for sessions
  • Add brute-force protection with lockouts

User Experience

  • Show inline validation as users type
  • Provide clear error messages (not just "Invalid")
  • Support password visibility toggle
  • Auto-focus the first input on page load
  • Preserve form data on validation errors
  • Add loading states to prevent double submits

Related

Components commonly used in authentication page patterns.

Input

Text fields for forms

Button

Actions and submissions

Checkbox

Terms and remember me

Card

Container for auth forms