A modern, production-ready authentication template built with Next.js 15, Better Auth, Prisma ORM, and shadcn/ui components.
- 🔐 Complete Authentication Flow - Sign up, sign in, password reset
- 🎨 Modern UI - Beautiful dark theme with glassmorphism effects
- ⚡ Next.js 15 - Latest App Router with server actions
- 🗄️ Database Ready - SQLite with Prisma (easy to swap to PostgreSQL)
- 🔒 Better Auth - Secure authentication with session management
- 📱 Responsive Design - Works perfectly on all devices
- 🎯 TypeScript - Full type safety throughout
- 🎨 shadcn/ui - Professional UI components
- 🔄 Server Actions - Form handling with Zod validation
- Node.js 18+
- bun, yarn, or pnpm
git clone https://github.com/rajofearth/sunx.git
cd sunx
bun installcp .env.example .envUpdate .env with your configuration:
# Database (SQLite by default)
DATABASE_URL="file:./local.db"
# App URL (no trailing slash)
NEXT_PUBLIC_APP_URL="http://localhost:3000"# Generate Prisma client
bun run prisma:generate
# Push schema to database
bun run db:pushbun devOpen http://localhost:3000 in your browser.
src/
├── app/
│ ├── auth/
│ │ ├── page.tsx # Auth page (protected from logged-in users)
│ │ └── action.ts # Server actions for auth
│ ├── dashboard/
│ │ └── page.tsx # Protected dashboard
│ ├── forgot-password/
│ │ └── page.tsx # Password reset request
│ ├── reset-password/
│ │ └── page.tsx # Password reset form
│ ├── api/auth/[...all]/
│ │ └── route.ts # Better Auth API routes
│ ├── globals.css # Global styles & Tailwind
│ ├── layout.tsx # Root layout
│ └── page.tsx # Home page (redirects to auth/dashboard)
├── components/
│ ├── auth-client.tsx # Auth UI with tabs
│ ├── sign-in.tsx # Sign in form
│ ├── sign-up.tsx # Sign up form
│ ├── forgot-password-client.tsx # Forgot password UI
│ ├── reset-password-client.tsx # Reset password UI
│ └── ui/ # shadcn/ui components
├── lib/
│ ├── auth.ts # Better Auth configuration
│ ├── auth-client.ts # Client-side auth utilities
│ ├── action-helpers.ts # Server action utilities
│ ├── types.ts # Zod schemas
│ ├── prisma.ts # Prisma client
│ └── utils.ts # Utility functions
└── generated/
└── prisma/ # Generated Prisma client
The authentication is configured in src/lib/auth.ts:
export const auth = betterAuth({
emailAndPassword: {
enabled: true,
minPasswordLength: 8,
maxPasswordLength: 128,
async sendResetPassword({ user, url, token }, request) {
// TODO: Implement your email sending logic here
console.log(`Password reset email for ${user.email}: ${url}`);
},
},
database: prismaAdapter(prisma, {
provider: "sqlite",
}),
session: {
expiresIn: 60 * 60 * 24 * 7, // 7 days
},
plugins: [nextCookies()],
});The Prisma schema includes all necessary tables for Better Auth:
- User - User information and authentication data
- Session - User sessions for authentication
- Account - OAuth and credential accounts
- Verification - Email verification tokens
The template uses Tailwind CSS v4 with a custom dark theme. Customize by modifying:
src/app/globals.css- Global styles and CSS variables- Component-specific classes in the components
- The theme uses CSS variables for easy customization
To enable email functionality (password reset, verification), implement the email sending functions in src/lib/auth.ts:
async sendResetPassword({ user, url, token }, request) {
// Example with Resend
await fetch('https://api.resend.com/emails', {
method: 'POST',
headers: {
'Authorization': `Bearer ${process.env.RESEND_API_KEY}`,
'Content-Type': 'application/json',
},
body: JSON.stringify({
from: '[email protected]',
to: user.email,
subject: 'Reset your password',
html: `<a href="${url}">Reset Password</a>`,
}),
});
}Popular email providers:
- Resend - Developer-friendly email API
- SendGrid - Enterprise email service
- Postmark - Transactional email
- AWS SES - Amazon's email service
Set these in your production environment:
DATABASE_URL="your-production-database-url"
NEXT_PUBLIC_APP_URL="https://your-domain.com"For production, consider using PostgreSQL:
- Update
prisma/schema.prisma:
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}- Update the auth configuration:
database: prismaAdapter(prisma, {
provider: "postgresql",
}),- Deploy your database and run migrations:
npx prisma migrate deployThis template works with all major deployment platforms:
- Vercel - Recommended for Next.js apps
- Netlify - Great for static sites
- Railway - Easy database + app deployment
- Render - Simple deployment with PostgreSQL
- AWS/GCP/Azure - Enterprise deployments
bun dev # Start development server
bun run build # Build for production
bun run start # Start production server
bun run typecheck # TypeScript type checking
bun run prisma:generate # Generate Prisma client
bun run db:push # Push schema to database- New Pages: Add to
src/app/following the existing pattern - Components: Create in
src/components/with proper TypeScript - Server Actions: Use the
validatedActionhelper insrc/lib/action-helpers.ts - Database: Add models to
prisma/schema.prisma
- Password Hashing - Uses scrypt for secure password hashing
- Session Management - Secure session handling with expiration
- Input Validation - Zod schemas for all form inputs
- CSRF Protection - Built-in CSRF protection with Better Auth
- Rate Limiting - Configurable rate limiting for auth endpoints
- Type Safety - Full TypeScript coverage
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Next.js - The React framework
- Better Auth - Authentication library
- Prisma - Database toolkit
- shadcn/ui - UI components
- Tailwind CSS - CSS framework
Ready to build something amazing? 🚀
This template provides a solid foundation for any Next.js application requiring authentication. Just add your business logic and deploy!