Text Customization

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 package, respectively.

ICU MessageFormat

All customizable strings use ICU MessageFormat.

Available Strings

To see all available strings that can be customized, navigate to the @stytch/vanilla-js package in your node_modules and locate the file at:

node_modules/@stytch/vanilla-js/messages/b2b/en.po

This file contains all the default English strings used throughout the B2B SDK and their corresponding keys.

Basic Usage

Pass your custom strings to the StytchB2B component:

import { StytchB2B } from '@stytch/react/b2b';

const customStrings = {
  'formField.email.label': 'Work Email Address',
  'login.title': 'Welcome Back!',
};

function App() {
  return (
    <StytchB2B
      config={{
        products: ['emailMagicLinks', 'oauth', 'passwords'],
        emailMagicLinksOptions: {
          loginRedirectURL: 'http://localhost:3000/dashboard',
          loginExpirationMinutes: 60,
        },
      }}
      strings={customStrings}
    />
  );
}

Localization

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
};

function App() {
  return (
    <StytchB2B
      config={{
        products: ['emailMagicLinks', 'oauth', 'passwords'],
        emailMagicLinksOptions: {
          loginRedirectURL: 'http://localhost:3000/dashboard',
          loginExpirationMinutes: 60,
        },
      }}
      // If not provided, the default English strings will be used
      strings={locale === 'es' ? spanishStrings : {}}
    />
  );
}

Dynamic Content Handling

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>',
};

Discovery

One-Time Passcodes