Boilerplate Supabase

GitHub Repository

Boilerplate minimal Next.js + Supabase + Dodo Payments pour les abonnements

Live Demo

Explorer la démo déployée

Vue d’ensemble

Un boilerplate prêt pour la production destiné aux abonnements, utilisant Next.js 15, React 19, Supabase, Drizzle ORM et Dodo Payments. Il inclut Google OAuth, le checkout des abonnements, la gestion des webhooks, le schéma de base de données et un tableau de bord de base.

Si vous avez uniquement besoin de route handlers pour une application existante, consultez les adaptateurs dédiés : Adaptateur Next.js et Adaptateur Express.

Prérequis

Node.js 18+ (ou Bun 1.0+)
Projet Supabase (URL, clé Anon, clé de rôle Service, URL de base de données)
Compte Dodo Payments (clé API, secret de webhook)
Client OAuth Google Cloud (ID client et secret)

Démarrage rapide

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

Créez un projet Supabase et copiez :

NEXT_PUBLIC_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY
SUPABASE_SERVICE_ROLE_KEY
DATABASE_URL (chaîne de connexion)

Configure Google OAuth

Définissez l’URI de redirection sur : https://[your-project-ref].supabase.co/auth/v1/callback dans Google Cloud, puis activez le fournisseur Google dans Supabase Auth à l’aide de votre ID client et de votre secret.

Configure Dodo Payments

Générez une clé API et un secret de webhook depuis le tableau de bord Dodo. Définissez l’environnement sur test_mode pendant le développement.

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

Ne validez jamais de secrets dans le dépôt. Utilisez des variables d’environnement dans les environnements de déploiement.

Provision database schema

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

Tables créées : 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

Définissez l’URL du endpoint sur :

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

Sélectionnez les événements de paiement et d’abonnement.

Create products and features

Dans le tableau de bord Dodo → Produits → Créer un produit. Ajoutez éventuellement des métadonnées :

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

L’interface de tarification lit ce tableau features et l’affiche dynamiquement.

Run the dev server

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

Ouvrez http://localhost:3000.

Contenu inclus

Authentification via Supabase (Google OAuth configuré)
Checkout des abonnements via Dodo Payments
Supabase Edge Function pour les webhooks (dodo-webhook)
Schéma et migrations Drizzle ORM
Tableau de bord avec les factures, l’état de l’abonnement et les fonctionnalités du plan

Conservez DODO_PAYMENTS_ENVIRONMENT comme test_mode jusqu’à la fin des tests de bout en bout.

Fichiers et chemins principaux

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

Variables d’environnement

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=

Vérification et dépannage

Webhook signature invalid (401)

Vérifiez que DODO_WEBHOOK_SECRET correspond à la valeur du tableau de bord Dodo
Confirmez que vous avez déployé la dernière fonction dodo-webhook
Vérifiez que le nom de l’en-tête est correct dans votre fonction (Dodo-Signature)

Database push fails

Vérifiez la syntaxe de DATABASE_URL et la sortie réseau de Supabase
Attendez environ 2 à 3 minutes après la création du projet avant le premier push

OAuth redirect mismatch

L’URI de redirection doit être https://[ref].supabase.co/auth/v1/callback
Assurez-vous qu’elle est identique dans Google Cloud et dans le fournisseur Supabase Auth

Vous disposez maintenant d’une structure SaaS d’abonnement fonctionnelle, créée avec Supabase et Dodo Payments.

Dépôt d’origine et étapes détaillées : dodo-supabase-subscription-starter.

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

GitHub Repository

Live Demo

Vue d’ensemble

Prérequis

Démarrage rapide

Contenu inclus

Fichiers et chemins principaux

Variables d’environnement

Vérification et dépannage

GitHub Repository

Live Demo

​Vue d’ensemble

​Prérequis

​Démarrage rapide

​Contenu inclus

​Fichiers et chemins principaux

​Variables d’environnement

​Vérification et dépannage

Vue d’ensemble

Prérequis

Démarrage rapide

Contenu inclus

Fichiers et chemins principaux

Variables d’environnement

Vérification et dépannage