Localization

Hosted Pages V3 supports multiple languages so your users see content in a language they understand. This guide explains how language is detected, how to override it, and how to implement localization programmatically using the V3JS SDK.

What Localization Does

Detects the browser's preferred language automatically
Allows you to force a language with a query parameter
Enables per‑component text customization across Auth, Profile, and Workflow
Supports programmatic localization via commonOptions.localization when using V3JS directly

How Language Is Chosen

By default, Hosted Pages use the browser's language settings. You can use javascript with V3JS SDK to override the language options to create customized experience.

Important: If browser localization is enabled (localization = true in commonOptions), template-level localization takes priority and will auto-switch based on browser settings. In this case, localizationObject passed in commonOptions will not be honored.

V3JS vs V2JS Localization

When using the V3JS SDK directly, localization works differently than V2JS:

Feature	V2JS	V3JS
Method	Hook: `setLocaleBasedInfo()`	`commonOptions.localization` object
File Type	JS file	JSON object
Scope	Full (labels, errors, validation, etc.)	Only form UI text (titles, labels, buttons, placeholders)
Defaults	None	Built-in English defaults
Merging	Full override	Your values override defaults

Programmatic Localization

When using V3JS directly, you can implement localization in two ways:

Static Localization

Use when language is fixed (e.g., French-only site).

const localization = {
  login: {
    title: "Connexion",
    emailLabel: "Courriel",
    passwordLabel: "Mot de passe",
    submitButton: "Se connecter",
    forgotPasswordLink: "Mot de passe oublié ?"
  },
  registration: {
    title: "Inscription",
    emailLabel: "Courriel",
    passwordLabel: "Mot de passe",
    submitButton: "S'inscrire"
  }
};

const commonOptions = {
  apiKey: "your-api-key",
  localization: localization
};

const LRObject = new LoginRadiusV3(commonOptions);
LRObject.init();

Dynamic Localization (Based on URL Parameter)

Use when users switch languages via toggle or link.

Step 1: Create JSON files

Create locale files like locales/french.json:

{
  "login": {
    "title": "Connexion",
    "emailLabel": "Courriel",
    "submitButton": "Se connecter"
  },
  "registration": {
    "title": "Inscription",
    "submitButton": "S'inscrire"
  }
}

Step 2: Detect language from URL and initialize

async function getLocalizationFromUrl() {
  const params = LRObject.util.parseQueryString(window.location.search.substring(1));
  const lang = params.language;

  if (!lang) return {}; // Use English defaults

  const fileMap = {
    french: 'french.json',
    chinese: 'chinese.json',
    spanish: 'spanish.json'
  };

  const file = fileMap[lang];
  if (!file) return {};

  try {
    const response = await fetch(`locales/${file}`);
    return await response.json();
  } catch (e) {
    console.warn("Localization file not found:", file);
    return {};
  }
}

(async () => {
  const localization = await getLocalizationFromUrl();

  const commonOptions = {
    apiKey: "your-api-key",
    localization: localization
  };

  const LRObject = new LoginRadiusV3(commonOptions);
  LRObject.init();
})();

Note: The page must reload when language changes.

Language Toggle Implementation

Add a language selector to your page:

<select id="lang_toggle">
  <option value="">English</option>
  <option value="?language=french">Français</option>
  <option value="?language=chinese">中文</option>
  <option value="?language=spanish">Español</option>
</select>

document.getElementById('lang_toggle').addEventListener('change', function() {
  window.location.search = this.value;
});

Browser Localization vs Programmatic Localization

Browser Localization Enabled

If localization = true is passed in commonOptions:

Template-level localization takes priority
Language auto-switches based on browser settings
localizationObject in commonOptions will not be honored

Browser Localization Disabled

If browser localization is turned off:

localizationObject passed in commonOptions will be merged with default template translations
Only specified fields are overridden; others use default English content

const localizationObject = {
  login: {
    title: 'customTitle' // Custom title for login
  },
  registration: {
    title: 'custom register title' // Custom title for registration
  }
};

const commonOptions = {
  apiKey: "your-api-key",
  localization: localizationObject // Merging with default template
};

const LRObject = new LoginRadiusV3(commonOptions);
LRObject.init();

Text Customization

Customize titles, button labels, descriptions, and input labels per component.

Components include: Login, Passwordless, OTP, Social, Footer, and more
Edit text per language and component directly in the Admin Console
Preview changes and verify layout before publishing

Using Hosted Pages Templates

Go to Admin Console > Deployment > Templates
Edit text directly in the editor
Create one template per language
No localization object needed when using templates

Validation & error messages: Localized using hooks

Email & SMS Localization

Use language-specific template names for emails and SMS:

const params = LRObject.util.parseQueryString(window.location.search.substring(1));

const commonOptions = {
  verificationEmailTemplate: 
    params.language === 'french' ? 'email-verification-fr' : 'verification-default',
  smsTemplateWelcome: 
    params.language === 'french' ? 'welcome-sms-fr' : 'welcome-default'
};

Template	Option
Verification Email	`verificationEmailTemplate`
Reset Password	`resetPasswordEmailTemplate`
Welcome Email	`welcomeEmailTemplate`
Welcome SMS	`smsTemplateWelcome`

Google reCAPTCHA Language

Set the reCAPTCHA language based on your localization:

const params = LRObject.util.parseQueryString(window.location.search.substring(1));
commonOptions.v2RecaptchaLanguage = params.language === 'french' ? 'fr' : 'en';

See the full list of reCAPTCHA language codes.

Localization Object Schema

The localization object supports customization for all major components:

Authentication: login, registration, passkey-registration
Password Management: forgotpassword, reset-password-by-token, reset-password-by-email-otp, reset-password-by-phone-otp
MFA Flows: mfa-selector, mfa-passkey, email-otp, sms-otp, authenticator-login, authenticator-setup
Passwordless: passwordless-login, verify-passwordless-login-email, verify-passwordless-login-email-otp, verify-passwordless-login-sms-otp
PIN Flows: set-pin, pin-authentication, forgot-pin, reset-pin-by-reset-token, reset-pin-by-otp
Verification: verify-email-otp, verify-email-link, verify-sms-otp
Consent & Privacy: consent-form, privacy-policy
Account States: account-blocked, account-suspended, account-locked, account-restricted
Profile: profile, email-profile, personal-details-profile, providers-profile

Each component supports fields like title, description, buttonText, emailLabel, passwordLabel, and component-specific fields. See the full schema reference for complete field lists.

Add Languages

In the Admin Console, open Hosted Pages → Localization
Click Add Language, choose a language code, and provide translations
Ensure all required strings are covered for each enabled component

RTL and Layout

If you support right‑to‑left languages (like Arabic), verify spacing, alignment, and component mirroring. Keep styles flexible and avoid assumptions about text length.

Accessibility

Provide sufficient contrast for text in all themes
Maintain readable font sizes and spacing
Ensure keyboard navigation and screen reader support work across languages

Testing

Switch between target languages on desktop and mobile
Validate error messages, email templates, and SMS content
Confirm date, time, currency, and number formats per locale
Verify that browser localization and programmatic localization work as expected