> ## 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, permet d’ajouter d’autres fichiers de langue personnalisés et de personnaliser les valeurs 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) + "*****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>;
};

Vous pouvez changer la langue de Lock à l’aide de l’option de configuration `language`. Le fichier de langue correspondant sera alors chargé depuis 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)       |
| Persan (farsi)      | `'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 devez d’abord inclure Lock dans votre page :

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

Ensuite, définissez votre objet `options` et ajoutez l’option `language`. L’option `language` doit être une chaîne correspondant au nom du fichier correspondant 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'
};

// Initialisez 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 correspondant à différentes traductions. Pour certaines langues, il se peut que certaines valeurs soient manquantes; 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. Vous pouvez aussi définir les valeurs manquantes dans les `options` de Lock (voir ci-dessous).

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

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

export const codeExample2 = `// Personnalisez certains attributs du languageDictionary
var options = {
  languageDictionary: {
    emailInputPlaceholder: "something@youremail.com",
    title: "Connectez-vous"
  },
};

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

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

Pour obtenir un exemple des noms de propriété `languageDictionary` disponibles et de la façon de structurer 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 accepte une valeur de type chaîne (une URL), remplace l’URL source des traductions fournies par Auth0. Par défaut, elle utilise l’URL du CDN d’Auth0 `https://cdn.auth0.com`, car c’est là que sont stockées les traductions fournies. En indiquant une autre valeur, vous pouvez utiliser votre propre source pour les traductions selon les besoins de vos applications. Votre source de langue doit être un fichier JavaScript.