Pre-built B2B UI components overview
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.
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.
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.