B2BIdentityProvider Configuration - Stytch Docs

Documentation Index

Fetch the complete documentation index at: /docs/llms.txt

Use this file to discover all available pages before exploring further.

import { B2BIdentityProvider } from "@stytch/react/b2b";

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

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

export default IdentityProviderPage;

import { B2BIdentityProvider } from "@stytch/react/b2b";

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

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

export default IdentityProviderPage;

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.

hideHeaderText

boolean

When this value is true, the title and description text will not show in the SDK.

logo

object

The configuration object for your custom logo.

logo.url

string

The URL of your custom logo.

logo.alt

string

The alt text for the logo for non-visual users. This is required for accessibility.

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.

onEvent

(data) => void

A callback function that responds to events sent from the SDK.

onError

(data) => void

A callback function that responds to errors in the SDK. It is useful for debugging during development and error handling in production.

getIDPConsentManifest

function

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.

IDPConsentSection

{ header: string; items: IDPConsentItem[] }

A top-level UI section with a header and multiple sub-items. {header: "ChatGPT is requesting to:", items: ["view your saved information"]}.

IDPConsentItem

string | { text: string; details: string[] }

A single item to render. Can either be a simple string or an object with optional expandable details. { text: "view your saved information", details: ["Your email", "Your name", "Your phone number"] }

trustedAuthTokenParams

object

The trusted auth token params to use for the authorization flow.

trustedAuthToken

string

The trusted auth token to be exchanged for a session.

tokenProfileID

string

The ID of the token profile, from the Stytch Dashboard, 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.