The B2BIdentityProvider function renders UI 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.
The style 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.
The font family that will apply to all text in the SDK.
When this value is true, the title and description text will not show in the SDK.
The configuration object for the Stytch UI container.
The width of the SDK container.
The background color of the SDK container.
The border color of the SDK container.
The border radius of the SDK container.
The configuration object for colors used in the Stytch UI components.
Your primary brand color. This will be applied to most of the text in the SDK.
Your secondary brand color. This will be applied to text disclaimers and other visual elements.
A success color to be used in visual elements.
An error color to be used in visual elements.
The configuration object for buttons in the Stytch UI component.
The configuration object for primary buttons
The text color of the primary button.
The background color of the primary button.
The border color of the primary button.
The border radius of the primary button.
The configuration object for secondary buttons
The text color of the secondary button.
The background color of the secondary button.
The border color of the secondary button.
The border radius of the secondary button.
The configuration object for text inputs in the Stytch UI components.
The text color of the text inputs.
The background color of the text inputs.
The color of the placeholder text in the text inputs.
The border color of the text inputs.
The border radius of the text inputs.
The configuration object for your custom logo.
The URL of your custom logo. The image will be resized to fit a max height of 50px, and a max width of 100px.
Optional callbacks that are triggered by various events in the SDK. See more details about the callbacks here.
A callback function that responds to events sent from the SDK.
A callback function that responds to errors in the SDK. It is useful for debugging during development and error handling in production.
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.
A top-level UI section with a header and multiple sub-items.{header: "ChatGPT is requesting to:", items: ["view your saved information"]}
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"] }
The trusted auth token params to use for the authorization flow.
The trusted auth token to be exchanged for a session.
The ID of the token profile, from the Stytch Dashboard, to use for the authorization flow.
import React from 'react';
import { B2BIdentityProvider } from '@stytch/react/b2b';
const styles = { fontFamily: 'Arial' };
const MyComponent = () => {
return <B2BIdentityProvider styles={styles} />;
};
export default MyComponent;If your project is using Trusted Auth Tokens, they can be provided to the component as well. When trustedAuthTokenParams are supplied, the component will exchange the provided token for a session and automatically log the user in before starting the authorization flow.
To see all authentication and customization options, see the UI config section.
import React from 'react';
import { B2BIdentityProvider } from '@stytch/react/b2b';
const styles = { fontFamily: 'Arial' };
const trustedAuthTokenParams = {
trustedAuthToken: 'eyJ...',
tokenProfileID: 'token-profile-id',
};
const MyComponent = () => {
return <B2BIdentityProvider styles={styles} trustedAuthTokenParams={trustedAuthTokenParams} />;
};
export default MyComponent;If your project has Custom Scopes configured, the Consent UI can be customized via the getIDPConsentManifest prop. Supply a custom manifest for fine-grained control over the wording used and grouping of the permissions being requested. If no getIDPConsentManifest function is defined, the description field for each scope will be used instead.
To see all authentication and customization options, see the UI config section.
import React from 'react';
import { B2BIdentityProvider } from '@stytch/react/b2b';
const styles = { fontFamily: 'Arial' };
const isProfileScope = (scope) => scope === 'openid' || scope === 'email' || scope === 'profile';
const isDataScope = (scope) => !isProfileScope(scope);
const getScopeDescription = (scope) => {
switch (scope) {
case 'openid':
return 'Your account ID';
case 'email':
return 'Your email address';
case 'profile':
return 'Your name and profile';
case 'read:data':
return 'Read access to your data';
case 'write:data':
return 'Write access to your data';
default:
return `The ${scope} permission`;
}
};
const getManifest = ({ scopes, clientName }) => [
{
header: `${clientName} wants to view your Profile`,
items: [
{
text: 'View information stored in your Profile about your account and your user.',
details: scopes.filter(isProfileScope).map(getScopeDescription),
},
],
},
{
header: `${clientName} wants to access your Data`,
items: scopes.filter(isDataScope).map(getScopeDescription),
},
];
const MyComponent = () => {
return <B2BIdentityProvider styles={styles} getIDPConsentManifest={getManifest} />;
};
export default MyComponent;