Xpresaas - SaaS Boilerplate

A modern SaaS boilerplate built with Next.js 16, Better-Auth, Prisma, and Tanstack React Query. Features include social login (GitHub, Google), magic link authentication, session management, and more.

Features

• 🔐 Multiple Authentication Methods
  • Magic Link (Email-based passwordless authentication)
  • GitHub OAuth
  • Google OAuth
• 📧 Email Integration with Resend
• 🎨 Modern UI with Tailwind CSS
• 🔄 Real-time Session Management with SWR
• 🛡️ Protected Routes
• 📱 Responsive Design
• 🌐 Type-safe with TypeScript

Getting Started

Prerequisites

• Node.js 18+
• pnpm
• PostgreSQL database
• Resend API key (for email functionality)
• GitHub OAuth credentials
• Google OAuth credentials

Environment Variables

Create a .env file in the root directory with the following variables:

# Database
DATABASE_URL="your-database-url"

# Auth
BETTER_AUTH_SECRET="your-auth-secret"
BETTER_AUTH_URL="http://localhost:4001"

# Email (Resend)
RESEND_API_KEY="your-resend-api-key"
SENDER_EMAIL_ADDRESS="your-verified-email" # Falls back to EMAIL_FROM if defined

# OAuth Providers
AUTH_GITHUB_CLIENT_ID="your-github-client-id"
AUTH_GITHUB_CLIENT_SECRET="your-github-client-secret"
AUTH_GOOGLE_CLIENT_ID="your-google-client-id"
AUTH_GOOGLE_CLIENT_SECRET="your-google-client-secret"

Installation

1. Clone the repository

git clone <repository-url>
cd xpresaas

2. Install dependencies

npm install

3. Set up the database

npx prisma generate
npx prisma db push

4. Start the development server

npm run dev

Usage

Protected Routes

Use the AuthCheck component to protect routes:

import { AuthCheck } from "@/components/auth/auth-check"

export default function ProtectedPage() {
  return (
    <AuthCheck>
      <div>Protected Content</div>
    </AuthCheck>
  )
}

Session Management

Use the useSession hook for session management:

import { useSession } from "@/hooks/use-session"

function MyComponent() {
  const {
    isPending,
    user,
  } = useSession()

  if (isPending) return <div>Loading...</div>
  if (!user) return <div>Please sign in</div>

  return <div>Welcome, {user.name}</div>
}

Custom Configuration

The authentication system can be configured through:

• src/lib/auth.ts - Better-Auth configuration
• src/hooks/use-session.ts - Session management configuration

Project Structure

src/
├── app/                    # Next.js app router
│   ├── auth/              # Authentication routes
│   └── portal/            # Protected dashboard
├── components/            # React components
│   └── auth/             # Auth-related components
├── hooks/                # Custom hooks
├── lib/                  # Utilities and configurations
│   └── auth.ts            # Auth configuration
└── providers/           # React context providers

Error Handling

The system includes custom error pages and handling for:

• Authentication failures
• Email verification issues
• OAuth errors
• Session expiration
• Server configuration problems

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.