Frontend Integration with UI Components

SSO Sequence Diagram for Prebuilt UI Integration

1Complete config steps

If you haven't done so already:

  1. Complete the steps in the SSO Quickstart Start Here
  2. Enable the Frontend SDKs in your Stytch Dashboard

2Configure UI config

In order to render SSO as an option in the UI, you will need to pass in a config of authFlowType: AuthFlowType.Organization and include B2BProducts.sso in the products array.

import { StytchB2B } from "@stytch/nextjs/b2b";
import { B2BProducts, AuthFlowType } from "@stytch/vanilla-js";

const Login = () => {
  const config = {
    authFlowType: AuthFlowType.Organization,
    products: [B2BProducts.sso],
    ssoOptions: {},

  return <StytchB2B config={config} />;

3Render UI Component on Redirect URL

Render the Stytch UI component on the Redirect URL(s) that you specified in the Stytch Dashboard during the initial setup steps.

When rendered, the UI component will automatically handle the redirect from Stytch based on the stytch_token_type, and finish the authentication flow.

4Run your app and test it out