next-supabase-stripe-starter

next-supabase-stripe-starter is an open-source SaaS boilerplate that combines Next.js 15, Supabase, Stripe, React Email, Resend, Tailwind CSS, and shadcn/ui to deliver a complete subscription-billing and authentication starter in a single deployable codebase.

What is next-supabase-stripe-starter?

next-supabase-stripe-starter is a GitHub repository created by Kolby Sisk that functions as a production-ready starting point for SaaS applications. It takes your environment variables for Supabase, Stripe, and Resend as input and outputs a deployed web app with email-based authentication, Stripe Checkout and customer portal, a Postgres database schema managed through Supabase migrations, and automatic product synchronization via Stripe webhooks. The project runs on Next.js 15 with the App Router, uses Tailwind CSS for styling and shadcn/ui for prebuilt accessible components, and is designed to be deployed directly to Vercel with a one-click deploy button.

Key Features

• Next.js 15 — The app is built on the latest Next.js App Router with server components and route handlers, including API routes for Stripe webhook events.
• Supabase integration — Provides Postgres database, user authentication with email/OTP flow, and SQL migrations via the Supabase CLI; row-level security is enabled on generated tables.
• Stripe billing — Includes Checkout sessions, subscription plans, customer portal management, and a fixture file (stripe-fixtures.json) that seeds product and price data into Stripe.
• Webhook sync — A route at src/app/api/webhooks listens for Stripe events and automatically writes product/pricing changes to Supabase.
• React Email + Resend — Transactional email components live in src/features/emails, and sending a welcome email is one code snippet using the resendClient from src/libs/resend/resend-client.
• Tailwind CSS + shadcn/ui — Prebuilt responsive, accessible components from shadcn/ui are generated into components/ui, with theming through Tailwind config and shadcn/ui's theming system.
• Migrations — Supabase migrations bootstrap the database schema and can be extended with commands like npm run migration:new to add new tables.
• Animated button borders — A small visual flourish included with the starter's default design.

Who is it for?

Indie hackers and solopreneurs — Launch a subscription SaaS quickly without wiring auth and billing from scratch; the included login, pricing, and account pages are ready to customize.

Full-stack developers — Get a typed, feature-first file structure (src/features) with colocated code and reusable UI components separated in components/ui.

Startup teams — Use the Stripe fixture and Supabase migrations to keep product configuration and database schema in version control, making environments reproducible.

What can you do with it?

Launch a subscription product — Configure your plans in stripe-fixtures.json, run the fixture against Stripe, and the webhook automatically mirrors products/prices into Supabase.

Send transactional emails — Compose an email component with React Email and deliver it through Resend with the provided client wrapper.

Manage your database schema — Add tables using npm run migration:new and push changes with npm run migration:up, following the pattern shown for an invites table with row-level security.

Deploy a live SaaS instance — Use the Vercel deploy button, which preloads the required env vars and supports the Supabase integration.

How does it work?

The README walks through a 9-step setup: create Supabase and Stripe projects, configure the Resend integration, deploy to Vercel with environment variables, add a Stripe webhook endpoint at /api/webhooks, run Supabase migrations, and load the Stripe fixture with your secret key. Testing the flow requires a Stripe test card number 4242424242424242 and any valid details on the Checkout form. Once running, the starter handles Stripe-to-Supabase synchronization automatically.

FAQ

Is next-supabase-stripe-starter free?

Yes, the project is open source under the MIT license and hosted on GitHub. You do pay separately for the third-party services it integrates with, such as Supabase, Stripe, and Resend, though each has a free or test tier.

What services do I need to set up?

You need a Supabase project (for Postgres and auth), a Stripe account (for billing), and a Resend account (for email delivery). The README gives step-by-step instructions for each, including enabling Stripe Customer Portal and the Supabase Resend integration.

How do I manage products and prices?

Products and prices are defined in the stripe-fixtures.json file. After editing that file, you run the Stripe CLI fixture command with your Stripe secret key to push changes; the webhook then updates Supabase. Optional metadata fields can be parsed with a Zod schema for typed access in your app.

How do I add a new database table?

Run npm run migration:new with a name label, edit the generated SQL file to create the table (the README shows an invites table as an example), then run npm run migration:up to apply it. Generated tables include row-level security by default.

How do I test the subscription flow?

Run bun run dev, click Get started for free, sign up with your email, select a plan, and use the test card 4242424242424242 on Stripe Checkout. After subscribing you'll be redirected to the Account page where you can manage the subscription via Stripe Customer Portal.