Install all auth components with a single shadcn CLI command
Pre-configured for Better Auth with email OTP and social providers
Built with shadcn/ui - easily customize to match your brand
Written in TypeScript with Zod validation schemas
8 production-ready components for complete authentication flows
<SignIn />Email/password login with Google & GitHub OAuth
<SignUp />User registration with email verification
<VerifyEmail />6-digit OTP verification with resend
<ForgetPassword />Password reset request form
<ResetPassword />Set new password with token
<ChangePassword />Update password when logged in
<Profile />User profile management
<LogoutButton />Configurable logout button
Make sure you have a Next.js project with shadcn/ui initialized:
npx shadcn@latest initRun the following command to install all auth components:
npx shadcn@latest add https://better-auth-ui.desishub.com/r/auth-components.jsonCopy the generated .env.example to .env.local and fill in your values:
cp .env.example .env.local
Generate the Prisma client and run migrations:
pnpm prisma generate
pnpm prisma migrate dev --name init
Create your Better Auth server configuration:
// lib/auth.ts
import { betterAuth } from "better-auth";
import { emailOTP } from "better-auth/plugins";
export const auth = betterAuth({
database: prismaAdapter(prisma, { provider: "postgresql" }),
emailAndPassword: {
enabled: true,
requireEmailVerification: true,
},
plugins: [
emailOTP({
sendVerificationOTP: async ({ email, otp }) => {
// Send email with OTP
},
}),
],
});Auth pages are automatically created in app/(auth)/auth/. You can also import components directly:
import { SignIn, SignUp, Profile, LogoutButton } from "@/components/auth";
// Use in your pages
<SignIn />
<SignUp />
<Profile />
<LogoutButton />The following packages will be installed automatically:
better-authzodreact-hook-form@hookform/resolverssonnerlucide-reactinput-otp