Back to components
Authentication component

JB Better Auth UI

Production-ready authentication — sign-in, sign-up, OAuth, password reset.

Read full guideBrowse all components

Install

$ Run in your project root
pnpm dlx shadcn@latest add https://better-auth-ui.desishub.com/r/auth-components.json

What it does

  • 8 auth components (SignIn, SignUp, VerifyEmail, ForgetPassword, ResetPassword, ChangePassword, Profile, LogoutButton)
  • OTP-based email verification and password reset
  • Includes Prisma schema, validation schemas, API route handlers
  • OAuth integration with Google and GitHub
  • Email templates and env var configuration

When to use

Use it

Every project that needs authentication. This is the default auth solution.

Skip it

Non-PostgreSQL databases, or projects needing custom auth logic outside this structure.

Prerequisites

  • Next.js 16 + shadcn/ui
  • PostgreSQL (Neon / Supabase)
  • Resend account

Environment variables

NameDescription
BETTER_AUTH_SECRETRandom 32+ char string
BETTER_AUTH_URLFull app URL (e.g. http://localhost:3000)
DATABASE_URLPostgreSQL connection string
RESEND_FROM_EMAILVerified sender (e.g. noreply@yourdomain.com)
RESEND_API_KEYFrom Resend dashboard
GOOGLE_CLIENT_IDOptional — Google OAuth
GOOGLE_CLIENT_SECRETOptional — Google OAuth
GITHUB_CLIENT_IDOptional — GitHub OAuth
GITHUB_CLIENT_SECRETOptional — GitHub OAuth

Files & routes added

  • /auth/sign-in
  • /auth/sign-up
  • /auth/verify-email
  • /auth/forgot-password
  • /auth/reset-password
  • /auth/change-password
  • /auth/profile
  • /dashboard
  • /api/auth/[...all]/route.ts
  • Prisma schema additions