Lock Version 10

This document uses the latest version of Lock (version 10). If you're already using version 9, check out the Lock 9 to Lock 10 migration guide, or the Lock 9 Documentation.

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.6/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, and if and when supported languages are added to Lock 10, they will be added to the i18n directory with new releases.

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.

Further Information

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.

Lock: Table of Contents