Getting Started

What you are setting up

SecureStartKit is a Next.js + Supabase + Stripe template that enforces a small number of architectural rules: every Server Action validates input with Zod, every database query runs through createAdminClient() server-side, every Stripe webhook verifies its signature before any event is processed, RLS is enabled deny-all on every table, and no secret carries the NEXT_PUBLIC_ prefix. The site you are reading IS the template running in production.

The setup below gets you from clone to running locally in roughly 30 minutes. The longer-form instructions live in Installation.

Quick start

1. Clone and install

git clone [repo] my-saas
cd my-saas
npm install

2. Set up Supabase

• Create a project at supabase.com.
• Open the SQL Editor and run the contents of supabase/schema.sql. This creates four tables (profiles, customers, purchases, subscriptions) with RLS enabled and deny-all defaults.
• Copy your project URL, anon key, and service-role key into .env.local.

3. Set up Stripe

• Create your products in the Stripe Dashboard as one-time prices (this is the default; see /compare/one-time-vs-subscription-saas-billing for the trade-off).
• Copy the price IDs into config.ts under billing.plans[].priceId.
• Copy your secret key and webhook signing secret into .env.local.

4. Configure

• Rename .env.example to .env.local and fill in the values.
• Edit config.ts: app name, domain, billing plans, admin emails, appearance.
• Edit components/landing/*.tsx for your landing-page copy.

5. Run

npm run dev

Project structure

├── app/
│   ├── (marketing)/    Public pages (landing, blog, compare, glossary)
│   ├── (auth)/         Login, signup, reset password
│   ├── (dashboard)/    Protected user dashboard
│   └── (admin)/        Admin panel
├── actions/            Server Actions (auth, billing, user, admin)
├── components/
│   ├── landing/        Landing-page sections
│   ├── forms/          Form components
│   └── layout/         Header, sidebar, footer
├── config.ts           Central configuration (edit this)
├── content/
│   ├── blog/           Blog MDX files
│   └── docs/           These docs
├── emails/             React Email templates
├── lib/                Utilities, clients, helpers
├── proxy.ts            Auth middleware (Next.js 16)
└── supabase/           Database schema

Architectural concepts to read first

These three concepts explain WHY the codebase is shaped the way it is. Skim them before customizing anything significant.

Backend-only data access

Every database query runs through createAdminClient() (the service_role key) inside Server Actions or API routes. The browser Supabase client is used only for authentication (sign in, sign up, OAuth callback). The anon key has zero data access because RLS is enabled with no policies. Even a leaked anon key reads nothing.

Read the full pattern: backend-only data access.

Central configuration

Everything customizable lives in config.ts. Plans, pricing, app name, theme, admin emails, i18n. One file, no scattered config. See Configuration.

Composable landing sections

The landing page (app/(marketing)/page.tsx) imports pre-built section components from components/landing/. Customize by editing the component files directly. See Components for the per-section docs.

What to read next

• Installation for the full setup (Supabase URL config, Stripe webhook setup, Resend, DNS).
• Configuration for the config.ts reference.
• Authentication to understand the auth flow.
• Payments for the billing model (one-time default, subscription opt-in).
• Security headers for the production headers config and how to add CSP.
• Recipes for end-to-end how-tos (add a Server Action, add a database table, add an OAuth provider, add an email template).