Supabase 보일러플레이트

GitHub Repository

최소 구성의 Next.js + Supabase + Dodo Payments 구독 보일러플레이트

Live Demo

배포된 데모 살펴보기

개요

Next.js 15, React 19, Supabase, Drizzle ORM 및 Dodo Payments을 사용한 프로덕션 준비가 완료된 구독 보일러플레이트입니다. Google OAuth, 구독 결제, 웹훅 처리, 데이터베이스 스키마 및 기본 대시보드가 기본으로 제공됩니다.

기존 앱에 라우트 핸들러만 필요한 경우 전용 adaptor를 참조하세요: Next.js Adaptor 및 Express Adaptor.

사전 요구 사항

Node.js 18+ (또는 Bun 1.0+)
Supabase 프로젝트 (URL, Anon key, Service role key, Database URL)
Dodo Payments 계정 (API key, Webhook secret)
Google Cloud OAuth client (Client ID 및 Secret)

빠른 시작

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

Create Supabase project

Supabase 프로젝트를 생성하고 다음 항목을 복사합니다:

NEXT_PUBLIC_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY
SUPABASE_SERVICE_ROLE_KEY
DATABASE_URL (Connection string)

Configure Google OAuth

Google Cloud에서 redirect URI를 https://[your-project-ref].supabase.co/auth/v1/callback로 설정한 다음, Client ID와 Secret을 사용하여 Supabase Auth에서 Google provider를 활성화합니다.

Configure Dodo Payments

Dodo 대시보드에서 API key와 Webhook secret을 생성합니다. 개발 중에는 environment를 test_mode로 설정합니다.

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

secret을 커밋하지 마세요. 배포 환경에서는 environment variables를 사용합니다.

Provision database schema

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

생성된 테이블: users, subscriptions, payments.

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":{}}'

Add webhook in Dodo Payments

endpoint URL을 다음과 같이 설정합니다:

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

payment 및 subscription 이벤트를 선택합니다.

Create products and features

Dodo 대시보드 → Products → Create Product로 이동합니다. 필요에 따라 metadata를 추가합니다:

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

pricing UI는 이 features 배열을 읽고 동적으로 렌더링합니다.

Run the dev server

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

http://localhost:3000을 엽니다.

포함된 항목

Supabase를 통한 인증 (Google OAuth 구성 완료)
Dodo Payments를 통한 구독 결제
웹훅을 위한 Supabase Edge Function (dodo-webhook)
Drizzle ORM 스키마 및 migrations
invoices, subscription status 및 plan features가 포함된 대시보드

엔드투엔드 테스트를 완료할 때까지 DODO_PAYMENTS_ENVIRONMENT를 test_mode로 유지합니다.

주요 파일 및 경로

Edge Function
Next.js routes
Database (Drizzle)

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

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

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

환경 변수

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=

검증 및 문제 해결

Webhook signature invalid (401)

DODO_WEBHOOK_SECRET가 Dodo 대시보드의 값과 일치하는지 확인합니다
최신 dodo-webhook function을 배포했는지 확인합니다
function에서 header name이 올바른지 확인합니다 (Dodo-Signature)

Database push fails

DATABASE_URL syntax 및 Supabase network egress를 확인합니다
프로젝트 생성 후 첫 push를 수행하기 전에 약 2~3분 정도 기다립니다

OAuth redirect mismatch

Redirect URI는 https://[ref].supabase.co/auth/v1/callback여야 합니다
Google Cloud와 Supabase Auth provider에서 동일한 URI를 사용하는지 확인합니다

이제 Supabase와 Dodo Payments로 구축된 구독 SaaS 스캐폴드를 사용할 수 있습니다.

원본 repository 및 자세한 단계: dodo-supabase-subscription-starter.

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

GitHub Repository

Live Demo

개요

사전 요구 사항

빠른 시작

포함된 항목

주요 파일 및 경로

환경 변수

검증 및 문제 해결

GitHub Repository

Live Demo

​개요

​사전 요구 사항

​빠른 시작

​포함된 항목

​주요 파일 및 경로

​환경 변수

​검증 및 문제 해결

개요

사전 요구 사항

빠른 시작

포함된 항목

주요 파일 및 경로

환경 변수

검증 및 문제 해결