> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dodopayments.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Boilerplate Supabase

> Gunakan starter subscription resmi Next.js + Supabase + <CardGroup cols={2}> untuk meluncurkan subscription dengan cepat. Mencakup autentikasi, skema database, webhook handler, dan UI harga.

<CardGroup cols={2}>
  <Card title="GitHub Repository" icon="github" href="https://github.com/dodopayments/dodo-supabase-subscription-starter">
    Boilerplate subscription Next.js + Supabase + Dodo Payments minimal
  </Card>

  <Card title="Live Demo" icon="rocket" href="https://dodopayments-supabase-nextjs.vercel.app">
    Lihat demo yang telah di-deploy
  </Card>
</CardGroup>

## Ringkasan

Boilerplate siap produksi untuk subscription menggunakan Next.js 15, React 19, Supabase, Drizzle ORM, dan Dodo Payments. Paket ini mencakup Google OAuth, checkout subscription, penanganan webhook, skema database, dan dashboard dasar.

<Info>
  Jika Anda hanya memerlukan route handler untuk aplikasi yang sudah ada, lihat adaptor khusus berikut: <a href="/developer-resources/nextjs-adaptor">Adaptor Next.js</a> dan <a href="/developer-resources/express-adaptor">Adaptor Express</a>.
</Info>

## Prasyarat

* Node.js 18+ (atau Bun 1.0+)
* Project Supabase (URL, Anon key, Service role key, Database URL)
* Akun Dodo Payments (API key, Webhook secret)
* Client OAuth Google Cloud (Client ID dan Secret)

## Mulai cepat

<Steps>
  <Step title="Clone and install">
    ```bash theme={null}
    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
    ```
  </Step>

  <Step title="Create Supabase project">
    Buat project Supabase dan salin:

    * NEXT\_PUBLIC\_SUPABASE\_URL
    * NEXT\_PUBLIC\_SUPABASE\_ANON\_KEY
    * SUPABASE\_SERVICE\_ROLE\_KEY
    * DATABASE\_URL (Connection string)
  </Step>

  <Step title="Configure Google OAuth">
    Atur redirect URI ke: `https://[your-project-ref].supabase.co/auth/v1/callback` di Google Cloud, lalu aktifkan provider Google di Supabase Auth menggunakan Client ID dan Secret Anda.
  </Step>

  <Step title="Configure Dodo Payments">
    Buat API key dan Webhook secret dari dashboard Dodo. Atur environment ke `test_mode` selama pengembangan.
  </Step>

  <Step title="Create .env.local">
    ```env theme={null}
    # 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
    ```

    <Warning>
      Jangan pernah melakukan commit terhadap secret. Gunakan environment variables di environment deployment.
    </Warning>
  </Step>

  <Step title="Provision database schema">
    ```bash theme={null}
    bun run db:push
    # or
    npm run db:push
    # or
    pnpm run db:push
    ```

    <Check>
      Tabel yang dibuat: `users`, `subscriptions`, `payments`.
    </Check>
  </Step>

  <Step title="Deploy webhook function">
    ```bash theme={null}
    # 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]
    ```

    ```bash cURL theme={null}
    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":{}}'
    ```
  </Step>

  <Step title="Add webhook in Dodo Payments">
    Atur endpoint URL ke:

    ```text theme={null}
    https://[your-project-ref].supabase.co/functions/v1/dodo-webhook
    ```

    Pilih event pembayaran dan subscription.
  </Step>

  <Step title="Create products and features">
    Di dashboard Dodo → Products → Create Product. Tambahkan metadata jika diperlukan:

    ```json theme={null}
    {
      "features": ["Feature 1", "Feature 2", "Feature 3"]
    }
    ```

    UI harga membaca array `features` ini dan merendernya secara dinamis.
  </Step>

  <Step title="Run the dev server">
    ```bash theme={null}
    bun run dev
    # or
    npm run dev
    # or
    pnpm run dev
    ```

    Buka [http://localhost:3000](http://localhost:3000).
  </Step>
</Steps>

## Yang disertakan

* Autentikasi melalui Supabase (Google OAuth telah dikonfigurasi)
* Checkout subscription melalui Dodo Payments
* Supabase Edge Function untuk webhook (`dodo-webhook`)
* Skema dan migrasi Drizzle ORM
* Dashboard dengan invoice, status subscription, dan fitur paket

<Tip>
  Pertahankan `DODO_PAYMENTS_ENVIRONMENT` sebagai `test_mode` hingga Anda menyelesaikan pengujian end-to-end.
</Tip>

## File dan path penting

<Tabs>
  <Tab title="Edge Function">
    ```text theme={null}
    supabase/functions/dodo-webhook/
      index.ts            # webhook handler verifying signatures
      deno.json           # permissions
    ```
  </Tab>

  <Tab title="Next.js routes">
    ```text theme={null}
    app/(marketing)/*     # landing + pricing UI
    app/(dashboard)/*     # protected pages
    app/api/*             # server actions & helpers
    ```
  </Tab>

  <Tab title="Database (Drizzle)">
    ```text theme={null}
    lib/db/schema.ts      # users, subscriptions, payments
    lib/db/index.ts       # client
    ```
  </Tab>
</Tabs>

## Environment variables

<AccordionGroup>
  <Accordion title="Supabase">
    ```env theme={null}
    NEXT_PUBLIC_SUPABASE_URL=
    NEXT_PUBLIC_SUPABASE_ANON_KEY=
    SUPABASE_SERVICE_ROLE_KEY=
    DATABASE_URL=
    ```
  </Accordion>

  <Accordion title="Dodo Payments">
    ```env theme={null}
    DODO_PAYMENTS_API_KEY=
    DODO_WEBHOOK_SECRET=
    DODO_PAYMENTS_ENVIRONMENT=test_mode|live_mode
    ```
  </Accordion>

  <Accordion title="Google OAuth">
    ```env theme={null}
    GOOGLE_CLIENT_ID=
    GOOGLE_CLIENT_SECRET=
    ```
  </Accordion>
</AccordionGroup>

## Verifikasi dan pemecahan masalah

<AccordionGroup>
  <Accordion title="Webhook signature invalid (401)">
    * Pastikan `DODO_WEBHOOK_SECRET` sesuai dengan nilai dari dashboard Dodo
    * Pastikan Anda telah men-deploy function `dodo-webhook` terbaru
    * Verifikasi nama header sudah benar di function Anda (Dodo-Signature)
  </Accordion>

  <Accordion title="Database push fails">
    * Periksa sintaks `DATABASE_URL` dan network egress Supabase
    * Tunggu sekitar 2–3 menit setelah pembuatan project sebelum melakukan push pertama
  </Accordion>

  <Accordion title="OAuth redirect mismatch">
    * Redirect URI harus berupa `https://[ref].supabase.co/auth/v1/callback`
    * Pastikan nilainya sama di Google Cloud dan provider Supabase Auth
  </Accordion>
</AccordionGroup>

<Check>
  Sekarang Anda memiliki scaffold SaaS subscription yang berfungsi dengan Supabase dan Dodo Payments.
</Check>

<Info>
  Repository asli dan langkah-langkah terperinci: <a href="https://github.com/dodopayments/dodo-supabase-subscription-starter">dodo-supabase-subscription-starter</a>.
</Info>