Skip to main content

​
Authentication flow

​
Prerequisites

If you haven’t done so already:
  1. If you’d like to have a provider to test with, complete the steps in the SSO Provider Setup guide for an Organization that you’re a Member of.
  2. Enable the Frontend SDKs in your Stytch Dashboard.

​
Add SSO to your UI config

To surface SSO in the UI, include B2BProducts.sso in the products array of your configuration. 
import { B2BProducts, StytchB2B } from '@stytch/react/b2b';

const Login = () => {
  const config = {
    authFlowType: "Discovery", // or "Organization"
    products: [B2BProducts.sso],
    ssoOptions: {},
  };

  return <StytchB2B config={config} />;
};

export default Login;
SSO can be used in both Discovery and Organization-specific flows. Use Discovery if you need to determine the user’s Organization before completing authentication.

​
Render the UI component

Render the Stytch UI component on the Redirect URL(s) that you specified in the Stytch Dashboard during setup. When rendered, the UI component will automatically:
  • Handle the SSO redirect based on the stytch_token_type
  • For Discovery flows, prompt the user to select an Organization and finish authentication
  • For Organization-specific flows, complete authentication directly

​
Test your integration

First, ensure the Organization you will log into has an sso provider configured. Then, start your application and test the SSO flow:
  1. Navigate to your login page
  2. Click the SSO button
  3. Complete the SSO flow with your IdP
  4. Verify that you’re redirected back to your application and authenticated

​
Next steps

Customize the UI

Learn how to customize the appearance and behavior of the pre-built UI

Configure an IdP

Add or update SSO Connections for your Identity Provider