Back
JB Better Auth UI
Complete authentication system with sign-in, sign-up, email verification, password reset, social auth (Google & GitHub), and session management. Built with Better Auth, Prisma, and Resend.
Next.jsAuthentication
What's Included
Sign In & Sign Up Forms
Email OTP Verification
Forgot & Reset Password
Change Password
Social Auth (Google & GitHub)
Session Management
Protected Routes Middleware
User Profile Component
Logout Button
Dark Mode Support
Installation
terminal
$ pnpm dlx shadcn@latest add https://better-auth-ui.desishub.com/r/auth-components.jsonHow to Use
1
Install the component
Run the shadcn CLI to add the auth components to your project.
pnpm dlx shadcn@latest add https://better-auth-ui.desishub.com/r/auth-components.json2
Configure environment variables
Add your database connection, Better Auth secret, email (Resend), and OAuth provider credentials.
DATABASE_URL="postgresql://..."
BETTER_AUTH_SECRET="your-secret"
RESEND_API_KEY="re_..."
GOOGLE_CLIENT_ID="..."
GOOGLE_CLIENT_SECRET="..."
GITHUB_CLIENT_ID="..."
GITHUB_CLIENT_SECRET="..."3
Set up Prisma & database
Run migrations to set up the auth tables in your database.
npx prisma migrate dev --name init
npx prisma generate4
Use auth components
Import and use the auth components in your pages.
import { SignIn } from '@/components/auth/sign-in'
import { SignUp } from '@/components/auth/sign-up'
// Sign In page
export default function SignInPage() {
return <SignIn />
}Free
Open source component
Free to use · MIT License
CategoryAuthentication
PlatformsNext.js
Features10
Resources