> ## Documentation Index
> Fetch the complete documentation index at: https://docs-dev-actions-triggers-prototype.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> Lock v11 supports multiple languages, and allows for the addition of other custom language files, as well as for customizing the values of specific pieces of text that are displayed in the Lock widget.

# Lock Internationalization

export const AuthCodeBlock = ({filename, icon, language, highlight, children}) => {
  const [displayText, setDisplayText] = useState(children);
  const [copyText, setCopyText] = useState(children);
  const wrapperRef = React.useRef(null);
  useEffect(() => {
    let unsubscribe = null;
    function init() {
      if (!window.autorun || !window.rootStore) {
        return;
      }
      unsubscribe = window.autorun(() => {
        let processedChildrenForDisplay = children;
        let processedChildrenForCopy = children;
        for (const [key, value] of window.rootStore.variableStore.values.entries()) {
          const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
          let displayValue = value;
          if (key === "{yourClientSecret}" && value !== "{yourClientSecret}") {
            displayValue = value.substring(0, 3) + "*****MASKED*****";
          }
          processedChildrenForDisplay = processedChildrenForDisplay.replaceAll(new RegExp(escapedKey, "g"), displayValue);
          processedChildrenForCopy = processedChildrenForCopy.replaceAll(new RegExp(escapedKey, "g"), value);
        }
        setDisplayText(processedChildrenForDisplay);
        setCopyText(processedChildrenForCopy);
      });
    }
    if (window.rootStore) {
      init();
    } else {
      window.addEventListener("adu:storeReady", init);
    }
    return () => {
      window.removeEventListener("adu:storeReady", init);
      unsubscribe?.();
    };
  }, [children]);
  useEffect(() => {
    if (!wrapperRef.current) return;
    const originalWriteText = navigator.clipboard.writeText.bind(navigator.clipboard);
    let isOverriding = false;
    const handleClick = e => {
      const button = e.target.closest('[data-testid="copy-code-button"]');
      if (!button || !wrapperRef.current.contains(button)) return;
      isOverriding = true;
      navigator.clipboard.writeText = text => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
          return originalWriteText(copyText);
        }
        return originalWriteText(text);
      };
      setTimeout(() => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
        }
      }, 100);
    };
    const wrapper = wrapperRef.current;
    wrapper.addEventListener('click', handleClick, true);
    return () => {
      wrapper.removeEventListener('click', handleClick, true);
      if (navigator.clipboard.writeText !== originalWriteText) {
        navigator.clipboard.writeText = originalWriteText;
      }
    };
  }, [copyText]);
  return <div ref={wrapperRef}>
      <CodeBlock filename={filename} icon={icon} language={language} lines highlight={highlight}>
        {displayText}
      </CodeBlock>
    </div>;
};

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.

## Provided languages

Take a look at the [i18n directory](https://github.com/auth0/lock/blob/master/src/i18n/) for language files.

| Language            | Code      | Source                                                                  |
| ------------------- | --------- | ----------------------------------------------------------------------- |
| Afrikaans           | `'af'`    | [af.js](https://github.com/auth0/lock/blob/master/src/i18n/af.js)       |
| Catalan             | `'ca'`    | [ca.js](https://github.com/auth0/lock/blob/master/src/i18n/ca.js)       |
| Chinese             | `'zh'`    | [zh.js](https://github.com/auth0/lock/blob/master/src/i18n/zh.js)       |
| Chinese (Taiwan)    | `'zh-tw'` | [zh-tw.js](https://github.com/auth0/lock/blob/master/src/i18n/zh-tw.js) |
| Croatian            | `'hr'`    | [hr.js](https://github.com/auth0/lock/blob/master/src/i18n/hr.js)       |
| Czech               | `'cs'`    | [cs.js](https://github.com/auth0/lock/blob/master/src/i18n/cs.js)       |
| Danish              | `'da'`    | [da.js](https://github.com/auth0/lock/blob/master/src/i18n/da.js)       |
| Dutch               | `'nl'`    | [nl.js](https://github.com/auth0/lock/blob/master/src/i18n/nl.js)       |
| English             | `'en'`    | [en.js](https://github.com/auth0/lock/blob/master/src/i18n/en.js)       |
| Estonian            | `'et'`    | [et.js](https://github.com/auth0/lock/blob/master/src/i18n/et.js)       |
| Farsi (Persian)     | `'fa'`    | [fa.js](https://github.com/auth0/lock/blob/master/src/i18n/fa.js)       |
| Finnish             | `'fi'`    | [fi.js](https://github.com/auth0/lock/blob/master/src/i18n/fi.js)       |
| French              | `'fr'`    | [fr.js](https://github.com/auth0/lock/blob/master/src/i18n/fr.js)       |
| German              | `'de'`    | [de.js](https://github.com/auth0/lock/blob/master/src/i18n/de.js)       |
| Greek               | `'el`     | [el.js](https://github.com/auth0/lock/blob/master/src/i18n/el.js)       |
| Hebrew              | `'he'`    | [he.js](https://github.com/auth0/lock/blob/master/src/i18n/he.js)       |
| Hungarian           | `'hu'`    | [hu.js](https://github.com/auth0/lock/blob/master/src/i18n/hu.js)       |
| Italian             | `'it'`    | [it.js](https://github.com/auth0/lock/blob/master/src/i18n/it.js)       |
| Japanese            | `'ja'`    | [ja.js](https://github.com/auth0/lock/blob/master/src/i18n/ja.js)       |
| Korean              | `'ko'`    | [ko.js](https://github.com/auth0/lock/blob/master/src/i18n/ko.js)       |
| Lithuanian          | `'lt'`    | [lt.js](https://github.com/auth0/lock/blob/master/src/i18n/lt.js)       |
| Norwegian           | `'no'`    | [no.js](https://github.com/auth0/lock/blob/master/src/i18n/no.js)       |
| Norwegian (Bokmål)  | `'nb'`    | [nb.js](https://github.com/auth0/lock/blob/master/src/i18n/nb.js)       |
| Norwegian (Nynorsk) | `'nn'`    | [nn.js](https://github.com/auth0/lock/blob/master/src/i18n/nn.js)       |
| Polish              | `'pl'`    | [pl.js](https://github.com/auth0/lock/blob/master/src/i18n/pl.js)       |
| Portuguese (Brazil) | `'pt-br'` | [pt-br.js](https://github.com/auth0/lock/blob/master/src/i18n/pt-br.js) |
| Romanian            | `'ro'`    | [ro.js](https://github.com/auth0/lock/blob/master/src/i18n/ro.js)       |
| Russian             | `'ru'`    | [ru.js](https://github.com/auth0/lock/blob/master/src/i18n/ru.js)       |
| Slovak              | `'sk'`    | [sk.js](https://github.com/auth0/lock/blob/master/src/i18n/sk.js)       |
| Slovenian           | `'sl'`    | [sl.js](https://github.com/auth0/lock/blob/master/src/i18n/sl.js)       |
| Spanish             | `'es'`    | [es.js](https://github.com/auth0/lock/blob/master/src/i18n/es.js)       |
| Swedish             | `'sv'`    | [sv.js](https://github.com/auth0/lock/blob/master/src/i18n/sv.js)       |
| Turkish             | `'tr'`    | [tr.js](https://github.com/auth0/lock/blob/master/src/i18n/tr.js)       |
| Ukrainian           | `'ua'`    | [ua.js](https://github.com/auth0/lock/blob/master/src/i18n/uk.js)       |
| Vietnamese          | `'vi'`    | [vi.js](https://github.com/auth0/lock/blob/master/src/i18n/vi.js)       |

## Set language option

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](https://github.com/auth0/lock/tree/master/src/i18n). Then instantiate Lock.

export const codeExample1 = `// Select a supported language
var options = {
  language: 'es'
};

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

<AuthCodeBlock children={codeExample1} language="javascript" />

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](https://github.com/auth0/lock/tree/master/src/i18n) to add these missing values. Alternatively, you may define the missing values in your Lock `options` (see below).

## Replace dictionary terms

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.

export const codeExample2 = `// 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
);`;

<AuthCodeBlock children={codeExample2} language="javascript" />

For an example of available `languageDictionary` property names and how to structure a `language` file, see the [English dictionary file for Lock](https://github.com/auth0/lock/blob/master/src/i18n/en.js).

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.