Better Auth UI

Comprehensive Sign In form with support for email/password, social providers, and passkeys.

The <SignInForm /> component provides a complete sign-in experience, supporting multiple authentication methods and handling validation out of the box.

Installation

pnpm dlx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/auth.json

npx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/auth.json

yarn dlx shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/auth.json

bun x shadcn@latest add https://stackproviders.github.io/better-auth-ui/r/auth.json

Usage

import { SignInForm } from "@/components/auth/forms/sign-in-form";

export default function SignInPage() {
  return (
    <div className="flex justify-center items-center min-vh-100">
      <SignInForm />
    </div>
  );
}

Reference

Prop	Type	Default
`passwordValidation?`	`PasswordValidation`	-
`setIsSubmitting?`	`((isSubmitting: boolean) => void)`	-
`redirectTo?`	`string`	-
`localization`	`Partial<Partial<{ INVALID_USERNAME_OR_PASSWORD: string; EMAIL_NOT_VERIFIED: string; UNEXPECTED_ERROR: string; USERNAME_IS_ALREADY_TAKEN: string; USERNAME_TOO_SHORT: string; USERNAME_TOO_LONG: string; ... 358 more ...; UNKNOWN: string; }>>`	-
`isSubmitting?`	`boolean`	-
`classNames?`	`AuthFormClassNames`	-
`className?`	`string`	-

Examples

Custom Redirect

<SignInForm redirectTo="/dashboard" />

With Custom Localization

<SignInForm
  localization={{
    SIGN_IN_WITH: "Connect with",
    EMAIL_ADDRESS: "Your Email",
  }}
/>