This example application demonstrates how to use Stytch's B2B authentication suite using our backend Node SDK inside of a Next.js application. The application features both Discovery and Organization B2B login flows.

Using the Discovery flow, users can log in via Email Magic Links, Google OAuth, or Microsoft OAuth, and can join existing Organizations that they have access to or create new ones. Using the Organization flow, users can log into a specific Organization that they belong to via Email Magic Links, Google OAuth, Microsoft OAuth, or SSO.

On this example application's profile page, Organization admins are able to invite other Members to the Organization and can set up SSO connections via SAML or OIDC.

This project was bootstrapped with Create Next App.

Follow the below steps below to run this application using your own Stytch API keys.

1. Create a Stytch account. During the signup flow, select B2B Authentication. Once your account is set up, a project called "My first project" will be created for you.

   • If you signed up for Stytch in the past, then your default project is likely a Consumer project. You can confirm this in your Project settings. To create a B2B project, use the Project dropdown near the top of the dashboard side nav. Be sure to select B2B Authentication as the authentication type.

2. Navigate to Redirect URLs, and add http://localhost:3000/api/callback as the types Login, Sign-up, Discovery and Invite.

   

3. Finally, navigate to API Keys. You will need the project_id, secret, and public_token values found on this page.

In your terminal, clone the project and install dependencies:

git clone https://github.com/stytchauth/stytch-b2b-node-example.git
cd stytch-b2b-node-example
pnpm install

Next, create an .env.local file by running the command below, which copies the contents of .env.template.

cp .env.template .env.local

Open .env.local in the text editor of your choice, and set the environment variables using the project_id, secret, and public_token found on the API Keys page. Leave the NEXT_PUBLIC_STYTCH_PROJECT_ENV value as test.

# This is what a completed .env.local file will look like
NEXT_PUBLIC_STYTCH_PROJECT_ENV=test
STYTCH_PROJECT_ID=project-test-00000000-0000-1234-abcd-abcdef1234
STYTCH_SECRET=secret-test-12345678901234567890abcdabcd
NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN=public-token-test-abc123-abcde-1234-0987-0000-abcd1234

After completing all of the above steps, the application can be run with the command:

pnpm run dev

The application will be available at http://localhost:3000.

Join the discussion, ask questions, and suggest new features in our Slack community!

Check out the Stytch Forum or email us at support@stytch.com.