Boilerplate Supabase

GitHub Repository

Boilerplate minimal d’abonnement Next.js, Supabase et Dodo Payments.

Live Demo

Explorez la démo déployée.

Vue d’ensemble

Le starter d’abonnement Supabase est une application Next.js 15 et React 19 qui vend des abonnements avec Dodo Payments. Supabase fournit la connexion Google OAuth et la base de données Postgres, tandis que Drizzle ORM définit le schéma. Une Supabase Edge Function reçoit les webhooks Dodo Payments et stocke les paiements et les abonnements, et un tableau de bord simple affiche le forfait et les factures de chaque utilisateur. Si vous avez uniquement besoin des gestionnaires de routes pour le checkout, le Customer Portal et les webhooks dans une application existante, utilisez plutôt un adaptateur de framework :

Next.js Adaptor

Express Adaptor

Prérequis

Avant de commencer, vous avez besoin des éléments suivants :

Node.js 18 ou version ultérieure, ou Bun 1.0 ou version ultérieure.
Un projet Supabase. Vous aurez besoin de son URL, de sa clé anon, de sa clé de rôle de service et de sa chaîne de connexion à la base de données.
Un compte Dodo Payments, pour obtenir une clé API et un secret de signature de webhook.
Un client OAuth Google Cloud, avec son Client ID et son Client Secret.

Démarrage rapide

Clone and Install

Clonez le dépôt, puis installez les dépendances avec Bun, npm ou pnpm :

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 a Supabase Project

Créez un projet Supabase. Les étapes suivantes utilisent la référence de votre projet, c’est-à-dire le sous-domaine dans https://[your-project-ref].supabase.co. Copiez les valeurs suivantes :

NEXT_PUBLIC_SUPABASE_URL, l’URL du projet
NEXT_PUBLIC_SUPABASE_ANON_KEY, la clé anon
SUPABASE_SERVICE_ROLE_KEY, la clé de rôle de service
DATABASE_URL, la chaîne de connexion à la base de données

Configure Google OAuth

Dans Google Cloud, ajoutez cette URI de redirection autorisée à votre client OAuth : https://[your-project-ref].supabase.co/auth/v1/callback. Ensuite, dans Supabase Auth, activez le fournisseur Google avec votre Client ID et votre Client Secret.

Configure Dodo Payments

Avec le bouton Live Mode désactivé dans la barre latérale, créez une clé API sous Developer → API Keys dans le tableau de bord Dodo Payments. Conservez DODO_PAYMENTS_ENVIRONMENT défini sur test_mode pendant le développement.

Add the Webhook in Dodo Payments

Sous Developer → Webhooks, ajoutez un endpoint avec cette URL. Vous déploierez la fonction qui le sert à une étape ultérieure.

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

Sélectionnez les événements de paiement et d’abonnement que la fonction doit gérer :

Événements de paiement : payment.succeeded, payment.failed, payment.processing et payment.cancelled
Événements d’abonnement : subscription.active, subscription.plan_changed, subscription.renewed, subscription.on_hold, subscription.cancelled, subscription.expired et subscription.failed

Copiez le secret de signature de l’endpoint. Il s’agit de la valeur de DODO_WEBHOOK_SECRET.

Create .env.local

Créez un fichier .env.local dans le répertoire racine :

# 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

L’application Next.js lit toutes les variables de ce fichier, à l’exception de DODO_WEBHOOK_SECRET. L’Edge Function lit DODO_WEBHOOK_SECRET depuis les secrets Supabase, que vous définissez lors de son déploiement.

Ne commitez pas les secrets. Dans les environnements déployés, définissez-les comme variables d’environnement.

Provision the Database Schema

Poussez le schéma Drizzle vers votre base de données Supabase :

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

Tables créées : users, subscriptions, payments.

Deploy the Webhook Function

Connectez-vous à Supabase, enregistrez le secret de signature comme secret de fonction, puis déployez l’Edge Function dodo-webhook. Remplacez [your-project-ref] par la référence de votre projet :

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

# store the Dodo Payments signing secret for the function
npx supabase secrets set DODO_WEBHOOK_SECRET=your-webhook-secret --project-ref [your-project-ref]

# 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]

Le script deploy:webhook exécute supabase functions deploy dodo-webhook --no-verify-jwt, afin que Dodo Payments puisse appeler la fonction sans jeton d’authentification Supabase. Supabase fournit par défaut SUPABASE_URL et SUPABASE_SERVICE_ROLE_KEY à la fonction.Pour vérifier le déploiement, envoyez une requête non signée :

cURL

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

Une réponse 400 avec Invalid webhook signature signifie que la fonction est active et dispose de son secret. Une réponse 500 avec Server configuration error signifie que DODO_WEBHOOK_SECRET n’est pas défini. Pour envoyer un événement de test signé, ouvrez l’endpoint dans Developer → Webhooks et utilisez son onglet Testing.

Create Products and Features

Dans Products, dans le tableau de bord Dodo Payments, cliquez sur Add Product pour créer un produit d’abonnement pour chaque forfait. Si vous le souhaitez, pour afficher les fonctionnalités des forfaits dans l’application, ajoutez une entrée de métadonnées avec la clé features et un tableau JSON de chaînes comme valeur. Les métadonnées du produit se présentent alors comme suit :

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

Les valeurs des métadonnées sont des chaînes, des nombres ou des booléens ; stockez donc le tableau sous forme de chaîne JSON. L’interface de tarification analyse la valeur features et affiche chaque élément.

Run the Dev Server

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

Ouvrez http://localhost:3000 et connectez-vous avec Google.

Vous disposez maintenant d’une structure SaaS d’abonnement fonctionnelle, basée sur Supabase et Dodo Payments. Pour la vérifier de bout en bout, abonnez-vous à un forfait avec une carte de test. Une fois le webhook reçu, le tableau de bord affiche votre nouveau forfait.

Contenu inclus

Authentification via Supabase, avec Google OAuth configuré
Checkout d’abonnement via Dodo Payments
Une Supabase Edge Function pour les webhooks (dodo-webhook)
Un schéma Drizzle ORM, avec les scripts db:generate et db:migrate pour les migrations
Un tableau de bord avec les factures, l’état de l’abonnement et les fonctionnalités des forfaits
Des server actions pour changer de forfait, annuler un abonnement et restaurer un abonnement annulé

Conservez DODO_PAYMENTS_ENVIRONMENT défini sur test_mode jusqu’à la fin des tests de bout en bout. Pour passer en production, définissez-le sur live_mode et utilisez une clé API en mode live.

Fichiers et chemins clés

Le gestionnaire de webhook, les routes de l’application et le schéma de base de données se trouvent dans les fichiers suivants :

Edge Function
Next.js Routes
Database (Drizzle)

supabase/functions/dodo-webhook/
  index.ts            # verifies signatures, stores payments and subscriptions
  deno.json           # Deno configuration

app/page.tsx                    # redirects to /login or /dashboard
app/login/page.tsx              # Google sign-in page
app/dashboard/page.tsx          # plans, subscription, and invoices
app/checkout/route.ts           # checkout handler
app/api/auth/callback/route.ts  # OAuth callback
actions/*                       # server actions

lib/drizzle/schema.ts   # users, subscriptions, payments
lib/drizzle/client.ts   # client

Variables d’environnement

L’application Next.js et l’Edge Function lisent les variables suivantes :

Supabase

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=
DATABASE_URL=

.env.example ne répertorie pas SUPABASE_SERVICE_ROLE_KEY, mais le client administrateur de l’application dans lib/supabase/admin.ts en a besoin. Ajoutez-la vous-même.

Dodo Payments

DODO_PAYMENTS_API_KEY=
DODO_WEBHOOK_SECRET=
DODO_PAYMENTS_ENVIRONMENT=test_mode|live_mode

Google OAuth

L’application ne lit pas les identifiants Google depuis les variables d’environnement. Saisissez le Client ID et le Client Secret dans les paramètres du fournisseur Google de Supabase Auth, puis ajoutez cette URI de redirection au client OAuth dans Google Cloud :

https://[your-project-ref].supabase.co/auth/v1/callback

Vérification et résolution des problèmes

Webhook signature invalid (400)

Assurez-vous que le secret DODO_WEBHOOK_SECRET de la fonction correspond au secret de signature du endpoint dans le tableau de bord Dodo Payments.
Confirmez que vous avez déployé la dernière fonction dodo-webhook.
La fonction vérifie les en-têtes Standard Webhooks webhook-id, webhook-signature et webhook-timestamp. Assurez-vous qu’un proxy ne les supprime pas.

Database push fails

Vérifiez la syntaxe DATABASE_URL.
La connexion directe (db.[project-ref].supabase.co:5432) utilise IPv6, sauf si votre projet dispose de l’extension IPv4. Sur un réseau IPv4 uniquement, utilisez la chaîne de connexion du pooler de session à la place (documentation sur les connexions Supabase).
Attendez 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.
Utilisez la même URI dans Google Cloud et dans le fournisseur Supabase Auth.

Pour consulter le dépôt d’origine et les étapes détaillées, consultez dodo-supabase-subscription-starter.

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

GitHub Repository

Live Demo

Vue d’ensemble

Next.js Adaptor

Express Adaptor

Prérequis

Démarrage rapide

Contenu inclus

Fichiers et chemins clés

Variables d’environnement

Vérification et résolution des problèmes

GitHub Repository

Live Demo

​Vue d’ensemble

Next.js Adaptor

Express Adaptor

​Prérequis

​Démarrage rapide

​Contenu inclus

​Fichiers et chemins clés

​Variables d’environnement

​Vérification et résolution des problèmes

Vue d’ensemble

Prérequis

Démarrage rapide

Contenu inclus

Fichiers et chemins clés

Variables d’environnement

Vérification et résolution des problèmes