Supabase Boilerplate

GitHub Repository

Minimal Next.js, Supabase और Dodo Payments subscription boilerplate।

Live Demo

Deployed demo देखें।

अवलोकन

Supabase subscription starter एक Next.js 15 और React 19 app है, जो Dodo Payments के साथ subscriptions बेचता है। Supabase Google OAuth sign-in और Postgres database प्रदान करता है, और Drizzle ORM schema को परिभाषित करता है। एक Supabase Edge Function Dodo Payments webhooks प्राप्त करके payments और subscriptions को store करता है, और एक basic dashboard प्रत्येक user का plan और invoices दिखाता है। अगर आपको किसी मौजूदा app के लिए केवल checkout, Customer Portal और webhook route handlers चाहिए, तो इसके बजाय framework adaptor का उपयोग करें:

Next.js Adaptor

Express Adaptor

आवश्यकताएँ

शुरू करने से पहले, आपको इनकी आवश्यकता होगी:

Node.js 18 या बाद का संस्करण, या Bun 1.0 या बाद का संस्करण।
एक Supabase project। आपको इसका URL, anon key, service role key और database connection string चाहिए।
एक Dodo Payments account, API key और webhook signing secret के लिए।
एक Google Cloud OAuth client, इसके Client ID और Client Secret के लिए।

Quickstart

Clone and Install

Repository को clone करें, फिर Bun, npm या pnpm के साथ dependencies 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 a Supabase Project

एक Supabase project बनाएँ। बाद के steps में इसके project reference, यानी https://[your-project-ref].supabase.co में मौजूद subdomain, का उपयोग किया जाएगा। इन values को copy करें:

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

Configure Google OAuth

Google Cloud में अपने OAuth client में यह authorized redirect URI जोड़ें: https://[your-project-ref].supabase.co/auth/v1/callback। फिर Supabase Auth में अपने Client ID और Client Secret के साथ Google provider enable करें।

Configure Dodo Payments

Sidebar में Live Mode switch बंद होने पर, Dodo Payments dashboard में Developer → API Keys के अंतर्गत एक API key बनाएँ। Development के दौरान DODO_PAYMENTS_ENVIRONMENT को test_mode पर सेट रखें।

Add the Webhook in Dodo Payments

Developer → Webhooks के अंतर्गत, इस URL के साथ एक endpoint जोड़ें। इसे serve करने वाले function को आप बाद के step में deploy करेंगे।

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

Function द्वारा handle किए जाने वाले payment और subscription events चुनें:

Payment events: payment.succeeded, payment.failed, payment.processing, और payment.cancelled
Subscription events: subscription.active, subscription.plan_changed, subscription.renewed, subscription.on_hold, subscription.cancelled, subscription.expired, और subscription.failed

Endpoint का signing secret copy करें। यह DODO_WEBHOOK_SECRET की value है।

Create .env.local

Root directory में एक .env.local file बनाएँ:

# 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

Next.js app इस file में मौजूद हर variable को पढ़ता है, सिवाय DODO_WEBHOOK_SECRET के। Edge Function DODO_WEBHOOK_SECRET को अपने Supabase secrets से पढ़ता है, जिन्हें आप इसे deploy करते समय set करेंगे।

Secrets को commit न करें। Deployed environments में इन्हें environment variables के रूप में set करें।

Provision the Database Schema

Drizzle schema को अपने Supabase database में push करें:

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

बनाई गई tables: users, subscriptions, payments।

Deploy the Webhook Function

Supabase में log in करें, signing secret को function secret के रूप में store करें, और dodo-webhook Edge Function को deploy करें। [your-project-ref] को अपने project reference से replace करें:

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

deploy:webhook script supabase functions deploy dodo-webhook --no-verify-jwt चलाता है, ताकि Dodo Payments function को Supabase auth token के बिना call कर सके। Supabase डिफ़ॉल्ट रूप से function को SUPABASE_URL और SUPABASE_SERVICE_ROLE_KEY उपलब्ध कराता है।Deployment जाँचने के लिए, एक unsigned request भेजें:

cURL

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

400 response के साथ Invalid webhook signature का अर्थ है कि function चल रहा है और उसके पास secret है। 500 response के साथ Server configuration error का अर्थ है कि DODO_WEBHOOK_SECRET set नहीं है। Signed test event भेजने के लिए, Developer → Webhooks में endpoint खोलें और उसका Testing tab इस्तेमाल करें।

Create Products and Features

Dodo Payments dashboard में Products के अंतर्गत, प्रत्येक plan के लिए subscription product बनाने हेतु Add Product पर click करें। App में plan features की list दिखाने के लिए, वैकल्पिक रूप से key features और value के रूप में strings की JSON array वाली metadata entry जोड़ें। Product का metadata इस तरह दिखेगा:

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

Metadata values strings, numbers या booleans होती हैं, इसलिए array को JSON string के रूप में store करें। Pricing UI features value को parse करके प्रत्येक item को render करता है।

Run the Dev Server

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

http://localhost:3000 खोलें और Google के साथ sign in करें।

अब आपके पास Supabase और Dodo Payments के साथ तैयार किया गया एक working subscription SaaS scaffold है। इसे end to end confirm करने के लिए, test card के साथ किसी plan की subscription लें। Webhook आने के बाद, dashboard आपका नया plan दिखाएगा।

इसमें क्या शामिल है

Supabase के माध्यम से authentication, जिसमें Google OAuth configured है
Dodo Payments के माध्यम से subscription checkout
Webhooks के लिए Supabase Edge Function (dodo-webhook)
Drizzle ORM schema, migrations के लिए db:generate और db:migrate scripts के साथ
Invoices, subscription status और plan features वाला dashboard
Plans बदलने, subscription cancel करने और cancelled subscription restore करने के लिए server actions

End-to-end tests पूरे करने तक DODO_PAYMENTS_ENVIRONMENT को test_mode पर set रखें। Live जाने के लिए, इसे live_mode पर set करें और live mode API key का उपयोग करें।

मुख्य Files और Paths

Webhook handler, app routes और database schema इन files में मौजूद हैं:

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

Next.js app और Edge Function इन variables को पढ़ते हैं:

Supabase

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=
DATABASE_URL=

.env.example में SUPABASE_SERVICE_ROLE_KEY सूचीबद्ध नहीं है, लेकिन lib/supabase/admin.ts में app के admin client को इसकी आवश्यकता है। इसे स्वयं जोड़ें।

Dodo Payments

DODO_PAYMENTS_API_KEY=
DODO_WEBHOOK_SECRET=
DODO_PAYMENTS_ENVIRONMENT=test_mode|live_mode

Google OAuth

App Google credentials को environment variables से नहीं पढ़ता। Supabase Auth की Google provider settings में Client ID और Client Secret दर्ज करें, और Google Cloud में OAuth client में यह redirect URI जोड़ें:

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

Verification और Troubleshooting

Webhook signature invalid (400)

सुनिश्चित करें कि फ़ंक्शन का DODO_WEBHOOK_SECRET secret, Dodo Payments dashboard में endpoint के signing secret से मेल खाता हो।
पुष्टि करें कि आपने नवीनतम dodo-webhook फ़ंक्शन deploy किया है।
फ़ंक्शन Standard Webhooks headers webhook-id, webhook-signature, और webhook-timestamp को verify करता है। सुनिश्चित करें कि कोई proxy इन्हें strip न करे।

Database push fails

DATABASE_URL syntax जाँचें।
Direct connection (db.[project-ref].supabase.co:5432) IPv6 का उपयोग करता है, जब तक कि आपके project में IPv4 add-on न हो। केवल IPv4 वाले network पर, इसके बजाय session pooler connection string का उपयोग करें (Supabase connection docs)।
Project बनाने के बाद पहली push से पहले 2–3 मिनट प्रतीक्षा करें।

OAuth redirect mismatch

Redirect URI https://[ref].supabase.co/auth/v1/callback होना चाहिए।
Google Cloud और Supabase Auth provider, दोनों में समान URI का उपयोग करें।

Original repository और विस्तृत steps के लिए dodo-supabase-subscription-starter देखें।

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

GitHub Repository

Live Demo

अवलोकन

Next.js Adaptor

Express Adaptor

आवश्यकताएँ

Quickstart

इसमें क्या शामिल है

मुख्य Files और Paths

Environment Variables

Verification और Troubleshooting

GitHub Repository

Live Demo

​अवलोकन

Next.js Adaptor

Express Adaptor

​आवश्यकताएँ

​Quickstart

​इसमें क्या शामिल है

​मुख्य Files और Paths

​Environment Variables

​Verification और Troubleshooting

अवलोकन

आवश्यकताएँ

Quickstart

इसमें क्या शामिल है

मुख्य Files और Paths

Environment Variables

Verification और Troubleshooting