The Auth0 SaaS Starter Kit is a full-stack Next.js application designed to help you get started building B2B SaaS with Auth0 by Okta.
A secure and high-performance starting point for building B2B SaaS web applications.
[!TIP] 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 out your core product instead of worrying about the complexities of SaaS identity management and secure customer onboarding.
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.
Use this to bootstrap a SaaS application with the following commonly needed capabilities:
nvm
to manage node versions in your development environment. Click these links to learn how to install nvm or how to use nvm to make sure you're using Node 20+ in your development environment.npm
or a comparable package manager installed in your development environment. These instructions assume that you're using npm
, which is automatically included as part of the Node.js installation from prerequisite 1.[!IMPORTANT] 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.
Clone this repo to your development environment. Navigate to a directory where you want to work in a terminal program, and run the following command:
git clone https://github.com/auth0-developer-hub/auth0-b2b-saas-starter.git
Navigate into the directory by typing the following command:
cd auth0-b2b-saas-starter
Install dependencies for the project using your favorite package manager. For example, if you're using npm, type:
npm install
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.
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, users on OSX using Homebrew can run the following command to install the CLI:
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
A successful installation will result in a response with the CLI version number printed out, like this:
auth0 version 1.4.0 54e9a30eeb58a4a7e40e04dc19af6869036bfb32
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"
This will take you through a flow that will securely retrieve a Management API token for your Auth0 tenant.
[!WARNING] At the Authorize App step, be sure to select the correct tenant. This is the tenant that will be bootstrapped in the next steps.
This step will create and update entities in your Auth0 tenant. The provided script will use the Auth0 CLI to provision the resources required for this sample application:
Finally, it will save environment variables for your tenant in the application directory.
[!WARNING] Only run the following command on a newly created tenant to avoid changing existing configuration or introducing conflicting elements to your existing Auth0 tenants! If you are creating a new Auth0 tenant at this point in the process, go back to step 2 in order to ensure you're logged into the correct Auth0 tenant.
Run the following command:
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.
Run the development server: npm run dev
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.
You can proceed to interact with the app as if you were a user: create an account, navigate to the settings, explore the identity capabilities.
Start editing to build your own SaaS application - for example, modify app/page.tsx
. The browser will hot-reload to show changes as you edit the file.
Reference the README-ADVANCED.md instructions to learn about:
To learn more about Auth0, take a look at the following resources:
See CONTRIBUTING for information.
Questions? Feedback? Drop us a line in the Auth0 Community
The Auth0 SaaS Starter Kit is a full-stack Next.js application designed to help you get started building B2B SaaS with Auth0 by Okta.
A secure and high-performance starting point for building B2B SaaS web applications.
[!TIP] 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 out your core product instead of worrying about the complexities of SaaS identity management and secure customer onboarding.
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.
Use this to bootstrap a SaaS application with the following commonly needed capabilities:
nvm
to manage node versions in your development environment. Click these links to learn how to install nvm or how to use nvm to make sure you're using Node 20+ in your development environment.npm
or a comparable package manager installed in your development environment. These instructions assume that you're using npm
, which is automatically included as part of the Node.js installation from prerequisite 1.[!IMPORTANT] 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.
Clone this repo to your development environment. Navigate to a directory where you want to work in a terminal program, and run the following command:
git clone https://github.com/auth0-developer-hub/auth0-b2b-saas-starter.git
Navigate into the directory by typing the following command:
cd auth0-b2b-saas-starter
Install dependencies for the project using your favorite package manager. For example, if you're using npm, type:
npm install
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.
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, users on OSX using Homebrew can run the following command to install the CLI:
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
A successful installation will result in a response with the CLI version number printed out, like this:
auth0 version 1.4.0 54e9a30eeb58a4a7e40e04dc19af6869036bfb32
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"
This will take you through a flow that will securely retrieve a Management API token for your Auth0 tenant.
[!WARNING] At the Authorize App step, be sure to select the correct tenant. This is the tenant that will be bootstrapped in the next steps.
This step will create and update entities in your Auth0 tenant. The provided script will use the Auth0 CLI to provision the resources required for this sample application:
Finally, it will save environment variables for your tenant in the application directory.
[!WARNING] Only run the following command on a newly created tenant to avoid changing existing configuration or introducing conflicting elements to your existing Auth0 tenants! If you are creating a new Auth0 tenant at this point in the process, go back to step 2 in order to ensure you're logged into the correct Auth0 tenant.
Run the following command:
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.
Run the development server: npm run dev
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.
You can proceed to interact with the app as if you were a user: create an account, navigate to the settings, explore the identity capabilities.
Start editing to build your own SaaS application - for example, modify app/page.tsx
. The browser will hot-reload to show changes as you edit the file.
Reference the README-ADVANCED.md instructions to learn about:
To learn more about Auth0, take a look at the following resources:
See CONTRIBUTING for information.
Questions? Feedback? Drop us a line in the Auth0 Community