Implement the Discovery flow using Stytch UI components

Our JavaScript SDK provides pre-built UI components that allow you to add a B2B Discovery flow to your application, which we'll demonstrate how to implement in this guide. For high-level information about our B2B UI component flows, see the Pre-built B2B UI components overview.

At the end of this guide, you'll have a working Discovery flow that allows users to authenticate using either Email Magic Links or OAuth and then choose the Organization that they'd like to log into. We'd recommend using this guide in tandem with our B2B frontend SDK example app, which provides a working example of the pre-built UI component Discovery flow.

Create a Stytch B2B project via the Stytch Dashboard if you don't have one already. To do so, click on your existing project name in top left corner of the Dashboard, click Create a new project, and then select B2B Authentication.

Copy your public_token from the Test environment tab in the API keys section of the Stytch Dashboard. You'll need to include your public_token when instantiating the Stytch SDK client.

Finally, navigate to the Frontend SDKs tab in the Stytch Dashboard and enable the authentication products that you're interested in adding to your application (in this guide, we'll use Email Magic Links and OAuth).

First, you'll need to add our pre-built B2B UI component to your login page. Because this is a Discovery flow, you'll generally add the component to a generic (rather than Organization-specific) login route – for example, https://yourdomain.com/login.

In your UI component config, you'll need to specify an authFlowType of Discovery, along with your desired product and session options. The discoveryRedirectURL values that you provide should point to the URL where the authentication flow will be completed (in other words, where users will be redirected to after clicking on the Email Magic Link or completing the OAuth flow) – for example, https://yourdomain.com/authenticate.

The sessionDurationMinutes parameter in the sessionOptions object determines how long the session will be valid for after the user successfully authenticates. For the purposes of this guide, we'll set the session duration to 60 minutes.

Here's an example config object:

var config = {
  authFlowType: "Discovery",
  products: ['emailMagicLinks', 'oauth'],
  emailMagicLinksOptions: {
    discoveryRedirectURL: "https://example.com/authenticate"
  },
  oauthOptions: {
    discoveryRedirectURL: "https://example.com/authenticate",
    providers: ['google']
  },
  sessionOptions: {
    sessionDurationMinutes: 60
  },
};

The mechanics of creating the component and adding it to your login page differ depending on the framework you're using. We'd recommend checking out our UI config reference for both HTML and React example code snippets.

In our B2B SDK example app, we create the Discovery UI component here and add it to our generic login page here.

Once the user is redirected back to your application, you'll need to relaunch the pre-built UI component in order to handle the rest of the authentication flow. You can use the same config object as in Step 1.

In our B2B SDK example app, we relaunch the pre-built UI component here.

Once it has been relaunched, the pre-built UI component will display a list of Organizations that the user has access to. If the user doesn't yet have access to any Organizations or doesn't want to access any of the Organizations surfaced by the UI component, 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.

Once the user has selected an Organization or created a new one, the pre-built UI component will automatically exchange the user's intermediate_session_token for a Member session_token. At this point, a session_token and a session_jwt for the user's selected Organization will be present in the browser cookies, and you'll be able to retrieve session data and Member data via the SDK.

You'll now have a working Discovery authentication flow that will allow your users to discover which Organizations they have access to and log into one.

Next, you may want to offer an Organization authentication flow as well, for users who log in via an Organization-specific URL.

Check out our UI config reference for a full list of supported UI configuration options. You can also play around with UI styling on authkit.dev.