Zum Hauptinhalt springen

GitHub-Repository

Minimal Next.js + Supabase + Dodo Payments Abonnement-Boilerplate

Live-Demo

Erkunden Sie die bereitgestellte Demo

​
Übersicht

Ein produktionsbereites Boilerplate für Abonnements mit Next.js 15, React 19, Supabase, Drizzle ORM und Dodo Payments. Es wird mit Google OAuth, Abonnement-Checkout, Webhook-Verarbeitung, Datenbankschema und einem grundlegenden Dashboard geliefert.
Wenn Sie nur Routen-Handler für eine vorhandene App benötigen, sehen Sie sich die speziellen Adapter an: Next.js-Adapter und Express-Adapter.

​
Voraussetzungen

  • Node.js 18+ (oder Bun 1.0+)
  • Supabase-Projekt (URL, Anon-Schlüssel, Service-Rollen-Schlüssel, Datenbank-URL)
  • Dodo Payments-Konto (API-Schlüssel, Webhook-Geheimnis)
  • Google Cloud OAuth-Client (Client-ID und Geheimnis)

​
Schnellstart

1

Klonen und installieren

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
2

Supabase-Projekt erstellen

Erstellen Sie ein Supabase-Projekt und kopieren Sie:
  • NEXT_PUBLIC_SUPABASE_URL
  • NEXT_PUBLIC_SUPABASE_ANON_KEY
  • SUPABASE_SERVICE_ROLE_KEY
  • DATABASE_URL (Verbindungszeichenfolge)
3

Google OAuth konfigurieren

Setzen Sie die Umleitungs-URI auf: https://[your-project-ref].supabase.co/auth/v1/callback in Google Cloud, aktivieren Sie dann den Google-Anbieter in Supabase Auth mit Ihrer Client-ID und Ihrem Geheimnis.
4

Dodo Payments konfigurieren

Generieren Sie einen API-Schlüssel und ein Webhook-Geheimnis aus dem Dodo-Dashboard. Setzen Sie die Umgebung auf test_mode während der Entwicklung.
5

.env.local erstellen

# 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
Verpflichten Sie niemals Geheimnisse. Verwenden Sie Umgebungsvariablen in Bereitstellungsumgebungen.
6

Datenbankschema bereitstellen

bun run db:push
# or
npm run db:push
# or
pnpm run db:push
Erstellte Tabellen: users, subscriptions, payments.
7

Webhook-Funktion bereitstellen

# 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":{}}'
8

Webhook in Dodo Payments hinzufügen

Setzen Sie die Endpunkt-URL auf:
https://[your-project-ref].supabase.co/functions/v1/dodo-webhook
Wählen Sie Zahlungs- und Abonnementereignisse aus.
9

Produkte und Funktionen erstellen

Im Dodo-Dashboard → Produkte → Produkt erstellen. Fügen Sie optional Metadaten hinzu:
{
  "features": ["Feature 1", "Feature 2", "Feature 3"]
}
Die Preis-UI liest dieses features Array und rendert es dynamisch.
10

Dev-Server ausführen

bun run dev
# or
npm run dev
# or
pnpm run dev
Öffnen Sie http://localhost:3000.

​
Was ist enthalten

  • Authentifizierung über Supabase (Google OAuth konfiguriert)
  • Abonnement-Checkout über Dodo Payments
  • Supabase Edge-Funktion für Webhooks (dodo-webhook)
  • Drizzle ORM-Schema und Migrationen
  • Dashboard mit Rechnungen, Abonnementstatus und Planfunktionen
Halten Sie DODO_PAYMENTS_ENVIRONMENT als test_mode, bis Sie End-to-End-Tests abgeschlossen haben.

​
Wichtige Dateien und Pfade

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

​
Umgebungsvariablen

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=
DATABASE_URL=

DODO_PAYMENTS_API_KEY=
DODO_WEBHOOK_SECRET=
DODO_PAYMENTS_ENVIRONMENT=test_mode|live_mode

GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

​
Überprüfung und Fehlersuche

  • Stellen Sie sicher, dass DODO_WEBHOOK_SECRET mit dem Wert aus dem Dodo-Dashboard übereinstimmt
  • Bestätigen Sie, dass Sie die neueste dodo-webhook Funktion bereitgestellt haben
  • Überprüfen Sie, ob der Header-Name in Ihrer Funktion korrekt ist (Dodo-Signatur)
  • Überprüfen Sie die DATABASE_URL Syntax und den Supabase-Netzwerkverkehr
  • Warten Sie ~2–3 Minuten nach der Projekterstellung, bevor Sie den ersten Push durchführen
  • Die Umleitungs-URI muss https://[ref].supabase.co/auth/v1/callback sein
  • Stellen Sie sicher, dass dasselbe in Google Cloud und im Supabase Auth-Anbieter vorhanden ist
Sie haben jetzt ein funktionierendes Abonnement-SaaS mit Supabase und Dodo Payments erstellt.
Original-Repository und detaillierte Schritte: dodo-supabase-subscription-starter.