> ## Documentation Index
> Fetch the complete documentation index at: https://stytch.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Adding to Stytch Login
> Integrate SSO with Stytch's pre-built UI components.
export const organization = "Represents an instance or tenant in your application, typically mapping to each of your top-level customers.";
export const discovery = "Centralized login flow that allows users to view all Organizations they have access to, including pending invites and Organizations they are allowed to automatically join based on their verified email domain.";
## Authentication flow
```mermaid theme={null}
sequenceDiagram
participant Frontend as Stytch Login Component
participant App as Your Application Logic
participant Stytch as Stytch
participant IDP as Workflow Idp
Frontend->>Stytch: User initiates SSO login
Stytch-->>Frontend: Returns redirect URL
Frontend->>IDP: Automatically redirects to IdP
IDP<<-->>Frontend: User authenticates with IdP
IDP<<-->>Stytch: Stytch performs SSO handshake with IdP
Stytch-->>Frontend: Redirects to Login or Signup Redirect URL with token
Frontend-->>Stytch: SDK automatically authenticates token
Stytch->>Frontend: Member logged in
Session cookie stored in browser
```
## 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](/multi-tenant-auth/authentication/sso/provider-setup) guide for an Organization that you're a Member of.
2. Enable the Frontend SDKs in [your Stytch Dashboard](https://stytch.com/dashboard/sdk-configuration).
## Add SSO to your UI config
To surface SSO in the UI, include `B2BProducts.sso` in the `products` array of your configuration.
```jsx React icon="react" theme={null}
import { B2BProducts, StytchB2B } from '@stytch/react/b2b';
const Login = () => {
const config = {
authFlowType: "Discovery", // or "Organization"
products: [B2BProducts.sso],
ssoOptions: {},
};
return ;
};
export default Login;
```
```jsx Next.js icon="triangle" theme={null}
import { B2BProducts, StytchB2B } from '@stytch/nextjs/b2b';
const Login = () => {
const config = {
authFlowType: "Discovery", // or "Organization"
products: [B2BProducts.sso],
ssoOptions: {},
};
return ;
};
export default Login;
```
```html Vanilla JS icon="square-js" theme={null}
```
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](https://stytch.com/dashboard/redirect-urls) 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](/multi-tenant-auth/authentication/sso/provider-setup). 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
Learn how to customize the appearance and behavior of the pre-built UI
Add or update SSO Connections for your Identity Provider