Skip to main content

Localized languages

Logto supports a wide range of pre-defined languages and offers 113 additional language tags. This powerful tool allows you to customize the sign-in experience by creating and managing your own language options and translation.

Customization steps in Logto Console​

Easily customize language settings in the Logto Console without coding.

  1. Navigate to: Console > Sign-in experience > Content > Languages.
  2. Mange language: Click “Manage language” button to access your language library.
    • Edit existing languages: Customize translations of Logto-provided languages. These languages cannot be deleted, but your changes will override the default values.
    • Add a new language: Click the ”Add language” button, select a language tag, provide your translations, then save changes to add a new language.
  3. Enable auto-detect: When enabled, automatically shows the sign-in page in the user's preferred language based on their device settings.
  4. Set default language: You can choose a default language from your language library. It will be used when the detected user language isn’t covered in the current language library.

Here are some key terms to understand when managing languages:

DefinitionDescription
Language tagThe language tag identifies the language of the content. A language tag is made up of a language code (for example, en, fr, zh) and a country/region code (for example, US, UK, KR) separated by hyphens. A language tag looks like this: en-US.
Logto provided languageLogto provided language is Logto official language and is stored in Logto original code base.
Added languageAdded language is the language added by users.
Logto source valuesLogto source values are Logto-supplied values that have not been customized by users.
Custom valuesCustom values are values that have already been customized by users. Logto source values will be overwritten.

Customization using Management API​

You can use the Management API PUT /api/custom-phrases/{languageTag} to customize language translations. The API request body is a partical locale object like:

{
  "input": { "username": "Username", "password": "Password" },
  "secondary": {
    "social_bind_with": "Already had an account? Sign in to link {{methods, list(type: disjunction;)}} with your social identity."
  },
  "action": { "sign_in": "Sign in" },
  "error": {
    "general_required": "{{types, list(type: disjunction;)}} is required"
  },
  "list": { "or": "or" },
  "user_scopes": {
    "descriptions": { "custom_data": "Your custom data" }
  }
}

Refer to the source code to see all customizable contents.

You can also use the PATCH /api/sign-in-exp API to to control the language detection policies.

Use cases​

How added language appear to end customers?

Let's say you have a website where English is the default language and auto-detect is turned on. A user from Japan happens upon your site and decides to create an account. If he/she uses Japanese as their app language but Logto doesn't yet support the language, the sign-in screen will appear in English.

Logto sign-in experience i18n makes customized language possible.

Click the ja language tag to add your own Japanese translation.

In this way, the user accessing your site from Japan will be able to read content in Japanese, which you have just translated from English.

FAQs​

What if the language I added becomes Logto provided language?​

Next to the language tag on the left, a Logto-provided tag will appear, and the language you added will no longer be removable. The modified values continue to function and replace the original Logto values. Erase the user-supplied values to use the values provided by Logto's default configuration.

What if I only added a few custom values?​

What the final users see is the result of the two columns merging. Suppose, that you only want to make adjustments to a subset of the original content copies that Logto supplied. The only difference between your signup screen and the one provided by Logto will be the keys you edited. The rest of the content will remain unchanged.

Supporting Arabic and RTL (Right-to-left) language layout in your application