Pre-built B2B UI components overview

Our frontend JavaScript SDK provides pre-built UI components that you can use to easily add B2B authentication flows to your application.

There are two main login flows that our UI components support: the Discovery flow, where you don't yet know which Organization the user is attempting to log into, and the Organization flow, where the user is attempting to log into a specific Organization. Below, we'll provide an overview of the two flows as they relate to our pre-built UI components.

Our Discovery authentication flow is for users who aren't attempting to log into a specific Organization. During the Discovery flow, users authenticate and are then presented with a list of Organizations that they can access (based on the output of our List discovered Organizations endpoint). Generally, the Discovery flow is hosted on your application's generic login page – for example, https://yourdomain.com/login.

The products that we currently support as part of our Discovery flow are Email Magic Links and OAuth. Our Passwords and SSO products are not supported as part of the Discovery flow.

Once the user successfully authenticates, they'll be presented with a list of Organizations that they can access.

If the user doesn't yet have access to any Organizations or doesn't want to access any of the Organizations surfaced during the Discovery flow, you can optionally allow them to create a new Organization. You can enable this functionality by toggling on the Create Organizations option in the Frontend SDKs tab in the Stytch Dashboard.

When the user selects an Organization (or creates a new one), the UI component will handle the intermediate session token exchange, producing a new session corresponding to that Organization.

Check out our Discovery flow UI component implementation guide for detailed implementation steps.

Our Organization flow is for users who already know which Organization they'd like to log into. The Organization flow needs to be hosted on an Organization-specific login URL that contains the Organization's slug (unique identifer) – for example, https://yourdomain.com/example-org/login or https://example-org.yourdomain.com/login, where example-org is the Organization slug.

When using our UI components for the Organization flow, you'll need to specify where our JavaScript SDK should look for the Organization slug by adding an Organization URL template in the Domains section of the Frontend SDKs tab in the Stytch Dashboard. Using the URL examples above, your Organization URL template would look like https://yourdomain.com/{{slug}}/login or https://{{slug}}.yourdomain.com/login.

Once you've added an Organization URL template, the SDK will automatically detect the slug value in the URL that the UI component is loaded on, and will make authentication requests for the correct Organization.

All of our B2B products are supported as part of the Organization flow. Here's an example of what our UI component looks like at the beginning of the Organization flow using several different products (UI component styling is configurable):

At the end of the authentication flow, the UI component will start a new session for the appropriate Organization.

Check out our Organization flow UI component integration guide for detailed implementation steps.