Passer au contenu principal

Dépôt GitHub

Modèle minimal d’abonnement Next.js + Supabase + Dodo Payments

Démo en direct

Explorez la démo déployée

​
Aperçu

Un modèle prêt pour la production pour les abonnements utilisant Next.js 15, React 19, Supabase, Drizzle ORM et Dodo Payments. Il est livré avec Google OAuth, le paiement d’abonnement, la gestion des webhooks, le schéma de base de données et un tableau de bord de base.
Si vous avez seulement besoin de gestionnaires de routes 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 de service, URL de base de données)
  • Compte Dodo Payments (clé API, secret de webhook)
  • Client OAuth Google Cloud (ID et secret du client)

​
Démarrage rapide

1

Cloner et installer

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

Créer un projet Supabase

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)
3

Configurer 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 en utilisant votre ID et secret de client.
4

Configurer 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.
5

Créer .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 jamais commettre de secrets. Utilisez des variables d’environnement dans les environnements de déploiement.
6

Provisionner le schéma de base de données

bun run db:push
# or
npm run db:push
# or
pnpm run db:push
Tables créées : users, subscriptions, payments.
7

Déployer la fonction webhook

# 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

Ajouter un webhook dans Dodo Payments

Définissez l’URL de l’endpoint sur :
https://[your-project-ref].supabase.co/functions/v1/dodo-webhook
Sélectionnez les événements de paiement et d’abonnement.
9

Créer des produits et des fonctionnalités

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 utilisateur de tarification lit ce features tableau et le rend dynamiquement.
10

Exécuter le serveur de développement

bun run dev
# or
npm run dev
# or
pnpm run dev
Ouvrez http://localhost:3000.

​
Ce qui est inclus

  • Authentification via Supabase (Google OAuth configuré)
  • Paiement d’abonnement via Dodo Payments
  • Fonction Edge Supabase pour les webhooks (dodo-webhook)
  • Schéma et migrations Drizzle ORM
  • Tableau de bord avec factures, statut d’abonnement et fonctionnalités du plan
Gardez DODO_PAYMENTS_ENVIRONMENT comme test_mode jusqu’à ce que vous ayez terminé les tests de bout en bout.

​
Fichiers et chemins clés

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

​
Variables d’environnement

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=

​
Vérification et dépannage

  • Assurez-vous que DODO_WEBHOOK_SECRET correspond à la valeur du tableau de bord Dodo
  • Confirmez que vous avez déployé la dernière dodo-webhook fonction
  • Vérifiez que le nom de l’en-tête est correct dans votre fonction (Dodo-Signature)
  • Vérifiez la syntaxe de DATABASE_URL et la sortie réseau de Supabase
  • Attendez ~2–3 minutes après la création du projet avant le premier envoi
  • L’URI de redirection doit être https://[ref].supabase.co/auth/v1/callback
  • Assurez-vous que c’est le même dans Google Cloud et le fournisseur Auth Supabase
Vous avez maintenant un abonnement SaaS fonctionnel structuré avec Supabase et Dodo Payments.
Dépôt original et étapes détaillées : dodo-supabase-subscription-starter.