/stytch-b2b-sdk-example

Primary LanguageTypeScript

Stytch B2B authentication example in Next.js

Overview

This example application demonstrates how one may use Stytch's B2B authentication suite within a Next.js application. The application features a sign-up and login flow powered by Email magic links. On sign-up a new organization is created, and the initial member becomes the admin of that organization. As admin, the member is able to invite others to join the organization, and set up SSO connections via SAML or OIDC.

This project utilizes Stytch's Node Backend SDK and Stytch's Frontend JavaScript SDK to power authentication in the application.

This project was bootstrapped with Create Next App.

Set up

Follow the steps below to get this application fully functional and running using your own Stytch credentials.

In the Stytch Dashboard

  1. Create a Stytch account. Within the sign up flow select B2B Authentication as the authentication type you are interested in. Once your account is set up a Project called "My first project" will be automatically created for you.

    • If you signed up for Stytch in the past then your default Project is likely a Consumer type 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/authenticate as the types Login, Sign-up, Discovery, and Invite.

    Redirect URLs

  3. Navigate to Frontend SDKs to enable the Frontend SDK and add http://localhost:3000 as an authorized domain & http://localhost:3000/{{slug}}/login as the Organization URL template.

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

On your machine

In your terminal clone the project and install dependencies:

git clone https://github.com/stytchauth/stytch-b2b-sdk-example
cd stytch-b2b-sdk-example
npm i

Next, create .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 API Keys. 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

Running locally

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

npm run dev

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

Get help and join the community

💬 Stytch community Slack

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

❓ Need support?

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