Modern SaaS Boilerplate
A modular, scalable, and reusable SaaS boilerplate built with Next.js 15, TypeScript, Tailwind CSS, and Supabase.

Sun May 26 2024

Visit Website
Next.js
TypeScript
Supabase
Tailwind CSS
SaaS
Authentication
RBAC
Image of Modern SaaS Boilerplate

This boilerplate is an ongoing project and represents one of my first big solo builds. It provides a strong foundation for SaaS applications with essential features like authentication, role-based access control, payments, AI integration, and a robust admin dashboard. While many core features are implemented, others are still under development.

Features

  • Authentication system using Supabase Auth with OAuth and magic links.
  • Profile system with avatar uploads and profile management.
  • Role-based access control with granular permissions.
  • Admin dashboard for managing users, roles, and system settings.
  • Activity logging to track user actions and system events.
  • Stripe integration for subscription-based payments (coming soon).
  • AI/LLM integration with OpenAI and Anthropic APIs (coming soon).
  • Reusable UI components with Tailwind CSS.
  • PostgreSQL database with type safety using Supabase.
  • Optimized for Vercel deployment.

Authentication Features

  • Email/password authentication.
  • OAuth providers (Google, GitHub coming soon).
  • Magic link authentication.
  • Email verification flow.
  • Password reset functionality.
  • Remember me functionality.
  • Profile and session management.
  • Protected routes with middleware.

Admin Features

  • User management with role assignments.
  • Role-based permission system.
  • Activity monitoring with audit logs.
  • System overview dashboard.

Role-Based Access Control

The boilerplate includes a structured RBAC system:

Role Hierarchy

  • Super Admin: Full system access.
  • Admin: Administrative access.
  • User: Standard user access.

Permission Gates

  • Component-level access control.
  • Route protection based on roles.
  • API endpoint authorization.

Role Management

  • Dynamic role assignment.
  • Role-based UI adaptation.
  • Secure role modification.

Environment Setup

Copy the example environment file:

cp .env.example .env.local

Update .env.local with your credentials:

NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key

NEXT_PUBLIC_AUTH_ALLOWED_EMAILS=comma,separated,emails
NEXT_PUBLIC_AUTH_BLOCKED_EMAILS=comma,separated,emails

STRIPE_SECRET_KEY=your-stripe-secret
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your-stripe-publishable
STRIPE_WEBHOOK_SECRET=your-stripe-webhook-secret

OPENAI_API_KEY=your-openai-key

Database Setup

The database structure is comprehensive, leveraging Supabase (PostgreSQL) for scalability and security. Given its complexity, only the core setup is listed here. The full schema, including additional tables and policies, is available in the repository.

Create a new project in Supabase and run the following SQL commands:

create table public.profiles (
  id uuid references auth.users on delete cascade not null primary key,
  updated_at timestamp with time zone,
  full_name text,
  avatar_url text
);
 
alter table public.profiles enable row level security;
 
create policy "Public profiles are viewable by everyone."
  on public.profiles for select
  using ( true );
 
create policy "Users can insert their own profile."
  on public.profiles for insert
  with check ( auth.uid() = id );
 
create policy "Users can update own profile."
  on public.profiles for update
  using ( auth.uid() = id );

For a detailed database schema, including organization management, permissions, and audit logs, refer to the documentation in the repository.

Roadmap

Core Features

  • Authentication with Supabase.
  • User profiles.
  • Session management.
  • Role-based access control.
  • Admin dashboard.
  • User activity tracking.
  • Analytics foundation.
  • Data exports (CSV).

Team Features (In Progress)

  • Organization system foundation.
  • Create organizations.
  • Organization routing.
  • Basic organization context.
  • Organization dashboard.
  • Organization management.
  • Role-based organization access.
  • Organization creation flow.
  • Organization settings.
  • Avatar management.
  • Slug management.
  • Member management.
  • Invite system.
  • Role assignment.
  • Member removal.
  • Permission management.

Features Under Development

These features are planned but not yet implemented:

Payment Integration

  • Stripe subscriptions.
  • Usage-based billing.
  • Team billing.
  • Invoice management.
  • Billing dashboard.

AI/LLM Features

  • OpenAI integration.
  • Claude/Anthropic setup.
  • Prompt management.
  • Usage tracking & limits.
  • AI playground.

Advanced Features

  • System settings panel.
  • i18n support.
  • Documentation system.
  • Blog/CMS integration.
  • Email template system.
  • Webhook system.

Prerequisites

  • Node.js 18+
  • pnpm 8+
  • Supabase account
  • Basic knowledge of TypeScript and React

Quick Start

Clone the repository:

https://github.com/Vindusvisker/Nextjs-Supabase-Boilerplate.git
cd saas-boilerplate

Install dependencies:

pnpm install

Copy the environment variables:

cp .env.example .env.local

Update .env.local with your credentials, then start the development server:

pnpm dev

Open http://localhost:3000 to see the result.

Contributing

Contributions are welcome. Please refer to the contributing guide for details.

License

This project is licensed under the MIT License.