Below you'll find a config reference for our pre-built UI components. We also recommend checking out our B2B UI components guides for an overview of our UI component authentication flows.
UI config
Fields
config* object
The config object for the UI components.
products* array
The products array allows you to specify the authentication methods that you would like to expose to your users.
The order of the products that you include here will also be the order in which they appear in the login form, with the first product specified appearing at the top of the login form.
Currently the JavaScript B2B SDK supports our emailMagicLinks, oauth, sso, and passwords products.
emailMagicLinks and oauth are supported in both authentication flow types, whereas sso is only supported in the Organization authentication flow type. passwords is always supported in the Organization authentication flow type, but is also supported in the Discovery flow if cross-org passwords are enabled for the project.
If the only product specified is oauth, and the only OAuth provider specified is google with one_tap set to true, the login form will not be displayed. Instead, we will only show the Google one tap prompt in the upper right of the user's browser.
authFlowType* string
The authFlowType lets you specify the authentication flow type that you wish to enable in the SDK. The options are Discovery to let members log into any organization they are a part of; Organization to let members log into a specific organization; and PasswordReset to handle password reset flows (after the user clicks the password reset redirect URL). To enable the Organization flow type, you also must add a slug pattern to the authorized domain through the Frontend SDK page in the Dashboard.
organizationSlug string
The slug of the Organization to present login options for. This is only used when the authFlowType is set to Organization. If you do not specify an organizationSlug value, the UI component will use the Organization URL template set up in the Frontend SDK page of the Stytch Dashboard in order to infer the Organization from the URL that the component is hosted on.
emailMagicLinksOptions* object
The options for email magic links. This is required if emailMagicLinks is present in the products array.
loginRedirectURL string
The URL that will appear in your email template and accepts a token (ex: you implement 'https://example.com/authenticate?token=123' in your app and pass 'https://example.com/authenticate' as the redirect URL). This link should route to an endpoint that authenticates your user via Stytch's authenticate endpoint and redirect to your app's experience for existing users.
signupRedirectURL string
The URL that will appear in your email template and accepts a token (ex: you implement 'https://example.com/authenticate?token=123' in your app and pass 'https://example.com/authenticate' as the redirect URL). This link should route to an endpoint that authenticates your user via Stytch's authenticate endpoint and redirect to your app's experience for new users.
discoveryRedirectURL string
The URL that will appear in your email template and accepts a token (ex: you implement 'https://example.com/authenticate?token=123' in your app and pass 'https://example.com/authenticate' as the redirect URL). This link should route to an endpoint that authenticates your user via Stytch's discovery authenticate endpoint and redirect to your app's experience for users logging into the discovery flow.
loginTemplateId string
Custom template ID for login emails. By default, it will use your default email template. The template must be a template using our built-in customizations or a custom HTML email for Magic links - Login.
signupTemplateId string
Custom template ID for sign-up emails. By default, it will use your default email template. The template must be a template using our built-in customizations or a custom HTML email for Magic links - Sign-up.
locale string
Used to determine which language to use when sending the user this delivery method. Parameter is a IETF BCP 47 language tag, e.g. "en".
Currently supported languages are English ("en"), Spanish ("es"), French ("fr") and Brazilian Portuguese ("pt-br"); if no value is provided, the copy defaults to English.
Request support for additional languages here!
domainHint string
A hint indicating which domain the email will be sent from used in the filters included in the component's links to common email inboxes (for example, https://mail.google.com/mail/u/0/#search/from%3A%40domainHint%20in%3Aanywhere). This field is only required if your project uses more than one custom domain to send emails.
emailOtpOptions* object
The options for email one time passcodes. This is required if emailOtp is present in the products array.
loginTemplateId string
Custom template ID for login emails. By default, it will use your default email template. The template must be a template using our built-in customizations or a custom HTML email for OTP - Login.
signupTemplateId string
Custom template ID for sign-up emails. By default, it will use your default email template. The template must be a template using our built-in customizations or a custom HTML email for OTP - Sign-up.
locale string
Used to determine which language to use when sending the user this delivery method. Parameter is a IETF BCP 47 language tag, e.g. "en".
Currently supported languages are English ("en"), Spanish ("es"), French ("fr") and Brazilian Portuguese ("pt-br"); if no value is provided, the copy defaults to English.
Request support for additional languages here!
ssoOptions* object
The options for SSO. This is required if sso is present in the products array.
loginRedirectURL string
The URL that will appear in your email template and accepts a token (ex: you implement 'https://example.com/authenticate?token=123' in your app and pass 'https://example.com/authenticate' as the redirect URL). This link should route to an endpoint that authenticates your user via Stytch's authenticate endpoint and redirect to your app's experience for existing users.
signupRedirectURL string
The URL that will appear in your email template and accepts a token (ex: you implement 'https://example.com/authenticate?token=123' in your app and pass 'https://example.com/authenticate' as the redirect URL). This link should route to an endpoint that authenticates your user via Stytch's authenticate endpoint and redirect to your app's experience for new users.
oauthOptions* object
The options for OAuth. This is required if oauth is present in the products array.
providers* array[object]
Specifies which OAuth providers to display.
type string
The provider type. Currently we support google, microsoft, hubspot, slack, and github.
one_tap boolean
Whether to display the Google One Tap prompt in the top right corner of the user's browser. This parameter is only allowed if the type is set to google.
cancel_on_tap_outside boolean
Controls whether the Google One Tap prompt is automatically dismissed when the user taps outside of it. This parameter is only allowed if the type is set to google and one_tap is set to true. Defaults to true.
loginRedirectURL string
The URL that will appear in your email template and accepts a token (ex: you implement 'https://example.com/authenticate?token=123' in your app and pass 'https://example.com/authenticate' as the redirect URL). This link should route to an endpoint that authenticates your user via Stytch's authenticate endpoint and redirect to your app's experience for existing users.
signupRedirectURL string
The URL that will appear in your email template and accepts a token (ex: you implement 'https://example.com/authenticate?token=123' in your app and pass 'https://example.com/authenticate' as the redirect URL). This link should route to an endpoint that authenticates your user via Stytch's authenticate endpoint and redirect to your app's experience for new users.
discoveryRedirectURL string
The URL that will appear in your email template and accepts a token (ex: you implement 'https://example.com/authenticate?token=123' in your app and pass 'https://example.com/authenticate' as the redirect URL). This link should route to an endpoint that authenticates your user via Stytch's discovery authenticate endpoint and redirect to your app's experience for users logging into the discovery flow.
customScopes array[string]
An optional array of scopes that Stytch will request for your application in addition to the base set of scopes required for login.
providerParams object
An object with any additional parameters that you'd like to pass along to the OAuth provider (for example, login_hint, for providers that support it).
passwordOptions* object
The options for Passwords. This is required if passwords is present in the products array.
loginRedirectURL* string
The URL that members will be sent to if they click the "Log in without password" button in password reset emails. This URL should route to a page that authenticates the member via our Email magic links authenticate method.
resetPasswordRedirectURL* string
The URL that members will be sent to if they click the "Reset password" button in password reset emails. This URL should route to a page that allows your members to reset their password via the Password reset by email method.
resetPasswordExpirationMinutes int
The number of minutes that the password reset token sent in password reset emails will be valid for. Defaults to 30 minutes.
resetPasswordTemplateId string
Custom template ID for password reset emails, configured via the Branding page in the Stytch Dashboard. If this value is not specified, your default password reset template will be used.
locale string
Used to determine which language to use when sending the user this delivery method. Parameter is a IETF BCP 47 language tag, e.g. "en".
Currently supported languages are English ("en"), Spanish ("es"), French ("fr") and Brazilian Portuguese ("pt-br"); if no value is provided, the copy defaults to English.
Request support for additional languages here!
sessionOptions object
The options for session management. We create a session for members when they log in. You can access a member or session using the Member or Session SDK methods.
sessionDurationMinutes int
Set the session lifetime to be this many minutes from now; minimum of 5 and a maximum of 525600 minutes (365 days). Note that a successful authentication will continue to extend the session this many minutes.
mfaProductInclude array
MFA products to include in the UI. If specified, the list of available products will be limited to those included. Defaults to all available products.
Note that if an organization restricts the available MFA methods, the organization's settings will take precedence. In addition, if a member is enrolled in MFA compatible with their organization's policies, their enrolled methods will always be made available.
Currently the JavaScript B2B SDK supports our smsOtp and totp MFA products.
mfaProductOrder array
The order to present MFA products to a member when multiple choices are available, such as during enrollment.
Currently the JavaScript B2B SDK supports our smsOtp and totp MFA products.
enableShadowDOM boolean
The enableShadowDOM configuration option allows developers to use the Stytch SDK in a shadow DOM. This defaults to false. This property was introduced in v1.0.0 of the @stytch/vanilla-js package. Prior versions of the package default to the shadow DOM being enabled. To retain this behavior, set the flag to true.
directLoginForSingleMembership object
A configuration option that allows you to skip the discovery flow and log a member in directly only if they are a member of a single organization.
status boolean
Whether or not direct login for single membership is enabled. If the user has an invite or can JIT provision into an Organization the Discovery Organization select pane will still be shown unless the other two properties are also enabled.
ignoreInvites boolean
If enabled, logs a user directly into their existing Organization even if they have one or more pending invites to a different Organization. This bypasses the Discovery Organization select pane.
ignoreJitProvisioning boolean
If enabled, logs a user directly into their existing Organization even if they have Organizations they could join via JIT provisioning. This bypasses the Discovery Organization select pane.
directCreateOrganizationForNoMembership boolean
Whether or not an organization should be created directly when a user has no memberships, invitations, or organizations they could join via JIT provisioning. This has no effect if the ability to create organizations from the frontend SDK is disabled in the Stytch Dashboard. Defaults to false.
disableCreateOrganization boolean
Whether to prevent users who are not members of any organization from creating a new organization during the discovery flow. This has no effect if the ability to create organizations from the frontend SDK is disabled in the Stytch Dashboard. Defaults to false.
styles object
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.
fontFamily string
The font family that will apply to all text in the SDK.
hideHeaderText boolean
When this value is true, the title and description text will not show in the SDK.
container object
The configuration object for the Stytch UI container.
width string
The width of the SDK container.
backgroundColor string
The background color of the SDK container.
borderColor string
The border color of the SDK container.
borderRadius string
The border radius of the SDK container.
colors object
The configuration object for colors used in the Stytch UI components.
primary string
Your primary brand color. This will be applied to most of the text in the SDK.
secondary string
Your secondary brand color. This will be applied to text disclaimers and other visual elements.
success string
A success color to be used in visual elements.
error string
An error color to be used in visual elements.
buttons object
The configuration object for buttons in the Stytch UI component.
primary object
The configuration object for primary buttons
textColor string
The text color of the primary button.
backgroundColor string
The background color of the primary button.
borderColor string
The border color of the primary button.
borderRadius string
The border radius of the primary button.
secondary object
The configuration object for secondary buttons
textColor string
The text color of the secondary button.
backgroundColor string
The background color of the secondary button.
borderColor string
The border color of the secondary button.
borderRadius string
The border radius of the secondary button.
inputs object
The configuration object for text inputs in the Stytch UI components.
textColor string
The text color of the text inputs.
backgroundColor string
The background color of the text inputs.
placeholderColor string
The color of the placeholder text in the text inputs.
borderColor string
The border color of the text inputs.
borderRadius string
The border radius of the text inputs.
logo object
The configuration object for your custom logo.
logoImageUrl string
The URL of your custom logo. The image will be resized to fit a max height of 50px, and a max width of 100px.
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.
strings object
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.
import React from 'react';
import { StytchB2B } from '@stytch/react/b2b';
const Login = () => {
const style = {
fontFamily: 'Arial',
};
const callbacks = {
onEvent: ({ type, data }) => {
console.log(type, data);
},
onError: (data) => {
console.log(data);
},
};
// Example config for the Discovery auth flow, hosted on a generic login page
const discoveryConfig = {
authFlowType: 'Discovery',
products: ['emailMagicLinks', 'oauth'],
emailMagicLinksOptions: {
discoveryRedirectURL: 'https://example.com/authenticate',
},
oauthOptions: {
discoveryRedirectURL: 'https://example.com/authenticate',
providers: [
{ type: 'google', one_tap: true, cancel_on_tap_outside: false },
{ type: 'microsoft' },
],
},
sessionOptions: {
sessionDurationMinutes: 60,
},
};
// Example config for the Organization auth flow, hosted on an
// Organization-specific login page
const organizationConfig = {
authFlowType: 'Organization',
products: ['emailMagicLinks', 'oauth', 'sso', 'passwords'],
emailMagicLinksOptions: {
loginRedirectURL: 'https://example.com/authenticate',
signupRedirectURL: 'https://example.com/signup',
},
oauthOptions: {
loginRedirectURL: 'https://example.com/authenticate',
signupRedirectURL: 'https://example.com/signup',
providers: [
{ type: 'google', one_tap: true, cancel_on_tap_outside: false },
{ type: 'microsoft' },
],
providerParams: {
login_hint: 'example_hint@stytch.com',
},
},
ssoOptions: {
loginRedirectURL: 'https://example.com/authenticate',
signupRedirectURL: 'https://example.com/signup',
},
passwordOptions: {
loginRedirectURL: 'https://example.com/authenticate',
resetPasswordRedirectURL: 'https://example.com/resetPassword',
resetPasswordExpirationMinutes: 20,
},
sessionOptions: {
sessionDurationMinutes: 60,
},
};
// Example config for PasswordReset flows - you'll launch the UI component with this configuration after users click the password reset redirect URL.
const passwordResetConfig = {
authFlowType: 'PasswordReset',
products: ['passwords'],
sessionOptions: { sessionDurationMinutes: 60 },
};
// Customize the text in the prebuilt UI via the `strings` parameter
const strings = {
'organizationLogin.title': 'Proceed to your {organizationName} account',
};
return (
<div>
{/* Choose the discoveryConfig, organizationConfig, or passwordResetConfig */}
<StytchB2B
config={discoveryConfig}
styles={style}
callbacks={callbacks}
strings={strings}
/>
</div>
);
};
export default Login;