Skip to main content

​
Complete Setup Guide

This guide walks through the full setup including payments and email.
Just want it running? The 5-Minute Setup gets you started with just Supabase. Come back here when you’re ready for payments.
Time estimate: 10-15 minutes for basic setup, 30 minutes with Stripe and Resend fully configured.

​
Prerequisites

Node.js 18+

Check with node -v. Download Node.js

pnpm or npm

Package manager for dependencies

Supabase Account

Free tier works. Create account

Stripe Account

Test mode for development. Sign up
Minimum viable setup: You only need Supabase to run the app. Stripe and Resend are optional for initial development.

​
Installation

1

Clone the repository

git clone https://github.com/MohammedAlhawamdeh/kwiksaas.git
cd kwiksaas
2

Install dependencies

npm install
# or
pnpm install
Run npm run lint to verify everything installed correctly.
3

Create environment file

cp .env.example .env.local

​
Configure Supabase

1

Create a Supabase project

  1. Go to supabase.com/dashboard
  2. Click New Project
  3. Choose organization, name, password, and region
  4. Wait for project to initialize (~2 minutes)
2

Get your API keys

Go to Settings → API and copy:
KeyEnvironment Variable
Project URLNEXT_PUBLIC_SUPABASE_URL
anon public keyNEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY
service_role keySUPABASE_SECRET_KEY
Never expose SUPABASE_SECRET_KEY in client-side code. It bypasses Row Level Security.
3

Configure Auth URLs

Go to Authentication → URL Configuration:
SettingValue
Site URLhttp://localhost:3000
Redirect URLshttp://localhost:3000/auth/callback
4

Run database migrations

Option A: Using Supabase CLI
npx supabase link --project-ref YOUR_PROJECT_REF
npx supabase db push
Option B: Manual SQL
  1. Go to SQL Editor in Supabase Dashboard
  2. Copy contents of supabase/migrations/*.sql
  3. Run the SQL
Verify tables exist: user_subscriptions, one_time_purchases, payment_history, user_profiles

​
Configure Stripe (Optional)

Skip this section if you want to run the app without payments first.
1

Get API keys

Go to Stripe Dashboard and copy:
KeyEnvironment Variable
Publishable keyNEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
Secret keySTRIPE_SECRET_KEY
Use test mode keys during development. Toggle “Test mode” in Stripe Dashboard.
2

Create products and prices

  1. Go to Products in Stripe Dashboard
  2. Create products for Standard and Ultimate plans
  3. Set prices (one-time for lifetime access)
  4. Copy Price IDs (start with price_)
Add to .env.local:
NEXT_PUBLIC_STRIPE_PRICE_ID_STANDARD_LIFETIME=price_...
NEXT_PUBLIC_STRIPE_PRICE_ID_ULTIMATE_LIFETIME=price_...
3

Set up local webhook forwarding

Install Stripe CLI and forward webhooks:
# Install Stripe CLI (macOS)
brew install stripe/stripe-cli/stripe

# Login
stripe login

# Forward webhooks
stripe listen --forward-to localhost:3000/api/webhooks/stripe
Copy the webhook signing secret and add to .env.local:
STRIPE_WEBHOOK_SECRET=whsec_...

​
Configure Resend (Optional)

1

Get API key

  1. Sign up at resend.com
  2. Go to API Keys and create one
  3. Add to .env.local:
RESEND_API_KEY=re_...
RESEND_FROM_EMAIL=noreply@yourdomain.com
RESEND_LOGO_URL=https://yourdomain.com/logo.png
2

Verify domain (production)

Add DNS records as shown in Resend Dashboard for SPF, DKIM, and DMARC.

​
Your .env.local File

Here’s a complete example with all variables: 
# Site
NEXT_PUBLIC_SITE_URL=http://localhost:3000

# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://yourproject.supabase.co
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=eyJ...
SUPABASE_SECRET_KEY=eyJ...

# Stripe
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
STRIPE_SECRET_KEY=sk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...
NEXT_PUBLIC_STRIPE_PRICE_ID_STANDARD_LIFETIME=price_...
NEXT_PUBLIC_STRIPE_PRICE_ID_ULTIMATE_LIFETIME=price_...

# Resend (optional)
RESEND_API_KEY=re_...
RESEND_FROM_EMAIL=auth@yourdomain.com
RESEND_LOGO_URL=https://yourdomain.com/logo.png

# PostHog (optional)
# NEXT_PUBLIC_POSTHOG_KEY=phc_...
# NEXT_PUBLIC_POSTHOG_HOST=https://app.posthog.com

​
Run the App

1

Start development server

npm run dev
2

Open in browser

Navigate to http://localhost:3000
You should see the marketing homepage with hero, pricing, and footer.
3

Test authentication

  1. Go to /sign-up
  2. Create an account with email/password
  3. Check email for verification (or check Supabase Auth logs)
  4. Sign in and land on /dashboard

​
Verify Everything Works

FeatureHow to Test
Marketing pagesVisit /, /pricing
AuthenticationSign up, sign in, sign out at /sign-up, /sign-in
DashboardAccess /dashboard after signing in
PaymentsClick pricing button, complete Stripe checkout (test mode)
BlogVisit /blog to see MDX content

​
Common Issues

Check Supabase URL Configuration:
  • Site URL: http://localhost:3000 (exact match)
  • Redirect URLs: includes http://localhost:3000/auth/callback
  • Not using 127.0.0.1 (use localhost instead)
Ensure webhook listener is running: bash stripe listen --forward-to localhost:3000/api/webhooks/stripe - Copy the whsec_... secret each time you restart - Listener must be running when testing checkout
Run migrations: bash npx supabase db push Or manually run SQL from supabase/migrations/ in Supabase SQL Editor.
  • Restart dev server after changing .env.local
  • NEXT_PUBLIC_ prefix required for client-side variables
  • No spaces around = in env file

​
Next Steps

Authentication

Configure OAuth and customize auth flows

Payments

Set up Stripe products and pricing

Customization

Brand the app with your logo and colors