Lock: Internationalization

You can change the language of Lock by using the language configuration option. This will pull the corresponding language file from the i18n directory in Lock. Take a look at that i18n directory for a current list of provided languages.

In order to use the below examples, you'll need to first include Lock in your page:

<!-- Latest minor release -->
<script src="https://cdn.auth0.com/js/lock/10.16/lock.min.js"></script>

Then, you will need to define your options object, and instantiate Lock.

// Select a supported language
var options = {
  language: 'es'
};

// Initiating our Auth0Lock
var lock = new Auth0Lock(
  'YOUR_CLIENT_ID',
  'YOUR_AUTH0_DOMAIN',
  options
);

The language option needs to be a string matching the name of the corresponding file in the i18n directory within Lock. You can look at existing language files to provide an example format to copy for any new languages you wish to add yourself. If and when supported languages are added to Lock, they will be added to the i18n directory with new releases.

Missing translation values

Translation data for Lock comes from language files which have key-value pairs representing various translations. For some languages, certain values may be missing, in which case you will see a warning: language does not have property <missing prop>. We encourage you to submit a pull request to add these missing values. Alternatively, you may define the missing values in your Lock options (see below).

You can also customize your own specific dictionary items using the languageDictionaryoption. This is especially useful if you want to keep the language using one of the supported languages, but change the specific wording of a few items, such as re-wording the title or making various other labels read different messages, but leaving the remaining text on the widget intact.

// Customize some languageDictionary attributes
var options = {
  languageDictionary: {
    emailInputPlaceholder: "something@youremail.com",
    title: "Log me in"
  },
};

// Initiating our Auth0Lock
var lock = new Auth0Lock(
  'YOUR_CLIENT_ID',
  'YOUR_AUTH0_DOMAIN',
  options
);

Furthermore, the languageBaseUrl option, which takes a string value (a URL), overrides the language source url for Auth0's provided translations. By default it uses to Auth0's CDN URL https://cdn.auth0.com because that is where the provided language translations are stored. By providing another value, you can use your own source for the language translations as needed for your clients.

For an example of available languageDictionary property names, and of how to structure a language file, see the English dictionary file for Lock 10. And for more information on how to configure Lock, check out the api reference or the full reference of configuration options that are available.