Skip to content

README.md

Latest commit

 

History

History
217 lines (159 loc) · 7.02 KB

README.md

File metadata and controls

217 lines (159 loc) · 7.02 KB

Dodo Payments Supabase Subscription Starter

Deploy on Vercel License: GPLv3 Live Documentation Chat on Discord

A minimal subscription starter kit built with Next.js, Supabase, and Dodo Payments. This boilerplate helps you quickly set up a subscription-based SaaS with authentication, payments, and webhooks.

🎥 Demo

Demo

🚀 Features

  • 🔑 Authentication: Google OAuth integration via Supabase
  • 💳 Payment Processing: Complete subscription management with Dodo Payments
  • 📦 Dynamic Plans: Products with configurable features via metadata
  • 📡 Webhook Integration: Real-time subscription lifecycle events via Supabase functions
  • 🗄️ Database Management: PostgreSQL with Drizzle ORM
  • 🎨 Modern UI: Built with Next.js 15, React 19, and Tailwind CSS
  • 📊 Dashboard: Comprehensive subscription and billing management
  • 📜 Invoice History: Complete payment and billing tracking

📦 Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

  • Node.js (v18 or higher) or Bun (v1.0 or higher)
  • Git for cloning the repository
  • A Supabase account (sign up here)
  • A Dodo Payments account (sign up here)
  • Google Cloud Console account (for OAuth setup)

1. Clone and Setup Project

# Clone the repository
git clone https://github.com/dodopayments/dodo-supabase-subscription-starter.git
cd dodo-supabase-subscription-starter

# Install dependencies
bun install
# or
npm install
# or
pnpm install

2. Create a Supabase Project

  1. Go to Supabase and create a new project
  2. Wait for the project to be fully provisioned (this may take 2-3 minutes)
  3. Go to Settings → API and copy:
    • Project URL (NEXT_PUBLIC_SUPABASE_URL)
    • Anon/Public Key (NEXT_PUBLIC_SUPABASE_ANON_KEY)
    • Service Role Key (for webhook function)
  4. Go to Settings → Database and copy the Connection String (DATABASE_URL)

3. Setup Google OAuth

  1. Go to Google Cloud Console
  2. Create a new project or select an existing one
  3. Enable the Google+ API
  4. Go to Credentials → Create Credentials → OAuth 2.0 Client IDs
  5. Set authorized redirect URIs to: https://[your-project-ref].supabase.co/auth/v1/callback
  6. Copy the Client ID and Client Secret
  7. In Supabase, go to Authentication → Providers → Google
  8. Enable Google provider and add your Client ID and Secret

4. Setup Dodo Payments

  1. Create an account at Dodo Payments
  2. Go to Settings → API Keys and copy your API key
  3. Go to Settings → Webhooks and copy the webhook secret

5. Configure Environment Variables

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

# Supabase Configuration
NEXT_PUBLIC_SUPABASE_URL=https://your-project-ref.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-key

# Database URL (from Supabase Settings → Database)
DATABASE_URL=postgresql://postgres:[password]@db.[project-ref].supabase.co:5432/postgres

# Dodo Payments Configuration
DODO_PAYMENTS_API_KEY=your-dodo-api-key
DODO_WEBHOOK_SECRET=your-webhook-secret
DODO_PAYMENTS_ENVIRONMENT=test_mode

6. Setup Database Schema

# Push the database schema to Supabase
bun run db:push
# or
npm run db:push
# or
pnpm run db:push

This creates the necessary tables: users, subscriptions, and payments.

7. Deploy Webhook Handler

# Login to Supabase (you'll be prompted to authenticate)
bunx supabase login
# or
npx supabase login

# Deploy the webhook function
bun run deploy:webhook --project-ref [your-project-ref]
# or
npm run deploy:webhook -- --project-ref [your-project-ref]
# or
pnpm run deploy:webhook --project-ref [your-project-ref]

Note: Replace [your-project-ref] with your actual Supabase project reference ID (found in your project URL).

8. Configure Webhook in Dodo Payments

  1. In your Dodo Payments dashboard, go to Settings → Webhooks
  2. Add a new webhook endpoint with this URL: 
    https://[your-project-ref].supabase.co/functions/v1/dodo-webhook
  3. Select all payment and subscription events
  4. Save the webhook configuration

9. Create Products in Dodo Payments

In your Dodo Payments dashboard:

  1. Go to Products → Create Product
  2. Fill in the basic product information (name, price, billing cycle)
  3. In the Metadata section, add: 
    {
  "features": ["Feature 1", "Feature 2", "Feature 3"]
}
  4. Save the product

The features array will be dynamically displayed in your application's pricing UI.

10. Run the Development Server

# Start the development server
bun run dev
# or
npm run dev
# or
pnpm run dev

Open http://localhost:3000 to view the application.

🎯 Assumptions, Trade-offs, and Development Time

Assumptions

  • Google OAuth only - Additional auth providers require extra setup
  • Dodo Payments integration - Built specifically for Dodo, switching payment providers needs significant changes
  • Subscription model - Designed for recurring payments, not one-time purchases
  • Serverless deployment - Optimized for Vercel, traditional servers may need adjustments

Trade-offs

  • ✅ Fast setup vs ❌ Limited flexibility - Quick to deploy but harder to customize
  • ✅ Managed services vs ❌ Vendor lock-in - Faster development but dependent on third parties
  • ✅ Modern stack vs ❌ Learning curve - Great DX but requires familiarity with latest tools

▲ Deploy with Vercel

You can deploy this project instantly using the button below:

Deploy with Vercel

👤 Original Author

This project was originally created by Darshan Gowda.