Plantilla base de Supabase

GitHub Repository

Boilerplate mínimo de suscripciones con Next.js + Supabase + Dodo Payments

Live Demo

Explora la demo implementada

Descripción general

Un boilerplate listo para producción para suscripciones que utiliza Next.js 15, React 19, Supabase, Drizzle ORM y Dodo Payments. Incluye Google OAuth, checkout de suscripciones, gestión de webhooks, esquema de base de datos y un dashboard básico.

Si solo necesitas route handlers para una aplicación existente, consulta los adaptadores específicos: adaptador de Next.js y adaptador de Express.

Requisitos previos

Node.js 18+ (o Bun 1.0+)
Proyecto de Supabase (URL, clave Anon, clave de rol de servicio, URL de la base de datos)
Cuenta de Dodo Payments (API key, secreto de Webhook)
Cliente OAuth de Google Cloud (Client ID y Secret)

Inicio rápido

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

Crea un proyecto de Supabase y copia:

NEXT_PUBLIC_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY
SUPABASE_SERVICE_ROLE_KEY
DATABASE_URL (cadena de conexión)

Configure Google OAuth

Establece la URI de redirección en: https://[your-project-ref].supabase.co/auth/v1/callback en Google Cloud y, a continuación, habilita el proveedor de Google en Supabase Auth mediante tu Client ID y Secret.

Configure Dodo Payments

Genera una API key y un secreto de Webhook desde el dashboard de Dodo. Establece el entorno en test_mode durante el desarrollo.

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

Nunca incluyas secretos en el commit. Usa variables de entorno en los entornos de implementación.

Provision database schema

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

Tablas creadas: 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

Establece la URL del endpoint en:

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

Selecciona los eventos de pagos y suscripciones.

Create products and features

En el dashboard de Dodo → Products → Create Product. Opcionalmente, añade metadatos:

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

La UI de precios lee este array features y lo renderiza dinámicamente.

Run the dev server

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

Abre http://localhost:3000.

Qué incluye

Autenticación mediante Supabase (Google OAuth configurado)
Checkout de suscripciones mediante Dodo Payments
Supabase Edge Function para webhooks (dodo-webhook)
Esquema y migraciones de Drizzle ORM
Dashboard con facturas, estado de la suscripción y funciones del plan

Mantén DODO_PAYMENTS_ENVIRONMENT como test_mode hasta completar las pruebas de extremo a extremo.

Archivos y rutas principales

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 de entorno

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=

Verificación y solución de problemas

Webhook signature invalid (401)

Asegúrate de que DODO_WEBHOOK_SECRET coincida con el valor del dashboard de Dodo
Confirma que implementaste la función dodo-webhook más reciente
Verifica que el nombre del encabezado sea correcto en tu función (Dodo-Signature)

Database push fails

Comprueba la sintaxis de DATABASE_URL y la salida de red de Supabase
Espera aproximadamente 2–3 minutos después de crear el proyecto antes del primer push

OAuth redirect mismatch

La URI de redirección debe ser https://[ref].supabase.co/auth/v1/callback
Asegúrate de que sea la misma en Google Cloud y en el proveedor de Supabase Auth

Ahora tienes una base funcional de SaaS de suscripciones creada con Supabase y Dodo Payments.

Repositorio original y pasos detallados: dodo-supabase-subscription-starter.

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

GitHub Repository

Live Demo

Descripción general

Requisitos previos

Inicio rápido

Qué incluye

Archivos y rutas principales

Variables de entorno

Verificación y solución de problemas

GitHub Repository

Live Demo

​Descripción general

​Requisitos previos

​Inicio rápido

​Qué incluye

​Archivos y rutas principales

​Variables de entorno

​Verificación y solución de problemas

Descripción general

Requisitos previos

Inicio rápido

Qué incluye

Archivos y rutas principales

Variables de entorno

Verificación y solución de problemas