Skip to main content
import { B2BIdentityProvider } from "@stytch/react/b2b";

const presentation = {
  theme: { 'font-family': 'Arial' },
};

const IdentityProviderPage = () => {
  return <B2BIdentityProvider presentation={presentation} />;
};

export default IdentityProviderPage;
Example of IDP SSO Consent Screen UI
The B2BIdentityProvider component is used to enable the logged-in Member to perform an OAuth Authorization flow with a pre-registered Connected App. The UI component will automatically parse out OAuth related fields from the query params, such as client_id, redirect_uri, scope, and state. The Member must be logged in before this component is rendered. For an overview of when consent is required, see our Consent Management guide.

Props

presentation.theme
object or array
The presentation.theme object allows you to customize the look of the SDK. You can specify some of them or none at all. We’ll use our defaults for the ones you don’t specify.If you pass in an array of two themes, the first will automatically be used when the user’s OS is in light mode, and the second in dark mode.See our pre-built themes, how to write your own theme or reference for all properties.
presentation.options
object
The presentation.options object customizes non-style related aspects of the SDK’s appearance.You can specify some of them or none at all. We’ll use our defaults for the ones you don’t specify.
presentation.icons
object
Allows our icons to be overridden. See icon customization guide for more information.
callbacks
object
Optional callbacks that are triggered by various events in the SDK. See more details about the callbacks here.
Optional function to customize the consent screen based on the scopes requested by the client.This function expects an object of type { scopes: string[]; clientName: string } and returns a type of IDPConsentSection[] | IDPConsentItem[].If not provided, default scope descriptions will be used.
trustedAuthTokenParams
object
The trusted auth token params to use for the authorization flow.
strings
object
You should also provide a getIDPConsentManifest callback to customize the scope description and header message
Specify custom strings to be used in the prebuilt UI. Consult the message catalog (messages/b2b/en.po) for the list of available strings. Each value should be specified using ICU MessageFormat.Strings that are not defined will use the default English value as a fallback.See Text Customization for more information.