Next.js B2B Starter Kit

A fully functional B2B SaaS template built with Next.js, Stripe, Convex, and WorkOS.

Demo: https://next-b2b-starter-kit.vercel.app/

Read about the Next.js B2B Starter Kit on the WorkOS blog.

Features

• Marketing splash page (/)
• Pricing page (/pricing) which allows signed in users to subscribe via Stripe Checkout
• Dashboard page (/dashboard) which is only accessible to admin users. Includes CRUD for users, audit logs and configuring SSO and billing
• Product page (/product) which is only accessible to signed in users
• Role-based access control
• Audit logs
• Billing
• Webhook syncing to Convex

Getting started

Prerequisites

You'll need a Convex account, a Stripe account and a WorkOS account.

Clone the repo

git clone https://github.com/workos/next-b2b-starter-kit.git

Navigate to the project directory

cd next-b2b-starter-kit

Install dependencies

pnpm install

Run the setup script

pnpm run setup

Start the development server

pnpm run dev

Tech stack

• Framework: Next.js
• Database: Convex
• Authentication: AuthKit by WorkOS
• Payments: Stripe

App flow

After viewing your marketing splash page (/) and pricing page (/pricing), users sign up before choosing a plan. This is so we can create an organization and link it to a Stripe customer.

Once signed up, users with the "admin" role can access the dashboard (/dashboard) where they can manage users, configure SSO and billing, and view audit logs. Note that in the default example, audit logs are only accessible when subscribed to the "Enterprise" plan.

Users without the "admin" role are instead redirected to the product page (/product) where they can interact with your product.

Testing

When running locally or using the deployed demo app, use the following test card numbers for the Stripe Checkout flow:

• Card number: 4242 4242 4242 4242
• CVC: Any 3 digits
• Expiration Date: Any future date
• ZIP: Any 5 digits

Deploying

Once you're ready to deploy your app, refer to the Convex documentation for instructions on deploying to hosted solutions like Vercel.

Remember to use your production API keys for both Stripe and WorkOS before deploying to production.

Need to Sync more data?

Learn more about the syncing system that connects AuthKit and Convex.

We made a short video series that covers the full integration. Check it out on YouTube.