Implement the Discovery flow using Stytch UI components

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 2.

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.