🚀 SaaS Template

A production-ready SaaS starter template built with Next.js 16, featuring complete authentication, multi-tenancy, and modern UI components.

✨ Features

🔐 Authentication & Authorization

• Email/Password Authentication with email verification
• Social Login (GitHub OAuth)
• Two-Factor Authentication (2FA) for enhanced security
• Email OTP Verification for passwordless login
• Password Reset with secure token-based flow
• Role-Based Access Control with admin capabilities
• Session Management with secure cookies

🏢 Multi-Tenancy

• Organization Management with member invitations
• Role-Based Permissions within organizations
• Member Management with customizable roles
• Organization Switching for users in multiple organizations

🎨 UI Components

• ShadCN UI premium feel components
• Tailwind CSS 4 for styling
• Framer Motion for smooth animations
• Dark Mode Ready (easily configurable)
• Custom components including:
  • Forms with validation
  • Input groups and OTP inputs
  • Buttons, cards, and alerts
  • Tooltips and separators

📧 Email System

• React Email for beautiful email templates
• Resend integration for reliable delivery
• Pre-built templates:
  • OTP verification emails
  • Welcome emails
  • Password reset emails

🗄️ Database

• PostgreSQL as the primary database
• Drizzle ORM for type-safe database queries
• Pre-configured schema including:
  • Users with roles and bans
  • Organizations and members
  • Sessions and two-factor
  • Invitations and verifications
  • Accounts for social login

🛠️ Developer Experience

• TypeScript for type safety
• Biome for fast linting and formatting
• Husky & Lint-Staged for pre-commit hooks
• Drizzle Studio for database GUI
• Hot reload and fast refresh
• Organized project structure

📋 Prerequisites

• Node.js 20+ or Bun (recommended)
• PostgreSQL database
• Resend account (for emails)
• GitHub OAuth App (optional, for social login)

🚀 Getting Started

1. Clone the Repository

git clone <your-repo-url>
cd SaaS-Template

2. Install Dependencies

bun install
# or
npm install

3. Configure Environment Variables

Create a .env.local file in the root directory:

# Database
DATABASE_URL=postgresql://user:password@localhost:5432/saas

# App Configuration
NEXT_PUBLIC_PROJECT_NAME=Your SaaS Name
BETTER_AUTH_SECRET=your-secret-key-here # Generate with: openssl rand -base64 32
BETTER_AUTH_URL=http://localhost:3000

# Email (Resend)
RESEND_API_KEY=re_xxxxxxxxxxxxxxxx
RESEND_FROM_EMAIL=[email protected]

# OAuth (Optional)
GITHUB_CLIENT_ID=your-github-client-id
GITHUB_CLIENT_SECRET=your-github-client-secret

4. Set Up the Database

# Generate migrations
bun run db:generate

# Run migrations
bun run db:migrate

# Or push schema directly (development)
bun run db:push

5. Run the Development Server

bun dev

Open http://localhost:3000 to see your application.

📜 Available Scripts

Command	Description
bun dev	Start development server
bun build	Build for production
bun start	Start production server
bun run db:generate	Generate database migrations
bun run db:migrate	Run database migrations
bun run db:push	Push schema to database (dev)
bun run db:studio	Open Drizzle Studio GUI
bun run lint	Check code quality
bun run lint:fix	Fix code quality issues
bun run email	Preview email templates

📁 Project Structure

src/
├── app/                      # Next.js App Router
│   ├── (auth)/              # Authentication routes
│   │   ├── login/
│   │   ├── register/
│   │   ├── verify-email/
│   │   └── forgot-password/
│   ├── api/                 # API routes
│   │   └── auth/            # Better Auth handlers
│   └── layout.tsx           # Root layout
├── components/
│   ├── auth/                # Auth-related components
│   ├── emails/              # Email templates
│   ├── layout/              # Layout components
│   ├── profile/             # User profile components
│   └── ui/                  # Reusable UI components
├── db/
│   ├── schema/              # Database schema
│   │   ├── enum/            # Enum definitions
│   │   └── tables/          # Table schemas
│   └── index.ts             # Database instance
├── dal/                     # Data Access Layer
├── hooks/
│   └── auth/                # Authentication hooks
├── lib/
│   ├── auth.ts              # Better Auth configuration
│   ├── auth-client.ts       # Client-side auth utilities
│   ├── auth-guards.ts       # Route protection
│   └── utils.ts             # Utility functions
└── validations/
    └── auth.ts              # Zod validation schemas

🔑 Authentication Flow

Registration

1. User signs up with email and password
2. OTP sent to email for verification
3. User verifies email with OTP code
4. Account activated and user logged in

Login

1. User provides credentials
2. Optional 2FA challenge if enabled
3. Session created with secure cookie

Password Reset

1. User requests password reset
2. OTP sent to registered email
3. User verifies OTP and sets new password

🏢 Organization Features

• Create and manage multiple organizations
• Invite members via email
• Assign roles (Owner, Admin, Member)
• Switch between organizations seamlessly
• Organization-level permissions

🎨 Customization

Styling

• Modify src/app/globals.css for global styles
• Update Tailwind config in tailwind.config.ts
• Customize component styles in src/components/ui/

Branding

• Update NEXT_PUBLIC_PROJECT_NAME in .env.local
• Replace logo and images in public/
• Customize email templates in src/components/emails/

Database Schema

• Modify schemas in src/db/schema/
• Run bun run db:generate to create migrations
• Apply with bun run db:migrate

🔒 Security Best Practices

• ✅ HTTPS in production (configured via hosting)
• ✅ Secure session management with httpOnly cookies
• ✅ CSRF protection via Better Auth
• ✅ SQL injection prevention via Drizzle ORM
• ✅ Password hashing with bcrypt
• ✅ Rate limiting (implement in production)
• ✅ Input validation with Zod schemas

📦 Tech Stack

• Framework: Next.js 16 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS 4
• Database: PostgreSQL + Drizzle ORM
• Authentication: Better Auth
• Email: React Email + Resend
• UI Components: ShadCN UI
• Animation: Framer Motion
• Validation: Zod (via Better Auth)
• Linting: Biome

🚢 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Import project in Vercel
3. Add environment variables
4. Deploy!

Other Platforms

This template works with any platform supporting Node.js:

• Railway
• Render
• DigitalOcean App Platform
• AWS/GCP/Azure

Remember to:

• Set all environment variables
• Update BETTER_AUTH_URL to your production domain
• Configure production database
• Set up email sending domain in Resend

📝 Environment Variables Reference

Variable	Description	Required
DATABASE_URL	PostgreSQL connection string	✅
NEXT_PUBLIC_PROJECT_NAME	App name displayed to users	✅
BETTER_AUTH_SECRET	Secret for session encryption	✅
BETTER_AUTH_URL	Base URL of your app	✅
RESEND_API_KEY	Resend API key	✅
RESEND_FROM_EMAIL	Verified sender email	✅
GITHUB_CLIENT_ID	GitHub OAuth client ID	❌
GITHUB_CLIENT_SECRET	GitHub OAuth secret	❌

🤝 Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

• Next.js - The React Framework
• Better Auth - Authentication solution
• Drizzle ORM - TypeScript ORM
• Tailwind CSS - Utility-first CSS
• Resend - Email API

📞 Support

For questions and support, please open an issue on GitHub.

---

Built with ❤️ by CianCode using modern web technologies