Boilerplate do Supabase

Use o starter oficial de assinaturas Next.js + Supabase + <CardGroup cols={2}> para lançar assinaturas rapidamente. Inclui autenticação, esquema de banco de dados, handler de webhook e UI de preços.

GitHub Repository

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

Live Demo

Explore a demo implantada

​

Visão geral

Um boilerplate pronto para produção para assinaturas usando Next.js 15, React 19, Supabase, Drizzle ORM e Dodo Payments. Ele inclui Google OAuth, checkout de assinaturas, tratamento de webhooks, esquema de banco de dados e um dashboard básico.

Se você precisa apenas de route handlers para um app existente, consulte os adaptadores dedicados: Adaptador Next.js e Adaptador Express.

​

Pré-requisitos

• Node.js 18+ (ou Bun 1.0+)
• Projeto do Supabase (URL, chave Anon, chave de Service role, URL do banco de dados)
• Conta do Dodo Payments (chave de API, segredo do Webhook)
• Cliente OAuth do Google Cloud (Client ID e Secret)

​

Início rápido

1. 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
   
2. Create Supabase project

   Crie um projeto do Supabase e copie:

   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY
   • SUPABASE_SERVICE_ROLE_KEY
   • DATABASE_URL (string de conexão)
3. Configure Google OAuth

   Defina o URI de redirecionamento como: https://[your-project-ref].supabase.co/auth/v1/callback no Google Cloud e ative o provedor Google no Supabase Auth usando seu Client ID e Secret.

4. Configure Dodo Payments

   Gere uma chave de API e um segredo de Webhook no dashboard do Dodo. Defina o ambiente como test_mode durante o desenvolvimento.

5. 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 faça commit de secrets. Use variáveis de ambiente nos ambientes de implantação.

6. Provision database schema

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

   Tabelas criadas: users, subscriptions, payments.

7. 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":{}}'
   
8. Add webhook in Dodo Payments

   Defina a URL do endpoint como:

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

   Selecione os eventos de pagamento e assinatura.

9. Create products and features

   No dashboard do Dodo → Products → Create Product. Opcionalmente, adicione metadados:

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

   A UI de preços lê este array features e o renderiza dinamicamente.

10. Run the dev server

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

    Abra http://localhost:3000.

​

O que está incluído

• Autenticação via Supabase (Google OAuth configurado)
• Checkout de assinaturas via Dodo Payments
• Supabase Edge Function para webhooks (dodo-webhook)
• Esquema e migrações do Drizzle ORM
• Dashboard com faturas, status da assinatura e recursos do plano

Mantenha DODO_PAYMENTS_ENVIRONMENT como test_mode até concluir os testes de ponta a ponta.

​

Arquivos e caminhos principais

Edge Function

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

Next.js routes

app/(marketing)/*     # landing + pricing UI
app/(dashboard)/*     # protected pages
app/api/*             # server actions & helpers

Database (Drizzle)

lib/db/schema.ts      # users, subscriptions, payments
lib/db/index.ts       # client

​

Variáveis de ambiente

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=

​

Verificação e solução de problemas

Webhook signature invalid (401)

• Verifique se DODO_WEBHOOK_SECRET corresponde ao valor do dashboard do Dodo
• Confirme se você implantou a função dodo-webhook mais recente
• Verifique se o nome do header está correto na sua função (Dodo-Signature)

Database push fails

• Verifique a sintaxe de DATABASE_URL e a saída de rede do Supabase
• Aguarde cerca de 2–3 minutos após a criação do projeto antes do primeiro push

OAuth redirect mismatch

• O URI de redirecionamento deve ser https://[ref].supabase.co/auth/v1/callback
• Garanta o mesmo valor no Google Cloud e no provedor do Supabase Auth

Agora você tem um SaaS de assinaturas funcional, criado com Supabase e Dodo Payments.

Repositório original e etapas detalhadas: dodo-supabase-subscription-starter.