Boilerplate Supabase

Gunakan starter subscription resmi Next.js + Supabase + <CardGroup cols={2}> untuk meluncurkan subscription dengan cepat. Mencakup autentikasi, skema database, webhook handler, dan UI harga.

GitHub Repository

Boilerplate subscription Next.js + Supabase + Dodo Payments minimal

Live Demo

Lihat demo yang telah di-deploy

​

Ringkasan

Boilerplate siap produksi untuk subscription menggunakan Next.js 15, React 19, Supabase, Drizzle ORM, dan Dodo Payments. Paket ini mencakup Google OAuth, checkout subscription, penanganan webhook, skema database, dan dashboard dasar.

Jika Anda hanya memerlukan route handler untuk aplikasi yang sudah ada, lihat adaptor khusus berikut: Adaptor Next.js dan Adaptor Express.

​

Prasyarat

• Node.js 18+ (atau Bun 1.0+)
• Project Supabase (URL, Anon key, Service role key, Database URL)
• Akun Dodo Payments (API key, Webhook secret)
• Client OAuth Google Cloud (Client ID dan Secret)

​

Mulai cepat

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

   Buat project Supabase dan salin:

   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY
   • SUPABASE_SERVICE_ROLE_KEY
   • DATABASE_URL (Connection string)
3. Configure Google OAuth

   Atur redirect URI ke: https://[your-project-ref].supabase.co/auth/v1/callback di Google Cloud, lalu aktifkan provider Google di Supabase Auth menggunakan Client ID dan Secret Anda.

4. Configure Dodo Payments

   Buat API key dan Webhook secret dari dashboard Dodo. Atur environment ke test_mode selama pengembangan.

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
   

   Jangan pernah melakukan commit terhadap secret. Gunakan environment variables di environment deployment.

6. Provision database schema

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

   Tabel yang dibuat: 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

   Atur endpoint URL ke:

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

   Pilih event pembayaran dan subscription.

9. Create products and features

   Di dashboard Dodo → Products → Create Product. Tambahkan metadata jika diperlukan:

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

   UI harga membaca array features ini dan merendernya secara dinamis.

10. Run the dev server

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

    Buka http://localhost:3000.

​

Yang disertakan

• Autentikasi melalui Supabase (Google OAuth telah dikonfigurasi)
• Checkout subscription melalui Dodo Payments
• Supabase Edge Function untuk webhook (dodo-webhook)
• Skema dan migrasi Drizzle ORM
• Dashboard dengan invoice, status subscription, dan fitur paket

Pertahankan DODO_PAYMENTS_ENVIRONMENT sebagai test_mode hingga Anda menyelesaikan pengujian end-to-end.

​

File dan path penting

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

​

Environment variables

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=

​

Verifikasi dan pemecahan masalah

Webhook signature invalid (401)

• Pastikan DODO_WEBHOOK_SECRET sesuai dengan nilai dari dashboard Dodo
• Pastikan Anda telah men-deploy function dodo-webhook terbaru
• Verifikasi nama header sudah benar di function Anda (Dodo-Signature)

Database push fails

• Periksa sintaks DATABASE_URL dan network egress Supabase
• Tunggu sekitar 2–3 menit setelah pembuatan project sebelum melakukan push pertama

OAuth redirect mismatch

• Redirect URI harus berupa https://[ref].supabase.co/auth/v1/callback
• Pastikan nilainya sama di Google Cloud dan provider Supabase Auth

Sekarang Anda memiliki scaffold SaaS subscription yang berfungsi dengan Supabase dan Dodo Payments.

Repository asli dan langkah-langkah terperinci: dodo-supabase-subscription-starter.