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 and Google OAuth. 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 RBAC offering to enforce authorization on Stytch resources as well as custom resources.

This project utilizes Stytch's NextJS Javascript SDK to power authentication. It uses the UI client for login flows and the headless client for member and SSO connection management after login.

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.

   

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. You will also need to toggle:

   1. The 'Create Organizations' setting under 'Enabled methods'. This will enable end users to create new organizations when signing up for the application.
   2. The 'Member actions & permissions' setting under 'Enabled methods'. This will allow the SDK to take various actions on behalf of the logged-in Member as long as they are permitted under the project's RBAC policy.

4. OPTIONAL If you want to see Google OAuth in action in the login/signup forms, you'll need to configure Google OAuth in the Stytch dashboard. Note that if you are using the Stytch test environment, Google OAuth is automatically configured for you and you will not need to set anything up, but the Google One Tap prompt will not render. If you'd like the Google One Tap prompt to appear, make sure to set up your Google OAuth credentials and follow the additional setup steps for adding an authorized Javascript origin. You'll need to add both http://localhost and http://localhost:3000 as authorized origins.

5. OPTIONAL If you want to see RBAC in action, navigate to Roles and Permissions to configure the project's RBAC policy. There should already be a "stytch_member" role, which is implicitly granted to all Members, and a "stytch_admin" role.

   1. Click on the "Resources" tab. Click the "Create new Resource" button and create a resource with the resource ID = "todos". In the "actions" accordion, click the "Add action" button and input the following string: "create delete", which will create two actions. Make sure to save the resource before continuing.
   2. Go back to the "Roles" page. Click on the "stytch_admin" role. Click "Edit Role". Under "Permissions", click "Assign permissions". In the modal, select "todos" in the resource dropdown, then toggle the "Assign the wildcard..." switch. Click "done", then save the role.
   3. Go back to the "Roles" page. Click on the "stytch_member" role. Click "Edit Role". In the "permissions" accordion, you'll need to add permissions for 2 different resources. Once you've added both, click "done", then save the role.
      1. For the "stytch.member" resource, add the following action: "search".
      2. For the "stytch.sso" resource, add the following action: "get".
   4. Go back to the "Roles" page. Click the "Create new Role" button and create a role with the role ID = "editor". In the "permissions" accordion, you'll need to add permissions for 3 different resources. Once you've added all 3, click "done", then save the role.
      1. For the "stytch.member" resource, add the following action: "update.info.name".
      2. For the "stytch.sso" resource, add the following action: "update".
      3. For the "todos" resource, add the following action: "create".

6. Finally, navigate to API Keys. You will need the public_token value 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 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 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
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. The "Log in" and "Sign Up" buttons will both lead to a discovery flow. To log in to a specific organization, navigate to http://localhost:3000/{{slug}}/login, where slug is the organization_slug of the organization you wish to log into. For the organization-specific flow to work, make sure to add an organization URL template to your frontend SDK configuration as specified in step #3 of setup.

See the Stytch docs for more information about the different types of login flows.

Expected RBAC functionality

See the RBAC docs and guide for more information on Stytch's RBAC offering.

Resources

This example app will demonstrate how RBAC can be used for both Stytch resources and custom resources. The Stytch resources covered by RBAC are members, organizations, and SSO connections. The Stytch headless SDK will automatically enforce RBAC permissions on certain endpoints that affect Stytch resources, such as member update (stytch.organizations.member.update()) or get SSO connections (stytch.sso.getConnections()).

The NextJS implementation of our Javascript SDK provides a helpful hook you can use to determine whether or not a user can take a specified action - just call useStytchIsAuthorized with the specific resource_id and action. This can be helpful when deciding what to display in the UI - for example, disabling a "save" button for updating SAML connections if the user does not have update permissions.

The Organization TODO list in this example app is an example of using permissions on a custom resource. Note that the TODO list does not persist state, since it doesn't actually make any API calls - it just serves to demonstrate the usage of useStytchIsAuthorized with non-Stytch resources that you can define in your RBAC policy.

Roles and Permissions

To see all of the RBAC functionality described in this section, make sure to follow step #5 of the setup instructions above to configure your RBAC policy.

The first member in an organization will automatically be assigned the "stytch_admin" role. This role will allow them to invite new members to the organization, update member's names, create SSO connections, and update SSO connections. They will also be able to create and delete items in the TODO list, which utilizes Stytch custom resources.

Members with the "editor" role will be able to update members' names and update SSO connections, but they will not be able to invite new members or create new SSO connections. They will be able to add items to the TODO list, but not delete them.

All members automatically have the "stytch_member" role. Members who have only this role will be able to view all members and SSO connections in the org, but they will not be able to update them or create new ones. They will also not be able to create or delete items in the TODO list.

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 [email protected].