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

> Lock v11 prend en charge plusieurs langues et permet d’ajouter d’autres fichiers de langue personnalisés, ainsi que de personnaliser la valeur de certains textes affichés dans le widget Lock.

# Internationalisation de Lock

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) + "*****MASQUÉ*****";
          }
          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>;
};

Vous pouvez changer la langue de Lock à l’aide de l’option de configuration `language`. Cela ira chercher le fichier de langue correspondant dans le répertoire `i18n` de Lock.

<div id="provided-languages">
  ## Langues disponibles
</div>

Consultez le [répertoire i18n](https://github.com/auth0/lock/blob/master/src/i18n/) pour voir les fichiers de langue.

| Langue              | 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)       |
| Chinois             | `'zh'`    | [zh.js](https://github.com/auth0/lock/blob/master/src/i18n/zh.js)       |
| Chinois (Taïwan)    | `'zh-tw'` | [zh-tw.js](https://github.com/auth0/lock/blob/master/src/i18n/zh-tw.js) |
| Croate              | `'hr'`    | [hr.js](https://github.com/auth0/lock/blob/master/src/i18n/hr.js)       |
| Tchèque             | `'cs'`    | [cs.js](https://github.com/auth0/lock/blob/master/src/i18n/cs.js)       |
| Danois              | `'da'`    | [da.js](https://github.com/auth0/lock/blob/master/src/i18n/da.js)       |
| Néerlandais         | `'nl'`    | [nl.js](https://github.com/auth0/lock/blob/master/src/i18n/nl.js)       |
| Anglais             | `'en'`    | [en.js](https://github.com/auth0/lock/blob/master/src/i18n/en.js)       |
| Estonien            | `'et'`    | [et.js](https://github.com/auth0/lock/blob/master/src/i18n/et.js)       |
| Farsi (persan)      | `'fa'`    | [fa.js](https://github.com/auth0/lock/blob/master/src/i18n/fa.js)       |
| Finnois             | `'fi'`    | [fi.js](https://github.com/auth0/lock/blob/master/src/i18n/fi.js)       |
| Français            | `'fr'`    | [fr.js](https://github.com/auth0/lock/blob/master/src/i18n/fr.js)       |
| Allemand            | `'de'`    | [de.js](https://github.com/auth0/lock/blob/master/src/i18n/de.js)       |
| Grec                | `'el`     | [el.js](https://github.com/auth0/lock/blob/master/src/i18n/el.js)       |
| Hébreu              | `'he'`    | [he.js](https://github.com/auth0/lock/blob/master/src/i18n/he.js)       |
| Hongrois            | `'hu'`    | [hu.js](https://github.com/auth0/lock/blob/master/src/i18n/hu.js)       |
| Italien             | `'it'`    | [it.js](https://github.com/auth0/lock/blob/master/src/i18n/it.js)       |
| Japonais            | `'ja'`    | [ja.js](https://github.com/auth0/lock/blob/master/src/i18n/ja.js)       |
| Coréen              | `'ko'`    | [ko.js](https://github.com/auth0/lock/blob/master/src/i18n/ko.js)       |
| Lituanien           | `'lt'`    | [lt.js](https://github.com/auth0/lock/blob/master/src/i18n/lt.js)       |
| Norvégien           | `'no'`    | [no.js](https://github.com/auth0/lock/blob/master/src/i18n/no.js)       |
| Norvégien (bokmål)  | `'nb'`    | [nb.js](https://github.com/auth0/lock/blob/master/src/i18n/nb.js)       |
| Norvégien (nynorsk) | `'nn'`    | [nn.js](https://github.com/auth0/lock/blob/master/src/i18n/nn.js)       |
| Polonais            | `'pl'`    | [pl.js](https://github.com/auth0/lock/blob/master/src/i18n/pl.js)       |
| Portugais (Brésil)  | `'pt-br'` | [pt-br.js](https://github.com/auth0/lock/blob/master/src/i18n/pt-br.js) |
| Roumain             | `'ro'`    | [ro.js](https://github.com/auth0/lock/blob/master/src/i18n/ro.js)       |
| Russe               | `'ru'`    | [ru.js](https://github.com/auth0/lock/blob/master/src/i18n/ru.js)       |
| Slovaque            | `'sk'`    | [sk.js](https://github.com/auth0/lock/blob/master/src/i18n/sk.js)       |
| Slovène             | `'sl'`    | [sl.js](https://github.com/auth0/lock/blob/master/src/i18n/sl.js)       |
| Espagnol            | `'es'`    | [es.js](https://github.com/auth0/lock/blob/master/src/i18n/es.js)       |
| Suédois             | `'sv'`    | [sv.js](https://github.com/auth0/lock/blob/master/src/i18n/sv.js)       |
| Turc                | `'tr'`    | [tr.js](https://github.com/auth0/lock/blob/master/src/i18n/tr.js)       |
| Ukrainien           | `'ua'`    | [ua.js](https://github.com/auth0/lock/blob/master/src/i18n/uk.js)       |
| Vietnamien          | `'vi'`    | [vi.js](https://github.com/auth0/lock/blob/master/src/i18n/vi.js)       |

<div id="set-language-option">
  ## Définir l’option de langue
</div>

Pour utiliser les exemples suivants, vous devrez d’abord ajouter Lock à votre page :

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

Définissez ensuite votre objet `options` et ajoutez l’option `language`. L’option `language` doit être une chaîne de caractères qui correspond au nom du fichier dans le répertoire `i18n` [de Lock](https://github.com/auth0/lock/tree/master/src/i18n). Instanciez ensuite Lock.

export const codeExample1 = `// Sélectionnez une langue prise en charge
var options = {
  language: 'es'
};

// Initialisation d’Auth0Lock
var lock = new Auth0Lock(
  '{yourClientId}',
  '{yourDomain}',
  options
);`;

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

Les données de traduction de Lock proviennent de fichiers de langue contenant des paires clé-valeur qui correspondent à différentes traductions. Pour certaines langues, il peut manquer certaines valeurs; dans ce cas, l’avertissement suivant s’affichera : `language does not have property <missing prop>`. Nous vous encourageons à soumettre une [pull request](https://github.com/auth0/lock/tree/master/src/i18n) pour ajouter ces valeurs manquantes. Sinon, vous pouvez définir les valeurs manquantes dans les `options` de votre Lock (voir ci-dessous).

<div id="replace-dictionary-terms">
  ## Remplacer des termes du dictionnaire
</div>

Vous pouvez aussi personnaliser certains éléments précis de votre dictionnaire à l’aide de l’option `languageDictionary`. C’est utile si vous utilisez l’une des langues prises en charge, mais que vous souhaitez modifier le libellé de quelques éléments. Par exemple, vous pourriez reformuler le `title` ou changer la façon dont d’autres libellés s’affichent pour l’utilisateur, tout en laissant intact le reste du texte du widget.

export const codeExample2 = `// Personnalisez certains attributs de languageDictionary
var options = {
  languageDictionary: {
    emailInputPlaceholder: "something@youremail.com",
    title: "Me connecter"
  },
};

// Initialisation de notre Auth0Lock
var lock = new Auth0Lock(
  '{yourClientId}',
  '{yourDomain}',
  options
);`;

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

Pour voir un exemple des noms de propriétés `languageDictionary` offerts et de la structure d’un fichier `language`, consultez le [fichier de dictionnaire anglais pour Lock](https://github.com/auth0/lock/blob/master/src/i18n/en.js).

L’option `languageBaseUrl`, qui prend une valeur de type string (une URL), remplace l’URL source de langue des traductions fournies par Auth0. Par défaut, elle utilise l’URL du CDN d’Auth0 `https://cdn.auth0.com`, puisque c’est là que sont stockées les traductions fournies. En indiquant une autre valeur, vous pouvez utiliser votre propre source pour les traductions de langue, selon les besoins de vos applications. Votre source de langue doit être un fichier JavaScript.