Boilerplate Supabase

GitHub Repository

Boilerplate subscription Next.js, Supabase, dan Dodo Payments minimal.

Live Demo

Jelajahi demo yang telah di-deploy.

Ringkasan

Starter subscription Supabase adalah aplikasi Next.js 15 dan React 19 yang menjual subscription dengan Dodo Payments. Supabase menyediakan Google OAuth sign-in dan database Postgres, sedangkan Drizzle ORM mendefinisikan skema. Supabase Edge Function menerima webhook Dodo Payments dan menyimpan payment serta subscription, sementara dashboard dasar menampilkan plan dan invoice setiap pengguna. Jika Anda hanya memerlukan checkout, Customer Portal, dan route handler webhook untuk aplikasi yang sudah ada, gunakan framework adaptor sebagai gantinya:

Next.js Adaptor

Express Adaptor

Prasyarat

Sebelum memulai, Anda memerlukan:

Node.js 18 atau lebih baru, atau Bun 1.0 atau lebih baru.
Project Supabase. Anda memerlukan URL, anon key, service role key, dan connection string database.
Akun Dodo Payments, untuk API key dan webhook signing secret.
OAuth client Google Cloud, untuk Client ID dan Client Secret-nya.

Quickstart

Clone and Install

Clone repository, lalu install dependencies dengan Bun, npm, atau 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

Buat project Supabase. Langkah-langkah berikutnya menggunakan project reference-nya, yaitu subdomain di https://[your-project-ref].supabase.co. Salin nilai berikut:

NEXT_PUBLIC_SUPABASE_URL, URL project
NEXT_PUBLIC_SUPABASE_ANON_KEY, anon key
SUPABASE_SERVICE_ROLE_KEY, service role key
DATABASE_URL, connection string database

Configure Google OAuth

Di Google Cloud, tambahkan authorized redirect URI ini ke OAuth client Anda: https://[your-project-ref].supabase.co/auth/v1/callback. Kemudian, di Supabase Auth, aktifkan provider Google dengan Client ID dan Client Secret Anda.

Configure Dodo Payments

Dengan switch Live Mode di sidebar dalam keadaan nonaktif, buat API key di Developer → API Keys pada dashboard Dodo Payments. Biarkan DODO_PAYMENTS_ENVIRONMENT tetap disetel ke test_mode selama pengembangan.

Add the Webhook in Dodo Payments

Di Developer → Webhooks, tambahkan endpoint dengan URL ini. Anda akan men-deploy function yang melayaninya pada langkah berikutnya.

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

Pilih event payment dan subscription yang ditangani function:

Event payment: payment.succeeded, payment.failed, payment.processing, dan payment.cancelled
Event subscription: subscription.active, subscription.plan_changed, subscription.renewed, subscription.on_hold, subscription.cancelled, subscription.expired, dan subscription.failed

Salin signing secret endpoint. Nilainya adalah DODO_WEBHOOK_SECRET.

Create .env.local

Buat file .env.local di direktori root:

# 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

Aplikasi Next.js membaca setiap variable dalam file ini kecuali DODO_WEBHOOK_SECRET. Edge Function membaca DODO_WEBHOOK_SECRET dari Supabase secrets, yang Anda tetapkan saat men-deploy-nya.

Jangan commit secrets. Di environment yang telah di-deploy, tetapkan secrets tersebut sebagai environment variables.

Provision the Database Schema

Push skema Drizzle ke database Supabase Anda:

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

Tabel yang dibuat: users, subscriptions, payments.

Deploy the Webhook Function

Login ke Supabase, simpan signing secret sebagai function secret, lalu deploy Edge Function dodo-webhook. Ganti [your-project-ref] dengan project reference Anda:

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

Script deploy:webhook menjalankan supabase functions deploy dodo-webhook --no-verify-jwt, sehingga Dodo Payments dapat memanggil function tanpa token autentikasi Supabase. Supabase menyediakan SUPABASE_URL dan SUPABASE_SERVICE_ROLE_KEY ke function secara default.Untuk memeriksa deployment, kirim request tanpa tanda tangan:

cURL

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

Response 400 dengan Invalid webhook signature berarti function sedang berjalan dan memiliki secret-nya. Response 500 dengan Server configuration error berarti DODO_WEBHOOK_SECRET belum disetel. Untuk mengirim test event bertanda tangan, buka endpoint di Developer → Webhooks dan gunakan tab Testing.

Create Products and Features

Di bagian Products pada dashboard Dodo Payments, klik Add Product untuk membuat product subscription bagi setiap plan. Jika ingin menampilkan fitur plan di aplikasi, tambahkan metadata entry dengan key features dan array JSON berisi string sebagai nilainya. Metadata product kemudian terlihat seperti ini:

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

Nilai metadata berupa string, angka, atau boolean, jadi simpan array sebagai string JSON. UI pricing menguraikan nilai features dan merender setiap item.

Run the Dev Server

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

Buka http://localhost:3000 dan login dengan Google.

Kini Anda memiliki scaffold SaaS subscription yang berfungsi dengan Supabase dan Dodo Payments. Untuk mengonfirmasinya secara end-to-end, berlangganan plan menggunakan kartu test. Setelah webhook tiba, dashboard menampilkan plan baru Anda.

Yang Disertakan

Autentikasi melalui Supabase, dengan Google OAuth yang telah dikonfigurasi
Checkout subscription melalui Dodo Payments
Supabase Edge Function untuk webhook (dodo-webhook)
Skema Drizzle ORM, dengan script db:generate dan db:migrate untuk migration
Dashboard dengan invoice, status subscription, dan fitur plan
Server action untuk mengubah plan, membatalkan subscription, dan memulihkan subscription yang dibatalkan

Biarkan DODO_PAYMENTS_ENVIRONMENT tetap disetel ke test_mode hingga Anda menyelesaikan test end-to-end. Untuk go live, ubah nilainya menjadi live_mode dan gunakan API key live mode.

File dan Path Utama

Webhook handler, route aplikasi, dan skema database berada di file berikut:

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

Environment Variables

Aplikasi Next.js dan Edge Function membaca variable berikut:

Supabase

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=
DATABASE_URL=

.env.example tidak mencantumkan SUPABASE_SERVICE_ROLE_KEY, tetapi admin client aplikasi di lib/supabase/admin.ts memerlukannya. Tambahkan sendiri.

Dodo Payments

DODO_PAYMENTS_API_KEY=
DODO_WEBHOOK_SECRET=
DODO_PAYMENTS_ENVIRONMENT=test_mode|live_mode

Google OAuth

Aplikasi tidak membaca kredensial Google dari environment variables. Masukkan Client ID dan Client Secret di pengaturan provider Google pada Supabase Auth, lalu tambahkan redirect URI ini ke OAuth client di Google Cloud:

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

Verifikasi dan Troubleshooting

Webhook signature invalid (400)

Pastikan secret fungsi DODO_WEBHOOK_SECRET cocok dengan signing secret endpoint di dashboard Dodo Payments.
Konfirmasikan bahwa Anda telah men-deploy fungsi dodo-webhook terbaru.
Fungsi tersebut memverifikasi header Standard Webhooks webhook-id, webhook-signature, dan webhook-timestamp. Pastikan proxy tidak menghapusnya.

Database push fails

Periksa sintaks DATABASE_URL.
Koneksi langsung (db.[project-ref].supabase.co:5432) menggunakan IPv6 kecuali project Anda memiliki add-on IPv4. Pada jaringan yang hanya mendukung IPv4, gunakan connection string session pooler sebagai gantinya (dokumentasi koneksi Supabase).
Tunggu 2–3 menit setelah membuat project sebelum push pertama.

OAuth redirect mismatch

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

Untuk repository asli dan langkah-langkah terperinci, lihat dodo-supabase-subscription-starter.

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

GitHub Repository

Live Demo

Ringkasan

Next.js Adaptor

Express Adaptor

Prasyarat

Quickstart

Yang Disertakan

File dan Path Utama

Environment Variables

Verifikasi dan Troubleshooting

GitHub Repository

Live Demo

​Ringkasan

Next.js Adaptor

Express Adaptor

​Prasyarat

​Quickstart

​Yang Disertakan

​File dan Path Utama

​Environment Variables

​Verifikasi dan Troubleshooting

Ringkasan

Prasyarat

Quickstart

Yang Disertakan

File dan Path Utama

Environment Variables

Verifikasi dan Troubleshooting