{"content":"# Better Auth Components\n\nAdd UI components and pages for authentication flows including sign in, sign up, forgot password, reset password, and email verification.\n\n### Add Toaster to layout\n\nUpdate your layout to include the toast notification provider:\n\n```tsx\n// src/app/layout.tsx\nimport { Toaster } from \"@/components/ui/sonner\";\n\nexport default function RootLayout({\n children,\n}: {\n children: React.ReactNode;\n}) {\n return (\n \n \n {children}\n \n \n \n );\n}\n```\n\n---\n\n## UI Components\n\n### Sign In Component\n\nThis component handles email/password sign-in with password visibility toggle and input icons. When `requireEmailVerification` is enabled (see [Better Auth Emails](/recipes/better-auth-emails)), it includes an inline resend verification option.\n\n```tsx\n// src/components/auth/sign-in.tsx\n\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport {\n Card,\n CardContent,\n CardHeader,\n CardTitle,\n CardDescription,\n CardFooter,\n} from \"@/components/ui/card\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport { useState } from \"react\";\nimport {\n Loader2,\n Mail,\n Lock,\n Eye,\n EyeOff,\n AlertCircle,\n Send,\n} from \"lucide-react\";\nimport { signIn, authClient } from \"@/lib/auth/client\";\nimport Link from \"next/link\";\nimport { toast } from \"sonner\";\nimport { useRouter } from \"next/navigation\";\n\nexport function SignIn() {\n const [email, setEmail] = useState(\"\");\n const [password, setPassword] = useState(\"\");\n const [showPassword, setShowPassword] = useState(false);\n const [loading, setLoading] = useState(false);\n const [rememberMe, setRememberMe] = useState(false);\n const [emailNotVerified, setEmailNotVerified] = useState(false);\n const [resendLoading, setResendLoading] = useState(false);\n const router = useRouter();\n\n const handleResendVerification = async () => {\n if (!email) {\n toast.error(\"Please enter your email address\");\n return;\n }\n\n setResendLoading(true);\n try {\n const { error } = await authClient.sendVerificationEmail({\n email,\n callbackURL: \"/sign-in\",\n });\n\n if (error) {\n toast.error(error.message);\n return;\n }\n\n toast.success(\"Verification email sent! Please check your inbox.\");\n } finally {\n setResendLoading(false);\n }\n };\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setEmailNotVerified(false);\n\n if (!email || !password) {\n toast.error(\"Please fill in all fields\");\n return;\n }\n\n await signIn.email(\n {\n email,\n password,\n rememberMe,\n callbackURL: \"/chats\",\n },\n {\n onRequest: () => setLoading(true),\n onResponse: () => setLoading(false),\n onError: (ctx) => {\n const errorMessage = ctx.error.message.toLowerCase();\n if (\n errorMessage.includes(\"email not verified\") ||\n errorMessage.includes(\"verify your email\")\n ) {\n setEmailNotVerified(true);\n } else {\n toast.error(ctx.error.message);\n }\n },\n onSuccess: () => router.push(\"/chats\"),\n },\n );\n };\n\n return (\n \n \n Welcome back\n \n Enter your credentials to access your account\n \n \n \n {emailNotVerified && (\n
\n
\n \n
\n

Email not verified

\n

\n Please verify your email address before signing in. Check your\n inbox for a verification link.\n

\n \n {resendLoading ? (\n \n ) : (\n \n )}\n Resend verification email\n \n
\n
\n
\n )}\n
\n
\n \n
\n \n setEmail(e.target.value)}\n autoComplete=\"email\"\n required\n />\n
\n
\n
\n
\n \n \n Forgot password?\n \n
\n
\n \n setPassword(e.target.value)}\n autoComplete=\"current-password\"\n required\n />\n setShowPassword(!showPassword)}\n className=\"absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground\"\n >\n {showPassword ? (\n \n ) : (\n \n )}\n \n
\n
\n
\n setRememberMe(checked === true)}\n />\n \n
\n \n
\n \n \n

\n Don't have an account?{\" \"}\n \n Create account\n \n

\n \n \n );\n}\n```\n\n### Sign Up Component\n\n```tsx\n// src/components/auth/sign-up.tsx\n\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { useState } from \"react\";\nimport Image from \"next/image\";\nimport {\n Loader2,\n X,\n Mail,\n Lock,\n User,\n Eye,\n EyeOff,\n Upload,\n} from \"lucide-react\";\nimport { signUp } from \"@/lib/auth/client\";\nimport { toast } from \"sonner\";\nimport { useRouter } from \"next/navigation\";\nimport Link from \"next/link\";\n\nexport function SignUp() {\n const [firstName, setFirstName] = useState(\"\");\n const [lastName, setLastName] = useState(\"\");\n const [email, setEmail] = useState(\"\");\n const [password, setPassword] = useState(\"\");\n const [passwordConfirmation, setPasswordConfirmation] = useState(\"\");\n const [showPassword, setShowPassword] = useState(false);\n const [showConfirmPassword, setShowConfirmPassword] = useState(false);\n const [image, setImage] = useState(null);\n const [imagePreview, setImagePreview] = useState(null);\n const [loading, setLoading] = useState(false);\n const [success, setSuccess] = useState(false);\n const router = useRouter();\n\n const handleImageChange = (e: React.ChangeEvent) => {\n const file = e.target.files?.[0];\n if (file) {\n setImage(file);\n const reader = new FileReader();\n reader.onloadend = () => {\n setImagePreview(reader.result as string);\n };\n reader.readAsDataURL(file);\n }\n };\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n\n if (!firstName || !lastName || !email || !password) {\n toast.error(\"Please fill in all required fields\");\n return;\n }\n\n if (password.length < 8) {\n toast.error(\"Password must be at least 8 characters\");\n return;\n }\n\n if (password !== passwordConfirmation) {\n toast.error(\"Passwords do not match\");\n return;\n }\n\n await signUp.email(\n {\n email,\n password,\n name: `${firstName} ${lastName}`.trim(),\n image: image ? await convertImageToBase64(image) : undefined,\n },\n {\n onRequest: () => setLoading(true),\n onResponse: () => setLoading(false),\n onError: (ctx) => {\n toast.error(ctx.error.message);\n },\n onSuccess: () => {\n setSuccess(true);\n toast.success(\"Account created! Please check your email to verify.\");\n },\n },\n );\n };\n\n if (success) {\n return (\n \n \n
\n \n
\n Check your email\n \n We've sent a verification link to {email}\n \n \n \n

\n Click the link in your email to verify your account and start using\n the app.\n

\n \n \n router.push(\"/sign-in\")}\n >\n Back to sign in\n \n \n \n );\n }\n\n return (\n \n \n Create an account\n Enter your details to get started\n \n \n
\n
\n
\n \n
\n \n setFirstName(e.target.value)}\n required\n />\n
\n
\n
\n \n setLastName(e.target.value)}\n required\n />\n
\n
\n
\n \n
\n \n setEmail(e.target.value)}\n autoComplete=\"email\"\n required\n />\n
\n
\n
\n \n
\n \n setPassword(e.target.value)}\n autoComplete=\"new-password\"\n required\n />\n setShowPassword(!showPassword)}\n className=\"absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground\"\n >\n {showPassword ? (\n \n ) : (\n \n )}\n \n
\n
\n
\n \n
\n \n setPasswordConfirmation(e.target.value)}\n autoComplete=\"new-password\"\n required\n />\n setShowConfirmPassword(!showConfirmPassword)}\n className=\"absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground\"\n >\n {showConfirmPassword ? (\n \n ) : (\n \n )}\n \n
\n
\n
\n \n
\n {imagePreview ? (\n
\n \n
\n ) : (\n
\n \n
\n )}\n
\n \n {imagePreview && (\n {\n setImage(null);\n setImagePreview(null);\n }}\n >\n \n \n )}\n
\n
\n
\n \n
\n \n \n

\n Already have an account?{\" \"}\n \n Sign in\n \n

\n \n \n );\n}\n\nasync function convertImageToBase64(file: File): Promise {\n return new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onloadend = () => resolve(reader.result as string);\n reader.onerror = reject;\n reader.readAsDataURL(file);\n });\n}\n```\n\n### Forgot Password Component\n\n```tsx\n// src/components/auth/forgot-password.tsx\n\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { useState } from \"react\";\nimport { Loader2, Mail, ArrowLeft, CheckCircle } from \"lucide-react\";\nimport { authClient } from \"@/lib/auth/client\";\nimport { toast } from \"sonner\";\nimport Link from \"next/link\";\n\nexport function ForgotPassword() {\n const [email, setEmail] = useState(\"\");\n const [loading, setLoading] = useState(false);\n const [success, setSuccess] = useState(false);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n\n if (!email) {\n toast.error(\"Please enter your email address\");\n return;\n }\n\n setLoading(true);\n try {\n const { error } = await authClient.requestPasswordReset({\n email,\n redirectTo: \"/reset-password\",\n });\n\n if (error) {\n toast.error(error.message);\n return;\n }\n\n setSuccess(true);\n } finally {\n setLoading(false);\n }\n };\n\n if (success) {\n return (\n \n \n
\n \n
\n Check your email\n \n If an account exists for {email}, we've sent\n password reset instructions.\n \n \n \n

\n Didn't receive the email? Check your spam folder or try again\n with a different email address.\n

\n \n \n setSuccess(false)}\n >\n Try another email\n \n \n \n \n \n \n );\n }\n\n return (\n \n \n Forgot password?\n \n Enter your email and we'll send you a link to reset your password\n \n \n \n
\n
\n \n
\n \n setEmail(e.target.value)}\n autoComplete=\"email\"\n required\n />\n
\n
\n \n
\n \n \n \n \n \n \n \n );\n}\n```\n\n### Reset Password Component\n\n```tsx\n// src/components/auth/reset-password.tsx\n\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { useState } from \"react\";\nimport { Loader2, Lock, Eye, EyeOff, CheckCircle, XCircle } from \"lucide-react\";\nimport { authClient } from \"@/lib/auth/client\";\nimport { toast } from \"sonner\";\nimport Link from \"next/link\";\nimport { useRouter } from \"next/navigation\";\n\ntype ResetPasswordProps = {\n token: string | null;\n error: string | null;\n};\n\nexport function ResetPassword({ token, error }: ResetPasswordProps) {\n const [password, setPassword] = useState(\"\");\n const [confirmPassword, setConfirmPassword] = useState(\"\");\n const [showPassword, setShowPassword] = useState(false);\n const [showConfirmPassword, setShowConfirmPassword] = useState(false);\n const [loading, setLoading] = useState(false);\n const [success, setSuccess] = useState(false);\n const router = useRouter();\n\n if (error || !token) {\n return (\n \n \n
\n \n
\n Invalid link\n \n {error === \"INVALID_TOKEN\"\n ? \"This password reset link is invalid or has expired.\"\n : \"Something went wrong. Please try again.\"}\n \n \n \n \n \n \n \n \n \n \n \n );\n }\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n\n if (password.length < 8) {\n toast.error(\"Password must be at least 8 characters\");\n return;\n }\n\n if (password !== confirmPassword) {\n toast.error(\"Passwords do not match\");\n return;\n }\n\n setLoading(true);\n try {\n const { error } = await authClient.resetPassword({\n newPassword: password,\n token,\n });\n\n if (error) {\n toast.error(error.message);\n return;\n }\n\n setSuccess(true);\n toast.success(\"Password reset successfully!\");\n } finally {\n setLoading(false);\n }\n };\n\n if (success) {\n return (\n \n \n
\n \n
\n Password reset!\n \n Your password has been successfully reset. You can now sign in with\n your new password.\n \n \n \n \n \n \n );\n }\n\n return (\n \n \n Set new password\n Enter your new password below\n \n \n
\n
\n \n
\n \n setPassword(e.target.value)}\n autoComplete=\"new-password\"\n required\n />\n setShowPassword(!showPassword)}\n className=\"absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground\"\n >\n {showPassword ? (\n \n ) : (\n \n )}\n \n
\n
\n
\n \n
\n \n setConfirmPassword(e.target.value)}\n autoComplete=\"new-password\"\n required\n />\n setShowConfirmPassword(!showConfirmPassword)}\n className=\"absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground\"\n >\n {showConfirmPassword ? (\n \n ) : (\n \n )}\n \n
\n
\n \n
\n \n \n );\n}\n```\n\n### Verify Email Result Component\n\n```tsx\n// src/components/auth/verify-email-result.tsx\n\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\";\nimport { CheckCircle, XCircle, Mail } from \"lucide-react\";\nimport Link from \"next/link\";\n\ntype VerifyEmailResultProps = {\n success: boolean;\n error?: string;\n};\n\nexport function VerifyEmailResult({ success, error }: VerifyEmailResultProps) {\n if (success) {\n return (\n \n \n
\n \n
\n Email verified!\n \n Your email address has been successfully verified. You can now sign\n in to your account.\n \n \n \n \n \n \n \n \n );\n }\n\n const errorMessage = (() => {\n switch (error) {\n case \"INVALID_TOKEN\":\n return \"This verification link is invalid or has expired.\";\n case \"NO_TOKEN\":\n return \"No verification token was provided.\";\n case \"VERIFICATION_FAILED\":\n return \"Email verification failed. Please try again.\";\n default:\n return \"Something went wrong during verification.\";\n }\n })();\n\n return (\n \n \n
\n \n
\n \n Verification failed\n \n {errorMessage}\n \n \n

\n If your link has expired, you can request a new verification email\n after signing in.\n

\n \n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n---\n\n## Auth Pages\n\nCreate pages for all auth flows with server-side session checks.\n\n### Sign In Page\n\n```tsx\n// src/app/sign-in/page.tsx\nimport type { Metadata } from \"next\";\nimport { redirect } from \"next/navigation\";\nimport { headers } from \"next/headers\";\nimport { auth } from \"@/lib/auth/server\";\nimport { SignIn } from \"@/components/auth/sign-in\";\n\nexport const metadata: Metadata = {\n title: \"Sign In\",\n description: \"Sign in to your account.\",\n};\n\nexport default async function SignInPage() {\n const session = await auth.api.getSession({\n headers: await headers(),\n });\n\n if (session) {\n redirect(\"/chats\");\n }\n\n return (\n
\n \n
\n );\n}\n```\n\n### Sign Up Page\n\n```tsx\n// src/app/sign-up/page.tsx\nimport type { Metadata } from \"next\";\nimport { redirect } from \"next/navigation\";\nimport { headers } from \"next/headers\";\nimport { auth } from \"@/lib/auth/server\";\nimport { SignUp } from \"@/components/auth/sign-up\";\n\nexport const metadata: Metadata = {\n title: \"Create Account\",\n description: \"Create a free account to get started.\",\n};\n\nexport default async function SignUpPage() {\n const session = await auth.api.getSession({\n headers: await headers(),\n });\n\n if (session) {\n redirect(\"/chats\");\n }\n\n return (\n
\n \n
\n );\n}\n```\n\n### Forgot Password Page\n\n```tsx\n// src/app/forgot-password/page.tsx\nimport type { Metadata } from \"next\";\nimport { redirect } from \"next/navigation\";\nimport { headers } from \"next/headers\";\nimport { auth } from \"@/lib/auth/server\";\nimport { ForgotPassword } from \"@/components/auth/forgot-password\";\n\nexport const metadata: Metadata = {\n title: \"Forgot Password\",\n description:\n \"Reset your password by entering your email address. We'll send you a link to create a new one.\",\n};\n\nexport default async function ForgotPasswordPage() {\n const session = await auth.api.getSession({\n headers: await headers(),\n });\n\n if (session) {\n redirect(\"/chats\");\n }\n\n return (\n
\n \n
\n );\n}\n```\n\n### Reset Password Page\n\n```tsx\n// src/app/reset-password/page.tsx\nimport type { Metadata } from \"next\";\nimport { redirect } from \"next/navigation\";\nimport { headers } from \"next/headers\";\nimport { auth } from \"@/lib/auth/server\";\nimport { ResetPassword } from \"@/components/auth/reset-password\";\n\nexport const metadata: Metadata = {\n title: \"Reset Password\",\n description: \"Create a new password for your account.\",\n};\n\ntype SearchParams = Promise<{ token?: string; error?: string }>;\n\nexport default async function ResetPasswordPage({\n searchParams,\n}: {\n searchParams: SearchParams;\n}) {\n const session = await auth.api.getSession({\n headers: await headers(),\n });\n\n if (session) {\n redirect(\"/chats\");\n }\n\n const { token, error } = await searchParams;\n\n return (\n
\n \n
\n );\n}\n```\n\n### Verify Email Page\n\n```tsx\n// src/app/verify-email/page.tsx\nimport type { Metadata } from \"next\";\nimport { headers } from \"next/headers\";\nimport { auth } from \"@/lib/auth/server\";\nimport { VerifyEmailResult } from \"@/components/auth/verify-email-result\";\n\nexport const metadata: Metadata = {\n title: \"Verify Email\",\n description: \"Confirm your email address to complete your account setup.\",\n};\n\ntype SearchParams = Promise<{ token?: string; error?: string }>;\n\nexport default async function VerifyEmailPage({\n searchParams,\n}: {\n searchParams: SearchParams;\n}) {\n const { token, error } = await searchParams;\n\n let verificationResult: { success: boolean; error?: string } = {\n success: false,\n };\n\n if (error) {\n verificationResult = { success: false, error };\n } else if (token) {\n try {\n const result = await auth.api.verifyEmail({\n query: { token },\n headers: await headers(),\n });\n verificationResult = { success: result?.status === true };\n } catch {\n verificationResult = { success: false, error: \"VERIFICATION_FAILED\" };\n }\n } else {\n verificationResult = { success: false, error: \"NO_TOKEN\" };\n }\n\n return (\n
\n \n
\n );\n}\n```\n\n---\n\n## Extending with OAuth Providers\n\nTo add social sign-in buttons (like GitHub, Google, or Vercel), you can extend the SignIn and SignUp components with a `showSocialSignIn` prop:\n\n```tsx\n// Extended SignIn with optional OAuth\nexport function SignIn({\n showVercelSignIn = false,\n}: {\n showVercelSignIn?: boolean;\n} = {}) {\n // ... existing state\n\n const handleVercelSignIn = async () => {\n await signIn.social(\n { provider: \"vercel\", callbackURL: \"/chats\" },\n {\n onRequest: () => setSocialLoading(true),\n onResponse: () => setSocialLoading(false),\n onError: (ctx) => toast.error(ctx.error.message),\n },\n );\n };\n\n return (\n \n {/* Add OAuth button before the form */}\n {showVercelSignIn && (\n <>\n \n
\n
\n \n
\n
\n \n Or continue with email\n \n
\n
\n \n )}\n {/* Rest of the form */}\n \n );\n}\n```\n\nUse with a feature flag to conditionally show OAuth based on environment configuration:\n\n```tsx\n// src/app/sign-in/page.tsx\nimport { vercelSignInFlag } from \"@/lib/auth/flags\";\n\nexport default async function SignInPage() {\n const showVercelSignIn = await vercelSignInFlag();\n\n return ;\n}\n```\n\nSee the [Feature Flags](/recipes/feature-flags-setup) recipe for setting up the Flags SDK.\n\n---\n\n## File Structure\n\n```\nsrc/components/auth/\n sign-in.tsx\n sign-up.tsx\n forgot-password.tsx\n reset-password.tsx\n verify-email-result.tsx\n\nsrc/app/\n sign-in/page.tsx\n sign-up/page.tsx\n forgot-password/page.tsx\n reset-password/page.tsx\n verify-email/page.tsx\n```"}