/
Contact usSee pricingStart building
    Overview
    Changelog
    Installation

    Pre-built UI

    Component Playground
    StytchB2B
      Configuration
      Callbacks
      Text Customization
    Admin Portal
      SSO
      Org Settings
      Member Management
      SCIM
    B2BIdentityProviderBeta
      Configuration
      UI Callbacks

    Headless

    Organizations
      Get Organization
      Get Organization by Slug
      Update Organization
      Delete Organization
      Get Organization Connected Apps
      Get Organization Connected App
    Members
      Get Member
      Create Member
      Update Member
      Search Members
      Delete Member
      Reactivate Member
      Delete Member Password
      Delete Member MFA Phone Number
      Delete Member MFA TOTP
      Unlink Retired Member Email
      Update Self
      Delete Self Password
      Delete Self MFA Phone Number
      Delete Self MFA TOTP
      Unlink Retired Self Email
      Update Member (Deprecated)
      Delete Member MFA Phone Number (Deprecated)
      Get Member Connected Apps
      Get Self Connected Apps
      Revoke Member Connected App
      Revoke Self Connected App
    RBAC
      Is Authorized
      Permissions
    Email Magic Links
      Login or Signup
      Invite
      Authenticate
      Send Discovery Email
      Authenticate Discovery Magic Link
    Email One-time Passcodes (OTPs)
      Login or Signup
      Authenticate OTP
      Send Discovery Email OTP
      Authenticate Discovery Email OTP
    OAuth
      Start OAuth Flow
      Google One Tap
      Authenticate
      Start Discovery OAuth Flow
      Discovery Authenticate
    Session Management
      Get Session
      Authenticate Session
      Revoke Session
      Update Session
      Exchange Session
      Get Tokens
      Revoke Sessions for Member
    SSO
      Start SSO Flow
      Authenticate
      Get SSO Connections
      Discover SSO Connections
      Delete SSO Connection
      Create SAML Connection
      Update SAML Connection
      Update SAML Connection by Metadata URL
      Delete Verification Certificate
      Create OIDC Connection
      Update OIDC Connection
      Create External Connection
      Update External Connection
    Discovery
      List Discovered Organizations
      Create Organization via Discovery
      Exchange Intermediate Session
    Passwords
      Authenticate
      Reset by Email Start
      Reset by Email
      Reset by Existing Password
      Reset by Session
      Strength Check
    • Discovery

      • Authenticate
        Reset by Email Start
        Reset by Email
    SCIM
      Create SCIM Connection
      Update SCIM Connection
      Delete SCIM Connection
      Get SCIM Connection
      SCIM Token Rotation Start
      SCIM Token Rotation Complete
      SCIM Token Rotation Cancel
      Get SCIM Connection Groups
    Multi-Factor Authentication
    • One-Time Passcodes

      • SMS Send
        SMS Authenticate
    • Time-Based One-Time Passcodes

      • TOTP Create
        TOTP Authenticate
    • Recovery Codes

      • Recovery Codes Recover
        Rotate Recovery Codes
        Get Recovery Codes
    Impersonation
      Authenticate

    More Resources

    Cookies & session management
    SWR & caching
    TypeScript
Get support on SlackVisit our developer forum

Contact us

B2B Saas Authentication

/

Frontend SDKs

/

Pre-built UI

/

StytchB2B

/

Text Customization

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.

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

Current Limitations

There are no hardcoded strings in our UI components, and as such they are fully customizable as described above. However, there may be instances where strings are returned from the network (in the case of an API error, zxcvbn feedback, etc) which are not currently customizable. We are actively working to ensure that these are customizable in the future.

ICU MessageFormat

Available Strings

Basic Usage

Localization

Dynamic Content Handling

Current Limitations