> ## 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.

> Découvrez comment ajouter la prise en charge de la localisation à Auth0 Universal Login afin qu’elle corresponde aux paramètres régionaux de votre application.

# Universal Login Internationalization

export const AuthCodeGroup = ({children, dropdown}) => {
  const [processedChildren, setProcessedChildren] = useState(children);
  useEffect(() => {
    let unsubscribe = null;
    function init() {
      unsubscribe = window.autorun(() => {
        const processChildren = node => {
          if (typeof node === "string") {
            let processedNode = node;
            for (const [key, value] of window.rootStore.variableStore.values.entries()) {
              const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
              processedNode = processedNode.replaceAll(new RegExp(escapedKey, "g"), value);
            }
            return processedNode;
          } else if (Array.isArray(node)) {
            return node.map(processChildren);
          } else if (node && node.props && node.props.children) {
            return {
              ...node,
              props: {
                ...node.props,
                children: processChildren(node.props.children)
              }
            };
          }
          return node;
        };
        setProcessedChildren(processChildren(children));
      });
    }
    if (window.rootStore) {
      init();
    } else {
      window.addEventListener("adu:storeReady", init);
    }
    return () => {
      window.removeEventListener("adu:storeReady", init);
      unsubscribe?.();
    };
  }, [children]);
  return <CodeGroup dropdown={dropdown}>{processedChildren}</CodeGroup>;
};

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>;
};

<div id="universal-login-localization">
  ## Localisation d’Universal Login
</div>

L’expérience <Tooltip tip="Universal Login : votre application est redirigée vers Universal Login, hébergé sur l’Authorization Server d’Auth0, afin de vérifier l’identité d’un utilisateur." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=Universal+Login">Universal Login</Tooltip> est offerte dans les langues suivantes. Les entrées marquées d’un astérisque se lisent de droite à gauche.

| Langue                     | Code     |
| -------------------------- | -------- |
| Albanais                   | `sq`     |
| Amharique                  | `am`     |
| Arabe\*                    | `ar`     |
| Arabe (Égypte)\*           | `ar-EG`  |
| Arabe (Arabie saoudite)\*  | `ar-SA`  |
| Arménien                   | `hy`     |
| Azerbaïdjanais             | `az`     |
| Basque                     | `eu-ES`  |
| Bengali                    | `bn`     |
| Bosnien                    | `bs`     |
| Bulgare                    | `bg`     |
| Catalan                    | `ca-ES`  |
| Chinois - Hong Kong        | `zh-HK`  |
| Chinois - simplifié        | `zh-CN`  |
| Chinois - traditionnel     | `zh-TW`  |
| Croate                     | `hr`     |
| Tchèque                    | `cs`     |
| Danois                     | `da`     |
| Néerlandais                | `nl`     |
| Anglais                    | `en`     |
| Anglais - Canada           | `en-CA`  |
| Estonien                   | `et`     |
| Farsi (persan)\*           | `fa`     |
| Finnois                    | `fi`     |
| Français                   | `fr-FR`  |
| Français - Canada          | `fr-CA`  |
| Galicien                   | `gl-ES`  |
| Géorgien                   | `ka`     |
| Allemand                   | `de`     |
| Grec                       | `el`     |
| Gujarati                   | `gu`     |
| Hébreu\*                   | `he`     |
| Hindi                      | `hi`     |
| Hongrois                   | `hu`     |
| Islandais                  | `is`     |
| Indonésien                 | `id`     |
| Italien                    | `it`     |
| Japonais                   | `ja`     |
| Kannada                    | `kn`     |
| Coréen                     | `ko`     |
| Letton                     | `lv`     |
| Lituanien                  | `lt`     |
| Macédonien                 | `mk`     |
| Malais                     | `ms`     |
| Malayalam                  | `ml`     |
| Marathi                    | `mr`     |
| Mongol                     | `mn`     |
| Monténégrin                | `cnr`    |
| Myanmar                    | `my`     |
| Norvégien                  | `no`     |
| Norvégien - Bokmål         | `nb`     |
| Norvégien - Nynorsk        | `nn`     |
| Polonais                   | `pl`     |
| Portugais - Brésil         | `pt-BR`  |
| Portugais - Portugal       | `pt-PT`  |
| Pendjabi                   | `pa`     |
| Roumain                    | `ro`     |
| Russe                      | `ru`     |
| Serbe                      | `sr`     |
| Slovaque                   | `sk`     |
| Slovène                    | `sl`     |
| Somali                     | `so`     |
| Espagnol                   | `es`     |
| Espagnol - Argentine       | `es-AR`  |
| Espagnol - Amérique latine | `es-419` |
| Espagnol - Mexique         | `es-MX`  |
| Swahili                    | `sw`     |
| Suédois                    | `sv`     |
| Tagalog                    | `tl`     |
| Tamazight                  | `zgh`    |
| Tamoul                     | `ta`     |
| Télougou                   | `te`     |
| Thaï                       | `th`     |
| Turc                       | `tr`     |
| Ukrainien                  | `uk`     |
| Ourdou\*                   | `ur`     |
| Vietnamien                 | `vi`     |
| Gallois                    | `cy`     |

<div id="language-selection">
  ### Sélection de la langue
</div>

Auth0 sélectionne la langue d’affichage des pages en fonction des éléments suivants :

* les langues prises en charge par Auth0, énumérées ci-dessus
* la liste des langues configurées dans la section [**Tenant Settings**](https://manage.auth0.com/#/tenant) de l’Auth0 Dashboard, où vous pouvez sélectionner les langues prises en charge par votre tenant et en choisir une par défaut. Par défaut, seule l’anglais est sélectionné, mais vous pouvez choisir celles dont vous avez besoin.
* la valeur du paramètre `ui_locales` envoyée au [point de terminaison de la demande d’autorisation](https://openid.net/specs/openid-connect-core-1_0.html#AuthRequest), qui peut servir à restreindre la liste des langues pour une application ou une session. Vous pouvez fournir une liste de locales séparées par des espaces. La première locale de la liste doit correspondre à une locale activée dans votre tenant pour qu’elle soit prise en compte dans l’UI.
* l’en-tête HTTP `Accept-Language` envoyé par le navigateur. Auth0 affiche les pages dans cette langue si elle est autorisée par les paramètres ci-dessus. Sinon, les pages s’affichent dans la langue par défaut.

Utilisez la <Tooltip tip="Management API : Un produit qui permet aux clients d’effectuer des tâches administratives." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=Management+API">Management API</Tooltip> d’Auth0 pour effectuer une requête `PATCH` au [point de terminaison Tenants](https://auth0.com/docs/api/management/v2/tenants/patch-settings) avec le corps suivant, en remplaçant `he` par le code de langue que vous voulez ajouter :

```json lines theme={null}
{
  "enabled_locales": [
    "en","he"
  ]
}
```

Après l’avoir ajoutée, indiquez la langue dans le paramètre de requête `ui_locales` de la requête de connexion.

Vous pouvez aussi définir les langues activées pour le tenant au moyen de la Management API, à l’aide du [point de terminaison Update Tenants](https://auth0.com/docs/api/management/v2#!/Tenants/patch_settings). La langue par défaut est la première de la liste.

<AuthCodeGroup>
  ```bash cURL theme={null}
  curl --request PATCH \
    --url 'https://{yourDomain}/api/v2/tenants/settings' \
    --header 'authorization: Bearer API2_ACCESS_TOKEN' \
    --header 'content-type: application/json' \
    --data '{ "enabled_locales" : [ "en", "es"]}'
  ```

  ```csharp C# theme={null}
  var client = new RestClient("https://{yourDomain}/api/v2/tenants/settings");
  var request = new RestRequest(Method.PATCH);
  request.AddHeader("content-type", "application/json");
  request.AddHeader("authorization", "Bearer API2_ACCESS_TOKEN");
  request.AddParameter("application/json", "{ "enabled_locales" : [ "en", "es"]}", ParameterType.RequestBody);
  IRestResponse response = client.Execute(request);
  ```

  ```go Go theme={null}
  package main

  import (
  	"fmt"
  	"strings"
  	"net/http"
  	"io/ioutil"
  )

  func main() {

  	url := "https://{yourDomain}/api/v2/tenants/settings"

  	payload := strings.NewReader("{ "enabled_locales" : [ "en", "es"]}")

  	req, _ := http.NewRequest("PATCH", url, payload)

  	req.Header.Add("content-type", "application/json")
  	req.Header.Add("authorization", "Bearer API2_ACCESS_TOKEN")

  	res, _ := http.DefaultClient.Do(req)

  	defer res.Body.Close()
  	body, _ := ioutil.ReadAll(res.Body)

  	fmt.Println(res)
  	fmt.Println(string(body))

  }
  ```

  ```java Java theme={null}
  HttpResponse<String> response = Unirest.patch("https://{yourDomain}/api/v2/tenants/settings")
    .header("content-type", "application/json")
    .header("authorization", "Bearer API2_ACCESS_TOKEN")
    .body("{ "enabled_locales" : [ "en", "es"]}")
    .asString();
  ```

  ```javascript Node.JS theme={null}
  var axios = require("axios").default;

  var options = {
    method: 'PATCH',
    url: 'https://{yourDomain}/api/v2/tenants/settings',
    headers: {'content-type': 'application/json', authorization: 'Bearer API2_ACCESS_TOKEN'},
    data: {enabled_locales: ['en', 'es']}
  };

  axios.request(options).then(function (response) {
    console.log(response.data);
  }).catch(function (error) {
    console.error(error);
  });
  ```

  ```php PHP theme={null}
  $curl = curl_init();

  curl_setopt_array($curl, [
    CURLOPT_URL => "https://{yourDomain}/api/v2/tenants/settings",
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_ENCODING => "",
    CURLOPT_MAXREDIRS => 10,
    CURLOPT_TIMEOUT => 30,
    CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
    CURLOPT_CUSTOMREQUEST => "PATCH",
    CURLOPT_POSTFIELDS => "{ "enabled_locales" : [ "en", "es"]}",
    CURLOPT_HTTPHEADER => [
      "authorization: Bearer API2_ACCESS_TOKEN",
      "content-type: application/json"
    ],
  ]);

  $response = curl_exec($curl);
  $err = curl_error($curl);

  curl_close($curl);

  if ($err) {
    echo "cURL Error #:" . $err;
  } else {
    echo $response;
  }
  ```

  ```python Python theme={null}
  import http.client

  conn = http.client.HTTPSConnection("")

  payload = "{ "enabled_locales" : [ "en", "es"]}"

  headers = {
      'content-type': "application/json",
      'authorization': "Bearer API2_ACCESS_TOKEN"
      }

  conn.request("PATCH", "/{yourDomain}/api/v2/tenants/settings", payload, headers)

  res = conn.getresponse()
  data = res.read()

  print(data.decode("utf-8"))
  ```

  ```ruby Ruby theme={null}
  require 'uri'
  require 'net/http'
  require 'openssl'

  url = URI("https://{yourDomain}/api/v2/tenants/settings")

  http = Net::HTTP.new(url.host, url.port)
  http.use_ssl = true
  http.verify_mode = OpenSSL::SSL::VERIFY_PEER

  request = Net::HTTP::Patch.new(url)
  request["content-type"] = 'application/json'
  request["authorization"] = 'Bearer API2_ACCESS_TOKEN'
  request.body = "{ "enabled_locales" : [ "en", "es"]}"

  response = http.request(request)
  puts response.read_body
  ```
</AuthCodeGroup>

<div id="right-to-left-languages">
  ### Langues de droite à gauche
</div>

<Warning>
  La prise en charge des langues de droite à gauche est offerte en accès anticipé. Pour demander cette fonctionnalité, [communiquez avec Auth0 Support](https://support.auth0.com/). En utilisant cette fonctionnalité, vous acceptez les conditions d’essai gratuit applicables du plan Free dans le [Contrat-cadre d’abonnement](https://www.okta.com/legal/) d’Okta. Pour en savoir plus sur le cycle de lancement des produits d’Auth0, consultez [les étapes de lancement des produits](/docs/fr-ca/troubleshoot/product-lifecycle/product-release-stages).
</Warning>

La prise en charge des langues de droite à gauche (RtL) permet à votre tenant d’afficher du texte en arabe (standard, égyptien et saoudien), en persan, en hébreu et en ourdou. Les tenants qui utilisent du texte RtL doivent être [conformes aux WCAG 2.2 AA](/docs/fr-ca/authenticate/login/auth0-universal-login#accessibility). Si votre tenant utilise des modèles de page, vous devez aussi mettre à jour la balise HTML pour y inclure l’élément `dir`.

```liquid lines theme={null}
{% assign resolved_dir = dir | default: "auto" %}
<html lang="{{locale}}" dir="{{resolved_dir}}">
```

<div id="limitations">
  ### Limitations
</div>

* Le paramètre `ui_locales` peut uniquement être utilisé dans les flux <Tooltip tip="OAuth 2.0 : Cadre d’autorisation qui définit les protocoles et les workflows d’autorisation." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=OAuth">OAuth</Tooltip>, puisqu’il n’est pas disponible avec Security Assertion Markup Language <Tooltip tip="OAuth 2.0 : Cadre d’autorisation qui définit les protocoles et les workflows d’autorisation." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=SAML">(SAML)</Tooltip> ou WS-Federation.
* Le paramètre `ui_locales` n’est pas transmis aux fournisseurs d’identité en amont <Tooltip tip="Identity Provider (IdP) : Service qui stocke et gère les identités numériques." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=IdPs">IdPs</Tooltip>. Pour en savoir plus sur la transmission de paramètres aux IdPs, consultez [Pass Parameters to Identity Providers](/docs/fr-ca/authenticate/identity-providers/pass-parameters-to-idps).
* Il n’est pas possible de localiser les scopes sur la page de consentement.

<div id="known-issues">
  ### Problèmes connus
</div>

* Universal Login Page affiche l’attribut HTML `lang` du code de langue `fr-FR` sous la forme `fr`.
* Universal Login Page affiche l’attribut HTML `lang` du code de langue `pt-PT` sous la forme `pt`.

<div id="classic-login-localization">
  ## Localisation de Classic Login
</div>

Dans l’expérience Classic Login, la localisation s’appuie sur les widgets Auth0 en JavaScript pour la [connexion](/docs/fr-ca/customize/internationalization-and-localization/lock-internationalization), la [page de réinitialisation du mot de passe](/docs/fr-ca/customize/login-pages/classic-login/customize-password-reset-page) et les [politiques de mot de passe](/docs/fr-ca/customize/internationalization-and-localization/password-options-translation).

Par défaut, la [page d’authentification multifacteur (MFA)](/docs/fr-ca/secure/multi-factor-authentication/customize-mfa/customize-mfa-classic-login) utilise le widget <Tooltip tip="Authentification multifacteur (MFA) : processus d’authentification de l’utilisateur qui utilise un facteur en plus du nom d’utilisateur et du mot de passe, comme un code envoyé par SMS." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=MFA">MFA</Tooltip> d’Auth0, qui ne peut pas être localisé. Vous pouvez créer des versions localisées à l’aide de [guardian.js](https://github.com/auth0/auth0-guardian.js).

Il n’est pas possible de localiser la page de [consentement](/docs/fr-ca/customize/login-pages/customize-consent-prompts).

<div id="learn-more">
  ## En savoir plus
</div>

* [Personnaliser les Universal Login Page Templates](/docs/fr-ca/customize/login-pages/universal-login/customize-templates)
* [Personnaliser les pages Classic Login avec Lock ou le SDK](/docs/fr-ca/customize/login-pages/classic-login/customize-with-lock-sdk)