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 the i18n directory for language files.

To use the following examples, you'll need to first include Lock in your page:

<script src="https://cdn.auth0.com/js/lock/11.14/lock.min.js"></script>

Next define your options object and include the language option. The language option needs to be a string matching the name of the corresponding file in the i18n directory within Lock. Then instantiate Lock.

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

// Initiating our Auth0Lock
var lock = new Auth0Lock(
  '{yourClientId}',
  '{yourDomain}',
  options
);

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 languageDictionary option. This is useful if you are using one of the supported languages, but change the specific wording of a few items. For example, you might re-word the title or change the way other labels display to the user while 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(
  '{yourClientId}',
  '{yourDomain}',
  options
);

For an example of available languageDictionary property names and how to structure a language file, see the English dictionary file for Lock.

The languageBaseUrl option, which takes a string value (a URL), overrides the language source URL for Auth0's provided translations. By default, it uses the 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 applications. Your language source should be a JavaScript file.