This is the ultimate Next.js SAAS starter kit that includes a landing page, integrations with Supabase auth(Oauth, forget password, etc), PostgresDB with DrizzleORM and Stripe to collect payments, setup subscriptions and allow users to edit subscriptions/payment options.

• Full sign up/ sign in/ logout/ forget password/ password reset flow
• Oauth with Google and Github
• Utilize Stripe Pricing Table and Stripe Checkout to setup customer billing
• Integration with Stripe Customer Portal to allow users to manage billing settings
• Protected routes under /dashboard
• Drizzle ORM/Postgres integration
• Tailwind CSS/shadcn
• Stripe webhooks/ API hook to get customer current plan

Getting Started

As we will be setting up both dev and prod environments, simply use .env.local to develop locally and .env for production environments

Setup Supabase

1. Create a new project on Supabase
2. ADD SUPABASE_URL and SUPABASE_ANON_KEY to your .env file
4. Add NEXT_PUBLIC_WEBSITE_URL to let Supabase know where to redirect the user after the Oauth flow(if using oauth).

You can easily set up social auth with this template. First navigate to google cloud and create a new project. All code is written. You just need to add the GOOGLE_OAUTH_CLIENT_ID and GOOGLE_OAUTH_CLIENT_SECRET to your .env file.

1. Follow these instructions to set up Google OAuth.

You can easily set up social auth with this template. First navigate to google cloud and create a new project. All code is written. You just need to add the GITHUB_OAUTH_CLIENT_ID and GITHUB_OAUTH_CLIENT_SECRET to your .env file.

1. Follow these instructions to set up Github OAuth.

Setup Postgres DB

You can use any Postgres db with this boilerplate code. Feel free to use Vercel's Marketplace to browse through a collection of first-party services to add to your Vercel project.

Add DATABASE_URL to .env file e.g postgresql://${USER}:${PASSWORD}@xxxx.us-east-2.aws.neon.tech/saas-template?sslmode=require

Setup OAuth with Social Providers

1. Go to Supabase dashboard
2. Go to Authentication > Url Configuration
3. Place production url into "Site URL".

Setup Stripe

In order to collect payments and setup subscriptions for your users, we will be making use of Stripe Checkout and Stripe Pricing Tables and Stripe Webhooks

1. Register for Stripe
2. get your STRIPE_SECRET_KEY key and add it to .env. Stripe has both a Test and Production API key. Once you verify your business on Stripe, you will be able to get access to production mode in Stripe which would come with a production API key. But until then, we can use Stripe's Test Mode to build our app

1. Open up stripeSetup.ts and change your product information
2. run node --env-file=.env stripeSetup.ts to setup your Stripe product
3. Create a new Pricing Table and add your newly created products
4. When creating your new Pricing Table, set the Confirmation Page to Don't show confirmation page. Add YOUR_PUBLIC_URL/subscribe/success as the value(use http://localhost:3000/subscribe/success for local development). This will redirect the user to your main dashboard when they have completed their checkout. For prod, this will be your public url

1. Add STRIPE_PUBLISHABLE_KEY and STRIPE_PRICING_TABLE_ID to .env

Your pricing table should now be set up

Setup Database

This boilerplate uses Drizzle ORM to interact with a PostgresDb.

Before we start, please ensure that you have DATABASE_URL set.

To create the necessary tables to start, run npm drizzle-kit migrate

1. navigate to /utils/db/schema.ts
2. Edit/add a table
3. run npx drizzle-kit activate to generate migration files
4. run npm drizzle-kit migrate to apple migration

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

Open http://localhost:3000 with your browser to see the result.

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.