Next.js B2B Starter Kit — fast-track your SaaS app from 0 to 1

Every business starts with an idea, followed by the challenge of picking the right tech stack. In a crowded field where choosing the right technology is key yet time-consuming, starter kits help you focus on building your idea rather than reinventing the basics. That’s why we’re announcing the WorkOS-built Next.js B2B Starter Kit today.

What sets this starter kit apart from others is its focus on B2B customers. In a consumer SaaS flow, your users are first-class entities to whom you’d want to provision access to your product, perhaps based on subscription level.

In a B2B setting, organizations become first-class entities, in which there are many employees that require access to your product. The starter kit makes modeling this easy by having a dedicated dashboard for your customer’s IT administrators, where they can provision new usersx, remove old ones, and manage their billing details and Single Sign-on (SSO).

Some of the features include:

• Convex: Uses the developer tooling of Convex to keep your database in sync and easily process webhook events from Stripe and WorkOS.
• Next.js: This popular React framework supports static site generation, server-side rendering, and client-side rendering.
• Radix UI Themes: A complete design system that is highly customizable and easy to integrate.
• Stripe Checkout: This fully integrated payment solution optimizes conversion and supports global payments with built-in security features that ensure transaction safety.
• WorkOS Audit Logs: Keep track of critical user interactions with WorkOS Audit Logs. This feature provides your customer’s IT teams with access to important logs, such as when a user signed in and when they signed out, helping them monitor activities and maintain security protocols efficiently.
• AuthKit: The world’s best login box offers comprehensive solutions such as user management, Role-Based Access Control (RBAC), integration of Stripe entitlements in access tokens, and easy SSO setup via the WorkOS Admin Portal, ensuring that only authorized users can access sensitive areas of your platform.

Best of all, it’s 100% free and open source, and it always will be. Find the source and instructions on GitHub and start building your B2B SaaS.

What’s included

Out of the box, the starter kit comes with several pages and functionality.

Dark and light themes

Each page has full light and dark mode support with a theme switcher component.

Pricing page

Once users are convinced to try your product by the splash page, the pricing page displays the different tiers and an option to sign up.

After signing up and picking a tier, users are redirected to Stripe Checkout to process payment.

Dashboard

Once the payment has completed, a WorkOS organization is created and the user is provisioned with the “admin” role, giving them access to the B2B Starter Kit Dashboard via RBAC.

Within the dashboard, admins can manage users, view audit logs, and manage their SSO and billing preferences. The latter two are handled via the Admin Portal and Stripe Customer Portal. Inviting, removing, and editing users are all accomplished with the UserManagement WorkOS Widget. In the default app, audit logs are a feature that’s only available to those who are subscribed to the “Enterprise” tier. If you aren’t, you are prompted to upgrade after which access is automatically provisioned. This is powered by WorkOS entitlements. WorkOS will automatically listen to Stripe webhooks for you, populating the access token with relevant entitlements for your app.

Product

First, an admin invites users to the app. Once users sign in, they are directed to the product page. This is a placeholder page for placing your own SaaS product.

Webhooks

WorkOS webhooks are automatically consumed by Convex HTTP functions, so you have full control over your own user data.

Getting started

Scaffolding your app can be completed in a few easy steps:

1. Clone the starter kit repo
   git clone https://github.com/workos/next-b2b-starter-kit.git
2. Navigate to the project directory
   cd next-b2b-starter-kit
3. Run the setup script, which will prompt you for API keys and optionally create resources for you
   pnpm run setup
4. Start the dev server
   pnpm run dev


That’s it; you can now navigate to http://localhost:3000 and start building your application.