B2B Saas Authentication

/

Guides

/

Authentication

/

UI components

/

Overview

Pre-built B2B UI components overview

Our frontend JavaScript SDK provides pre-built UI components that you can use to easily add authentication and organization management to your application.

The three main components are:

  1. Discovery authentication
  2. Organization-specific login
  3. Admin Portal UI

All of Stytch's pre-built UI components can be stylized to fit the look and feel of your application, and you can play around with some of the styling options here.

Discovery authentication

Discovery refers to the flow where an end user authenticates before specifying the Organization they wish to access by logging into your application's centralized login page.

UI component during the Discovery flow

Once the user successfully authenticates, they'll be presented with a list of Organizations that they can access including current memberships, pending invites and Organizations they are eligible to join based on their verified email domain. You can optionally allow end users to create new Organizations for self-serve sign-ups by enabling the Create Organizations option in the Frontend SDKs tab in the Stytch Dashboard.

When the user selects an Organization (or creates a new one), the UI component will handle the intermediate session token exchange, producing a new session corresponding to that Organization.

Check out our Discovery flow UI component implementation guide for detailed implementation steps.

Organization-specific login

Organization-specific login refers to the flow where end users go to a specialized login page for their tenant, often a subdomain or route that contains the Organization Slug (e.g. acme-corp.yourapp.com or yourapp.com/team/acme-corp).

The pre-built UI component will surface the specific authentication methods that the Organization allows, and the end user can then log into the Organization directly if they are an active member, have a pending invite or are eligibile to join based on their verified email domain or the SSO Connection that they authenticated through.

UI component at the beginning of the Organization flow

At the end of the authentication flow, the UI component will start a new session for the appropriate Organization.

Check out our Organization flow UI component integration guide for detailed implementation steps.

Admin Portal UI

The Admin Portal provides all of the components that you'd need for your admin users to manage their Organization including:

  • Member management

  • Organization settings

  • SSO configuration and management

  • SCIM configuration and management

Each of these is a distinct component, for maximum flexibility in how you wish to embed into your application. All of the Admin Portal UI components leverage Stytch RBAC to only render the functionality that the logged in member is authorized for.

Check out our SDK Reference on the Admin Portal UI for more details on implementation and styling.

Member management

Member management UIUnstylized pre-built UI component for member management. Provides support for viewing members, inviting members, deactivating and reactivating members, and managing the member's authentication settings (e.g. resetting MFA) and profile information (e.g. updating email address).

Organization settings

Member management UIUnstylized pre-built UI component for managing an organization's authentication and authorization settings. Provides support for configuring allowed primary auth methods (e.g. SSO only), MFA policy, invite and Just-in-Time (JIT) provisioning settings by email domain, and automatic role assignments based on SCIM Group membership, email domain, or SSO Connection.

SSO configuration and management

Member management UIUnstylized pre-built UI component for viewing all SSO Connections for an Organization. Provides support for creating, updating and deleting SSO Connections for the Organization.

SCIM configuration and management

Member management UIUnstylized pre-built UI component for managing SCIM Connection. Provides support for creating, updating and deleting a SCIM Connection, as well as managing token rotation.