/auth0-b2b-saas-starter

The Auth0 SaaS Starter Kit is a full-stack Next.js + Radix UI application designed to help you get started building B2B SaaS with Auth0 by Okta. It features multi-tenancy support, organization member management and access controls, security policies, self-service Single Sign-On configuration, and more.

Primary LanguageTypeScript

B2B SaaS Starter Kit from Auth0 by Okta

A secure and high-performance starting point for building B2B SaaS web applications.

Overview

A screenshot of the login view

Ready to begin? Jump ahead to the Getting Started section.

This sample application provides developers with a solid foundation to kickstart their journey into building a business-to-business software-as-a-service (B2B SaaS) application. With a carefully selected stack of well-documented and widely adopted technologies, along with seamless integration with Auth0 for identity and login management, this starter kit aims to streamline the development process, enabling you to focus on building innovative solutions for your customers instead of worrying about being B2B or enterprise-ready.

It incorporates best practices and industry-standard technologies to provide a robust and scalable solution for building secure software, with all the capabilities you need to be competitive, resilient, and scalable. The project includes the architecture and components you need to get started, authentication and authorization powered by Auth0, and deployment instructions that make it easy to move to staging or production when you're ready.

Target use case

Use this to build applications that require a shared user model:

  • Single User Pool in a shared DB
  • Home realm discovery
  • Domain claiming

Included capabilities

  • Logged out product landing page experience
  • Logged in application experience
  • Sign up with Organization creation
  • Subscription tiers and upgrade/downgrade workflows (coming soon)
  • MFA for email/password accounts
  • User management with invitation workflows, create/delete user capabilities, and roles
  • Self-service SSO configuration using
    • OIDC
    • SAML (coming soon)
  • Just-in-time user provisioning OR automatic directory sync with SCIM (coming soon)
  • API client management with self-service create/delete capabilities
  • Configurable security policies:
    • Enforce MFA
    • Session limits (coming soon)
    • Allow email/password accounts for outside collaborators while enforcing SSO (coming soon)
    • Break-glass access for admin roles (coming soon)
  • Self-service user profile management, password reset, and MFA configuration

Getting Started

Prerequisites

  1. Node.js v20 or later is required to run the bootstrapping process. We recommend using nvm.

  2. You must have npm or a comparable package manager installed in your development environment. These instructions assume that you're using npm.

  3. Create a fresh Auth0 tenant which will be configured automatically by our bootstrapping command. See Create Tenants in the Auth0 docs if you need help.

    Creating a new tenant before you continue is highly recommended, so that you don't accidentally change the configuration in any existing Auth0 projects you might have.

Part One: Clone and install dependencies

  1. Clone this repo to your development environment
  2. Install dependencies: npm install

Part Two: Install and Log In with the Auth0 CLI

This project uses the Auth0 CLI to make setting up your tenant a lot easier, by scripting away as much manual work as possible. If you want to familiarize yourself with the Auth0 CLI, read Auth0 CLI Basics.

  1. You will need to install the Auth0 CLI. It will be used by the bootstrap script to create the resources needed for this sample in your Auth0 tenant. Instructions for installation are available at the Auth0 CLI github repo.

    For example, for users on OSX using , you can run the following command:

    brew tap auth0/auth0-cli && brew install auth0

    You can confirm whether or not the CLI is correctly installed by running the following command:

    auth0 --version

    You should see in response the CLI version number printed out, like this:

    auth0 version 1.4.0 54e9a30eeb58a4a7e40e04dc19af6869036bfb32
  2. Log in by entering the following command and following the instructions to choose a specific tenant to authenticate with:

    auth0 login --scopes "update:tenant_settings,create:connections,create:client_grants,create:email_templates,update:guardian_factors"

    Be sure to select As a user when prompted: "How would you like to authenticate?". This take you through a flow to securely retrieve a Management API token for your Auth0 tenant.

    Important

    At the Authorize App step, be sure to select the correct tenant. This is the tenant that will be bootstrapped in the next steps.

Part Three: Bootstrap the Auth0 tenant

Behind the scenes, the bootstrap script in this step will use the Auth0 CLI to provision the resources required for this sample application:

  • Creating the appropriate clients (called Applications in Auth0)
  • Creating admin and member roles,
  • Creating actions for setting roles and security policies
  • Creating email and login templates
  • Enabling MFA factors

Finally, it will save environment variables for your tenant in the application directory.

  1. Run the following command to configure the tenant that the Auth0 CLI is currently logged into:

    npm run auth0:bootstrap

    Once the script has successfully completed, a .env.local file containing the environment variables will be written to the root of your project directory.

Step Four: Run the sample application

  1. Run the development server: npm run dev

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

    Note: If you're running the application on a different port, adjust the provided localhost URL accordingly.

  3. Start editing - for example, modify app/page.tsx. The browser will auto-update as you edit the file.

Misc

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Auth0, take a look at the following resources:

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

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.

Contributing

See CONTRIBUTING for information.