/
Contact usSee pricingStart building
    Overview
    Installation
    Changelog

    Pre-built UI

    Component Playground
    StytchLogin
      UI Configuration
      UI Callbacks
      Text Customization
    StytchPasswordReset
    StytchPasskeyRegistration
    IdentityProviderBeta
      UI Configuration
      UI Callbacks

    Headless

    Users
      Get user
      Update user
      Delete authentication factors
    Email Magic Links
      Send
      Login or create
      Authenticate
    OAuth
      Start
      Google One Tap
      Authenticate
    Passwords
      Create
      Authenticate
      Reset by Email Start
      Reset by Email
      Reset by Existing Password
      Reset by Session
      Strength Check
    One-Time Passcodes (OTP)
      Login or create via SMS
      Send via SMS
      Login or create via Email
      Send via Email
      Login or create via WhatsApp
      Send via WhatsApp
      Authenticate
    Time-Based One-Time Passcodes (TOTP)
      Create
      Authenticate
      Get Recovery Codes
      Recover
    Session Management
      Get Session
      Authenticate Session
      Revoke Session
      Update Session
      Get Tokens
    Passkeys & WebAuthn
      Register
      Authenticate
      Update
      Browser supports autofill
    Crypto Wallets
      Authenticate
      Authenticate Start
    Impersonation
      Authenticate
    Connected Apps
      Get Connected Apps
      Revoke Connected App

    More Resources

    Cookies & session management
    SWR & caching
    TypeScript
    User privacy measures
    Multi-factor authentication
    Next.js
    CAPTCHA
Get support on SlackVisit our developer forum

Contact us

Consumer Authentication

/

Frontend SDKs

/

Pre-built UI

/

StytchLogin

/

Text Customization

Text Customization

The StytchLogin component allows you to customize the text in the prebuilt UI through the strings parameter. This configuration 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/en.po

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

Basic Usage

Pass your custom strings to the StytchLogin component:

import { StytchLogin } from '@stytch/react/c';

const customStrings = {
  'login.title': 'Welcome Back!',
};

function App() {
  return (
    <StytchLogin
      config={{
        products: ['emailMagicLinks', '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 (
    <StytchLogin
      config={{
        products: ['emailMagicLinks', '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 email address. You can use ICU MessageFormat to format these strings dynamically.

Strings may also 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 "emailConfirmation.content"
  msgstr "An email was sent to <bold>{email}</bold>."
*/

const strings = {
  'emailConfirmation.content': 'An email was sent to <bold>{email}</bold>.',
};

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