Supabase Boilerplate

GitHub Repository

Minimal boilerplate för prenumerationer med Next.js, Supabase och Dodo Payments.

Live Demo

Utforska den distribuerade demon.

Översikt

Startmallen för Supabase-prenumerationer är en Next.js 15- och React 19-app som säljer prenumerationer med Dodo Payments. Supabase tillhandahåller Google OAuth-inloggning och Postgres-databasen, och Drizzle ORM definierar schemat. En Supabase Edge Function tar emot Dodo Payments-webhooks och lagrar betalningar och prenumerationer, och en enkel dashboard visar varje användares plan och fakturor. Om du endast behöver checkout, Customer Portal och webhook-route handlers för en befintlig app kan du använda en framework-adapter i stället:

Next.js Adaptor

Express Adaptor

Förkunskaper

Innan du börjar behöver du:

Node.js 18 eller senare, eller Bun 1.0 eller senare.
Ett Supabase-projekt. Du behöver dess URL, anon key, service role key och databasens anslutningssträng.
Ett Dodo Payments-konto för en API key och en webhook signing secret.
En Google Cloud OAuth-klient med dess Client ID och Client Secret.

Snabbstart

Clone and Install

Klona repositoryt och installera sedan beroenden med Bun, npm eller 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

Skapa ett Supabase-projekt. Senare steg använder projektets referens, underdomänen i https://[your-project-ref].supabase.co. Kopiera dessa värden:

NEXT_PUBLIC_SUPABASE_URL, projektets URL
NEXT_PUBLIC_SUPABASE_ANON_KEY, anon key
SUPABASE_SERVICE_ROLE_KEY, service role key
DATABASE_URL, databasens anslutningssträng

Configure Google OAuth

I Google Cloud lägger du till denna auktoriserade redirect URI i din OAuth-klient: https://[your-project-ref].supabase.co/auth/v1/callback. Aktivera sedan Google-providern i Supabase Auth med ditt Client ID och Client Secret.

Configure Dodo Payments

Med reglaget Live Mode i sidofältet avstängt skapar du en API key under Developer → API Keys i Dodo Payments-dashboarden. Låt DODO_PAYMENTS_ENVIRONMENT vara inställd på test_mode medan du utvecklar.

Add the Webhook in Dodo Payments

Under Developer → Webhooks lägger du till en endpoint med denna URL. Du distribuerar funktionen som hanterar den i ett senare steg.

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

Välj de betalnings- och prenumerationshändelser som funktionen hanterar:

Betalningshändelser: payment.succeeded, payment.failed, payment.processing och payment.cancelled
Prenumerationshändelser: subscription.active, subscription.plan_changed, subscription.renewed, subscription.on_hold, subscription.cancelled, subscription.expired och subscription.failed

Kopiera endpointens signing secret. Det är värdet för DODO_WEBHOOK_SECRET.

Create .env.local

Skapa en .env.local-fil i rotkatalogen:

# 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-appen läser alla variabler i denna fil utom DODO_WEBHOOK_SECRET. Edge Function läser DODO_WEBHOOK_SECRET från sina Supabase secrets, som du anger när du distribuerar den.

Lägg inte till secrets i repositoryt. I distribuerade miljöer anger du dem som environment variables.

Provision the Database Schema

Push:a Drizzle-schemat till din Supabase-databas:

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

Skapade tabeller: users, subscriptions och payments.

Deploy the Webhook Function

Logga in på Supabase, lagra signing secret som en function secret och distribuera dodo-webhook Edge Function. Ersätt [your-project-ref] med din projektreferens:

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

Skriptet deploy:webhook kör supabase functions deploy dodo-webhook --no-verify-jwt, så att Dodo Payments kan anropa funktionen utan en Supabase auth token. Supabase tillhandahåller SUPABASE_URL och SUPABASE_SERVICE_ROLE_KEY till funktionen som standard.Kontrollera distributionen genom att skicka en osignerad 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":{}}'

Ett svar med 400 och Invalid webhook signature betyder att funktionen körs och har sin secret. Ett svar med 500 och Server configuration error betyder att DODO_WEBHOOK_SECRET inte är angiven. Om du vill skicka en signerad testhändelse öppnar du endpointen under Developer → Webhooks och använder fliken Testing.

Create Products and Features

Under Products i Dodo Payments-dashboarden klickar du på Add Product för att skapa en prenumerationsprodukt för varje plan. Om du vill visa planfunktioner i appen kan du lägga till en metadata-post med nyckeln features och en JSON-array med strängar som värde. Produktens metadata ser då ut så här:

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

Metadata-värden är strängar, tal eller booleska värden, så lagra arrayen som en JSON-sträng. Prisgränssnittet tolkar värdet features och renderar varje objekt.

Run the Dev Server

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

Öppna http://localhost:3000 och logga in med Google.

Du har nu en fungerande SaaS-lösning för prenumerationer, uppbyggd med Supabase och Dodo Payments. Bekräfta att allt fungerar från början till slut genom att prenumerera på en plan med ett testkort. När webhooken har kommit fram visar dashboarden din nya plan.

Detta ingår

Autentisering via Supabase, med Google OAuth konfigurerat
Checkout för prenumerationer via Dodo Payments
En Supabase Edge Function för webhooks (dodo-webhook)
Ett Drizzle ORM-schema, med skripten db:generate och db:migrate för migreringar
En dashboard med fakturor, prenumerationsstatus och planfunktioner
Server actions för att byta plan, avsluta en prenumeration och återställa en avslutad prenumeration

Låt DODO_PAYMENTS_ENVIRONMENT vara inställd på test_mode tills du har slutfört tester från början till slut. För att gå live ställer du in den på live_mode och använder en live mode API key.

Viktiga filer och sökvägar

Webhook-hanteraren, appens routes och databasschemat finns i dessa filer:

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

Miljövariabler

Next.js-appen och Edge Function läser dessa variabler:

Supabase

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=
DATABASE_URL=

.env.example listar inte SUPABASE_SERVICE_ROLE_KEY, men appens admin-klient i lib/supabase/admin.ts behöver den. Lägg till den själv.

Dodo Payments

DODO_PAYMENTS_API_KEY=
DODO_WEBHOOK_SECRET=
DODO_PAYMENTS_ENVIRONMENT=test_mode|live_mode

Google OAuth

Appen läser inte Google-autentiseringsuppgifter från environment variables. Ange Client ID och Client Secret i Google-providerinställningarna i Supabase Auth och lägg till denna redirect URI i OAuth-klienten i Google Cloud:

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

Verifiering och felsökning

Webhook signature invalid (400)

Kontrollera att funktionens DODO_WEBHOOK_SECRET secret matchar endpointens signing secret i Dodo Payments-dashboarden.
Bekräfta att du har distribuerat den senaste dodo-webhook funktionen.
Funktionen verifierar Standard Webhooks-headers webhook-id, webhook-signature och webhook-timestamp. Kontrollera att en proxy inte tar bort dem.

Database push fails

Kontrollera syntaxen för DATABASE_URL.
Den direkta anslutningen (db.[project-ref].supabase.co:5432) använder IPv6 om ditt projekt inte har IPv4-tillägget. På ett nätverk som endast använder IPv4 använder du i stället anslutningssträngen för session pooler (Supabase-anslutningsdokumentation).
Vänta 2–3 minuter efter att du har skapat projektet innan den första pushen.

OAuth redirect mismatch

Redirect-URI:n måste vara https://[ref].supabase.co/auth/v1/callback.
Använd samma URI i Google Cloud och i Supabase Auth-providern.

För originalrepositoryt och detaljerade steg, se dodo-supabase-subscription-starter.

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

GitHub Repository

Live Demo

Översikt

Next.js Adaptor

Express Adaptor

Förkunskaper

Snabbstart

Detta ingår

Viktiga filer och sökvägar

Miljövariabler

Verifiering och felsökning

GitHub Repository

Live Demo

​Översikt

Next.js Adaptor

Express Adaptor

​Förkunskaper

​Snabbstart

​Detta ingår

​Viktiga filer och sökvägar

​Miljövariabler

​Verifiering och felsökning

Översikt

Förkunskaper

Snabbstart

Detta ingår

Viktiga filer och sökvägar

Miljövariabler

Verifiering och felsökning