A demo saas built with Next.js + Supabase + Stripe.
- Create a new project on Supabase.
- Execute the
schema.sql
file in thesql
folder in the supabase SQL editor. - Enable the REALTIME feature for all tables in the supabase dashboard (database > replication > source).
- Add dummy lessons and premium content to the database.
- Setup authentication by disabling email auth, and enabling github OAuth.
- Create a new Stripe account.
- Create recurring subscription products in the Stripe dashboard as you like (Standard pricing model + Recurring)
- Create a new webhook endpoint in the Stripe dashboard (https://stripe.com/docs/webhooks/setup) pointing to
https://yourdomain.com/api/stripe-hooks
(replaceyourdomain.com
with your domain, the ngrok exposed URL for local). - Add redirect URL to your domain in stripe portal configuration (settings > customer portal > business information) and point it to
https://yourdomain.com/dashboard
(replaceyourdomain.com
with your domain,localhost:3000
for local).
Following are the supabase variables:
NEXT_PUBLIC_SUPABASE_URL
- The URL of your supabase project.NEXT_PUBLIC_SUPABASE_ANON_KEY
- The anon key of your supabase project.SUPABASE_SERVICE_KEY
- The service key of your supabase project to bypass RLS.
Stripe secrets:
NEXT_PUBLIC_STRIPE_KEY
- The public key of your stripe account.STRIPE_SECRET_KEY
- The secret key of your stripe account.STRIPE_SIGNING_SECRET
- The signing secret of your stripe webhook endpoint.
App secrets:
API_SECRET
- A secret key used internally in the app. Generated by runningnode secret-key-gen.mjs
.
- Install dependencies by running
yarn install
. - Run the app in development mode by running
yarn dev
. - Open http://localhost:3000 with your browser to see the result.
- To learn more about Supabase, take look here: https://supabase.com/docs
- Here are tutorials for stripe: https://stripe.com/docs/videos
- Stripe JS (Client-side): https://stripe.com/docs/js
- Stripe API (Server-side): https://stripe.com/docs/api/authentication?lang=node