Supabase Boilerplate

GitHub Repository

最小構成の Next.js、Supabase、Dodo Payments サブスクリプションボイラープレートです。

Live Demo

デプロイ済みのデモを確認できます。

概要

Supabase サブスクリプションスターターは、Dodo Payments でサブスクリプションを販売する Next.js 15 および React 19 アプリです。Supabase は Google OAuth サインインと Postgres データベースを提供し、Drizzle ORM がスキーマを定義します。Supabase Edge Function が Dodo Payments webhook を受信して支払いとサブスクリプションを保存し、基本的なダッシュボードには各ユーザーのプランと請求書が表示されます。既存のアプリに checkout、Customer Portal、webhook の route handler だけが必要な場合は、代わりに framework adaptor を使用してください。

Next.js Adaptor

Express Adaptor

前提条件

開始する前に、次のものが必要です。

Node.js 18 以降、または Bun 1.0 以降。
Supabase プロジェクト。URL、anon key、service role key、データベース接続文字列が必要です。
API key と webhook signing secret 用の Dodo Payments アカウント。
Client ID と Client Secret 用の Google Cloud OAuth client。

クイックスタート

Clone and Install

リポジトリをクローンし、Bun、npm、または 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

Supabase プロジェクトを作成します。以降の手順では、プロジェクト参照と https://[your-project-ref].supabase.co のサブドメインを使用します。次の値をコピーします。

NEXT_PUBLIC_SUPABASE_URL（プロジェクト URL）
NEXT_PUBLIC_SUPABASE_ANON_KEY（anon key）
SUPABASE_SERVICE_ROLE_KEY（service role key）
DATABASE_URL（データベース接続文字列）

Configure Google OAuth

Google Cloud で、次の authorized redirect URI を OAuth client に追加します。https://[your-project-ref].supabase.co/auth/v1/callback。その後、Supabase Auth で Client ID と Client Secret を使用して Google provider を有効にします。

Configure Dodo Payments

サイドバーの Live Mode スイッチをオフにした状態で、Dodo Payments ダッシュボードの Developer → API Keys から API key を作成します。開発中は DODO_PAYMENTS_ENVIRONMENT を test_mode に設定したままにします。

Add the Webhook in Dodo Payments

Developer → Webhooks で、この URL を使用する endpoint を追加します。この endpoint を提供する function は後の手順でデプロイします。

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

function が処理する payment および subscription event を選択します。

Payment event：payment.succeeded、payment.failed、payment.processing、payment.cancelled
Subscription event：subscription.active、subscription.plan_changed、subscription.renewed、subscription.on_hold、subscription.cancelled、subscription.expired、subscription.failed

endpoint の signing secret をコピーします。これは DODO_WEBHOOK_SECRET の値です。

Create .env.local

ルートディレクトリに .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

Next.js アプリは、DODO_WEBHOOK_SECRET を除くこのファイル内のすべての変数を読み取ります。Edge Function は Supabase secrets から DODO_WEBHOOK_SECRET を読み取ります。これは function のデプロイ時に設定します。

secret をコミットしないでください。デプロイ環境では、environment variable として設定します。

Provision the Database Schema

Drizzle スキーマを Supabase データベースに push します。

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

作成されるテーブル：users、subscriptions、payments。

Deploy the Webhook Function

Supabase にログインし、signing secret を function secret として保存して、dodo-webhook Edge Function をデプロイします。[your-project-ref] をプロジェクト参照に置き換えます。

# 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 は Supabase auth token なしで function を呼び出せます。Supabase はデフォルトで SUPABASE_URL と SUPABASE_SERVICE_ROLE_KEY を function に提供します。デプロイを確認するには、署名なしのリクエストを送信します。

cURL

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

Invalid webhook signature を含む 400 response は、function が実行され、secret が設定されていることを示します。Server configuration error を含む 500 response は、DODO_WEBHOOK_SECRET が設定されていないことを示します。署名付きの test event を送信するには、Developer → Webhooks で endpoint を開き、Testing tab を使用します。

Create Products and Features

Dodo Payments ダッシュボードの Products で Add Product をクリックし、各プラン用の subscription product を作成します。アプリにプランの feature を一覧表示する場合は、任意で key が features、value が文字列の JSON array である metadata entry を追加します。product の metadata は次のようになります。

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

Metadata の値は文字列、数値、または boolean であるため、array は JSON string として保存します。pricing UI は features の値を解析し、各項目を表示します。

Run the Dev Server

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

http://localhost:3000 を開き、Google でサインインします。

これで Supabase と Dodo Payments を使用した、動作する subscription SaaS の基盤が完成しました。エンドツーエンドで確認するには、test card でプランを購読します。webhook の到着後、ダッシュボードに新しいプランが表示されます。

含まれるもの

Google OAuth を設定した Supabase による認証
Dodo Payments による subscription checkout
webhook 用の Supabase Edge Function（dodo-webhook）
Drizzle ORM スキーマ、migration 用の db:generate および db:migrate script
請求書、subscription status、plan feature を備えた dashboard
プラン変更、subscription のキャンセル、キャンセルした subscription の復元を行う server action

エンドツーエンドテストが完了するまで、DODO_PAYMENTS_ENVIRONMENT を test_mode に設定したままにします。本番稼働するには、live_mode に設定し、live mode の API key を使用します。

主要なファイルとパス

webhook handler、アプリの route、データベーススキーマは次のファイルにあります。

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 アプリと Edge Function は次の変数を読み取ります。

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 にあるアプリの admin client には必要です。自分で追加してください。

Dodo Payments

DODO_PAYMENTS_API_KEY=
DODO_WEBHOOK_SECRET=
DODO_PAYMENTS_ENVIRONMENT=test_mode|live_mode

Google OAuth

アプリは Google の credential を environment variable から読み取りません。Supabase Auth の Google provider 設定に Client ID と Client Secret を入力し、Google Cloud の OAuth client に次の redirect URI を追加します。

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

検証とトラブルシューティング

Webhook signature invalid (400)

関数の DODO_WEBHOOK_SECRET secret が、Dodo Payments ダッシュボードにあるエンドポイントの signing secret と一致していることを確認してください。
最新の dodo-webhook 関数をデプロイしたことを確認してください。
この関数は、Standard Webhooks のヘッダー webhook-id、webhook-signature、webhook-timestamp を検証します。プロキシによってこれらが削除されないことを確認してください。

Database push fails

DATABASE_URL の構文を確認してください。
直接接続（db.[project-ref].supabase.co:5432）は、プロジェクトに IPv4 アドオンがない限り IPv6 を使用します。IPv4 のみのネットワークでは、代わりにセッションプーラーの接続文字列を使用してください（Supabase の接続に関するドキュメント）。
プロジェクトを作成してから、最初の push を実行するまで 2～3 分待ってください。

OAuth redirect mismatch

リダイレクト URI は https://[ref].supabase.co/auth/v1/callback である必要があります。
Google Cloud と Supabase Auth provider の両方で同じ URI を使用してください。

元のリポジトリと詳細な手順については、dodo-supabase-subscription-starter を参照してください。

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

GitHub Repository

Live Demo

概要

Next.js Adaptor

Express Adaptor

前提条件

クイックスタート

含まれるもの

主要なファイルとパス

Environment Variables

検証とトラブルシューティング

GitHub Repository

Live Demo

​概要

Next.js Adaptor

Express Adaptor

​前提条件

​クイックスタート

​含まれるもの

​主要なファイルとパス

​Environment Variables

​検証とトラブルシューティング

概要

前提条件

クイックスタート

含まれるもの

主要なファイルとパス

Environment Variables

検証とトラブルシューティング