Auth Sections

Authentication sections provide complete, accessible forms for the flows every app needs: signing in, signing up, resetting a password, and verifying an identity. Every form is built with react-hook-form and zod validation and never makes a network request on its own.

Component Variants

Usage

import {
  LoginForm,
  SignupForm,
  ForgotPasswordForm,
  ResetPasswordForm,
  OTPVerificationForm,
  AuthSplit,
} from '@/components/ui/auth';

// Login Form
<LoginForm
  variant="card" // 'card' | 'plain'
  onSubmit={async (values) => console.log(values)}
  onGoogleSignIn={() => console.log('google')}
  onGithubSignIn={() => console.log('github')}
  forgotPasswordHref="/forgot-password"
  signupHref="/signup"
/>

// Signup Form (includes password strength meter)
<SignupForm
  onSubmit={async (values) => console.log(values)}
  termsHref="/terms"
  privacyHref="/privacy"
/>

// Forgot Password Form (shows a success state after submit)
<ForgotPasswordForm onSubmit={async (values) => console.log(values)} />

// Reset Password Form (validates password + confirmation match)
<ResetPasswordForm onSubmit={async (values) => console.log(values)} />

// OTP Verification Form
<OTPVerificationForm
  length={6}
  destination="jane@example.com"
  onSubmit={async (code) => console.log(code)}
  onResend={async () => console.log('resend')}
  resendCooldownSeconds={30}
/>

// Auth Split layout wrapper
<AuthSplit
  title="Build faster with TypeScript UI"
  description="A production-ready component library."
  testimonial={{ quote: 'Great library!', author: 'Jane Doe', role: 'CTO' }}
>
  <LoginForm variant="plain" />
</AuthSplit>

Props Reference

LoginForm

SignupForm

ForgotPasswordForm

ResetPasswordForm

OTPVerificationForm

AuthSplit