Supabase-Boilerplate

GitHub Repository

Minimales Next.js + Supabase + Dodo Payments-Subscription-Boilerplate

Live Demo

Bereitgestellte Demo ansehen

Übersicht

Ein produktionsbereites Boilerplate für Abonnements mit Next.js 15, React 19, Supabase, Drizzle ORM und Dodo Payments. Enthält Google OAuth, Subscription-Checkout, Webhook-Verarbeitung, Datenbankschema und ein grundlegendes Dashboard.

Wenn du nur Route-Handler für eine bestehende App benötigst, sieh dir die speziellen Adaptoren an: Next.js Adaptor und Express Adaptor.

Voraussetzungen

Node.js 18+ (oder Bun 1.0+)
Supabase-Projekt (URL, Anon-Key, Service-Role-Key, Database-URL)
Dodo Payments-Konto (API key, Webhook secret)
Google-Cloud-OAuth-Client (Client ID und Secret)

Schnellstart

Clone and install

git clone https://github.com/dodopayments/dodo-supabase-subscription-starter.git
cd dodo-supabase-subscription-starter
# choose one
bun install
# or
npm install
# or
pnpm install

Create Supabase project

Erstelle ein Supabase-Projekt und kopiere:

NEXT_PUBLIC_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY
SUPABASE_SERVICE_ROLE_KEY
DATABASE_URL (Verbindungszeichenfolge)

Configure Google OAuth

Lege die Redirect-URI auf https://[your-project-ref].supabase.co/auth/v1/callback in Google Cloud fest und aktiviere anschließend den Google-Provider in Supabase Auth mit deiner Client ID und deinem Secret.

Configure Dodo Payments

Erstelle einen API key und ein Webhook secret im Dashboard von Dodo. Setze die Umgebung während der Entwicklung auf test_mode.

Create .env.local

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

# Database
DATABASE_URL=postgresql://postgres:[password]@db.[project-ref].supabase.co:5432/postgres

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

Committe niemals Secrets. Verwende Umgebungsvariablen in Deployment-Umgebungen.

Provision database schema

bun run db:push
# or
npm run db:push
# or
pnpm run db:push

Erstellte Tabellen: users, subscriptions, payments.

Deploy webhook function

# login (one-time)
bunx supabase login
# or
npx supabase login

# deploy the edge 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]

cURL

curl -X POST \
  'https://[your-project-ref].supabase.co/functions/v1/dodo-webhook' \
  -H 'Content-Type: application/json' \
  -H 'Dodo-Signature: <signature>' \
  -d '{"type":"payment.succeeded","data":{}}'

Add webhook in Dodo Payments

Setze die Endpunkt-URL auf:

https://[your-project-ref].supabase.co/functions/v1/dodo-webhook

Wähle Zahlungs- und Subscription-Ereignisse aus.

Create products and features

Öffne im Dashboard von Dodo den Bereich „Products“ → „Create Product“. Füge optional Metadaten hinzu:

{
  "features": ["Feature 1", "Feature 2", "Feature 3"]
}

Die Preis-UI liest dieses features-Array aus und rendert es dynamisch.

Run the dev server

bun run dev
# or
npm run dev
# or
pnpm run dev

Öffne http://localhost:3000.

Enthaltene Funktionen

Authentifizierung über Supabase (Google OAuth konfiguriert)
Subscription-Checkout über Dodo Payments
Supabase Edge Function für Webhooks (dodo-webhook)
Drizzle-ORM-Schema und Migrationen
Dashboard mit Rechnungen, Subscription-Status und Planfunktionen

Behalte DODO_PAYMENTS_ENVIRONMENT als test_mode bei, bis du die End-to-End-Tests abgeschlossen hast.

Wichtige Dateien und Pfade

Edge Function
Next.js routes
Database (Drizzle)

supabase/functions/dodo-webhook/
  index.ts            # webhook handler verifying signatures
  deno.json           # permissions

app/(marketing)/*     # landing + pricing UI
app/(dashboard)/*     # protected pages
app/api/*             # server actions & helpers

lib/db/schema.ts      # users, subscriptions, payments
lib/db/index.ts       # client

Umgebungsvariablen

Supabase

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=
DATABASE_URL=

Dodo Payments

DODO_PAYMENTS_API_KEY=
DODO_WEBHOOK_SECRET=
DODO_PAYMENTS_ENVIRONMENT=test_mode|live_mode

Google OAuth

GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

Überprüfung und Fehlerbehebung

Webhook signature invalid (401)

Stelle sicher, dass DODO_WEBHOOK_SECRET mit dem Wert aus dem Dashboard von Dodo übereinstimmt
Bestätige, dass du die aktuelle dodo-webhook-Funktion bereitgestellt hast
Überprüfe, ob der Headername in deiner Funktion korrekt ist (Dodo-Signature)

Database push fails

Überprüfe die Syntax von DATABASE_URL und den Supabase-Netzwerk-Egress
Warte nach der Projekterstellung etwa 2–3 Minuten, bevor du den ersten Push durchführst

OAuth redirect mismatch

Die Redirect-URI muss https://[ref].supabase.co/auth/v1/callback sein
Stelle sicher, dass sie in Google Cloud und beim Supabase-Auth-Provider identisch ist

Du verfügst nun über ein funktionsfähiges Subscription-SaaS-Grundgerüst mit Supabase und Dodo Payments.

Original-Repository und ausführliche Schritte: dodo-supabase-subscription-starter.

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

GitHub Repository

Live Demo

Übersicht

Voraussetzungen

Schnellstart

Enthaltene Funktionen

Wichtige Dateien und Pfade

Umgebungsvariablen

Überprüfung und Fehlerbehebung

GitHub Repository

Live Demo

​Übersicht

​Voraussetzungen

​Schnellstart

​Enthaltene Funktionen

​Wichtige Dateien und Pfade

​Umgebungsvariablen

​Überprüfung und Fehlerbehebung

Übersicht

Voraussetzungen

Schnellstart

Enthaltene Funktionen

Wichtige Dateien und Pfade

Umgebungsvariablen

Überprüfung und Fehlerbehebung