How to customize the text in the StytchB2B Login component
String customization is not supported for admin portal components
The Stytch B2B SDK allows you to customize the text in the prebuilt UI through the strings parameter. This feature supports both one-off customizations for specific text changes and comprehensive localization efforts for supporting multiple languages.Text customization requires version 5.25.0, 19.6.0, and/or 21.6.0 or higher of the @stytch/vanilla-js, @stytch/react, and/or @stytch/nextjs packages, respectively.
Types for the strings prop is available as the Strings types from version v5.43.0, v19.17.0 and/or v21.17.0 of the @stytch/vanilla-js, @stytch/react, and/or @stytch/nextjs packages, respectively.The type is a Partial since we recommend only including strings you intend to override, but you use Required<Strings> if you are doing a complete localization and intend to translate every string.
For complete localization, you can override all strings, then conditionally display the correct string based on the user’s locale:
const spanishStrings = { "login.title": "Regístrate o inicia sesión", // ... rest of strings};<StytchB2B config={{ products: [B2BProducts.emailMagicLinks, B2BProducts.oauth, B2BProducts.passwords], emailMagicLinksOptions: { loginRedirectURL: "http://localhost:3000/dashboard", loginExpirationMinutes: 60, }, }} // If not provided, the default English strings will be used strings={locale === "es" ? spanishStrings : {}}/>
Some strings include dynamic content, such as the Organization name or email address. You can use ICU MessageFormat to format these strings dynamically.
/* Value in the en.po file: msgid "organizationLogin.title" msgstr "Continue to {organizationName}"*/const strings = { "organizationLogin.title": "Proceed to {organizationName}",};
Additionally, some strings include special components as part of the string. You can use these components to customize the text inside the component.
/* Value in the en.po file: msgid "password.reset.emailSent.resendText" msgstr "Didn't get it? <resendButton>Resend email</resendButton>"*/const strings = { "password.reset.emailSent.resendText": "Didn't receive the email? <resendButton>Retry</resendButton>",};
Assistant
Responses are generated using AI and may contain mistakes.
