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

> Comment installer, initialiser et utiliser Auth0.js

# Auth0.js

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

La bibliothèque Auth0.js est une bibliothèque JavaScript côté client pour Auth0. Elle prend en charge la [connexion hébergée et la connexion intégrée](/fr-CA/docs/authenticate/login/universal-vs-embedded-login). Cet article porte sur la version **v10**, la version actuelle.

Consultez la [documentation complète de l’API de la bibliothèque](https://auth0.github.io/auth0.js/index.html).

<div id="migrate-from-v9-to-v10">
  ## Migrer de v9 à v10
</div>

Auth0.js v10 contient un correctif de sécurité pour CVE-2026-42280 et une modification non rétrocompatible :

| Applications touchées        | Détails                                                                                                                                                                                                                                                                     |
| ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Applications utilisant RS256 | Aucune modification non rétrocompatible                                                                                                                                                                                                                                     |
| Applications utilisant HS256 | `parseHash()` renvoie maintenant une erreur `invalid_token` au lieu de réussir en silence. Passez à RS256 dans l’Auth0 Dashboard : **Applications** > votre application > **Settings** > **Advanced Settings** > **OAuth** > **JsonWebToken Signature Algorithm** > `RS256` |

Si vous avez besoin de la référence de l’API v9, consultez le [package auth0-js sur npm](https://www.npmjs.com/package/auth0-js?activeTab=versions) et sélectionnez votre version v9, ou parcourez le [code source v9 et le journal des modifications sur GitHub](https://github.com/auth0/auth0.js).

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  La connexion intégrée pour les applications web utilise l’[authentification inter-origines](/fr-CA/docs/authenticate/login/cross-origin-authentication), sauf si vous [configurez un domaine personnalisé](/fr-CA/docs/customize/custom-domains) pour votre locataire. L’authentification inter-origines utilise des témoins tiers pour permettre des transactions d’authentification sécurisées entre différentes origines.
</Callout>

<div id="ready-to-go-example">
  ## Exemple prêt à l’emploi
</div>

Le [répertoire d’exemples](https://github.com/auth0/auth0.js/tree/master/example) de la bibliothèque Auth0.js est une application prête à l’emploi qui vous permet d’essayer Auth0.js rapidement et facilement. Pour l’exécuter :

1. Si [node](http://nodejs.org/) n’est pas installé, installez-le maintenant.
2. Installez les dépendances en exécutant `npm install` à partir de la racine de ce projet.
3. Enfin, exécutez `npm start` à partir de la racine de ce projet, puis accédez à votre application qui s’exécute sur le serveur node, probablement à l’adresse `http://localhost:3000/example`.

<div id="setup-and-initialization">
  ## Configuration et initialisation
</div>

Les sections suivantes couvrent [les méthodes d’installation](#installation-options), [comment initialiser Auth0.js](#initialization), [l’inscription](#signup), [la connexion](#login), [la déconnexion](#logout) et plus encore.

<div id="configure-your-auth0-application-for-embedded-login">
  ### Configurez votre application Auth0 pour la connexion intégrée
</div>

Lors de la mise en œuvre de la connexion intégrée, la bibliothèque utilise des appels inter-origines dans des iframes masquées pour effectuer l’authentification. Pour que cela puisse être fait en toute sécurité, Auth0 doit connaître les domaines sur lesquels vous hébergez vos applications.

Ajoutez le domaine au champ **Origines Web autorisées**. Vous trouverez ce champ dans la section [Paramètres de l’application](https://manage.auth0.com/#/applications) de votre Auth0 Dashboard.

<div id="installation-options">
  ### Options d’installation
</div>

Plusieurs options s’offrent à vous pour utiliser Auth0.js dans votre projet. Choisissez celle qui correspond le mieux à vos besoins parmi les options ci-dessous :

Installez-le avec [npm](https://npmjs.org) ou [yarn](https://yarnpkg.com) :

```bash lines theme={null}
npm install auth0-js

yarn add auth0-js
```

Après avoir installé le module `auth0-js`, incluez-le dans votre bundle avec toutes ses dépendances ou importez-le au moyen de :

```js lines theme={null}
import auth0 from 'auth0-js';
```

Vous pouvez aussi inclure le script depuis le CDN :

```html wrap lines theme={null}
<script src="https://cdn.auth0.com/js/auth0/10.0.0/auth0.min.js"></script>
```

<div id="initialization">
  ### Initialisation
</div>

Initialisez une nouvelle instance de l’application Auth0 comme suit :

export const codeExample1 = `<script type="text/javascript">
  var webAuth = new auth0.WebAuth({
    domain:       '{yourDomain}',
    clientID:     '{yourClientId}'
  });
</script>`;

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

<div id="available-parameters">
  #### Paramètres disponibles
</div>

Deux paramètres obligatoires doivent être fournis dans l’objet `options` lors de l’instanciation de `webAuth`; les autres sont facultatifs.

| **Paramètre**                 | **Obligatoire** | **Description**                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| ----------------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `domain`                      | obligatoire     | (String) Le domaine de votre compte Auth0 (p. ex. myaccount.auth0.com)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `clientID`                    | obligatoire     | (String) Votre ID client Auth0                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| `redirectUri`                 | facultatif\*    | (String) La valeur `redirectUri` par défaut. La valeur par défaut est une chaîne vide (aucune). **Si vous ne fournissez pas ici de valeur `redirectUri` globale, vous devrez fournir une valeur `redirectUri` pour *chaque* méthode utilisée.**                                                                                                                                                                                                                                                                                                                           |
| `scope`                       | facultatif      | (String) Le <Tooltip tip="Scope : mécanisme qui détermine les actions que les applications peuvent effectuer au nom d’un utilisateur à l’aide d’informations créées précédemment dans une ressource en ligne." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=scope%28s%29">scope(s)</Tooltip> par défaut utilisé par l’application. L’utilisation de scopes peut vous permettre de renvoyer des claims précises pour certains champs de votre requête. Consultez notre [documentation sur les scopes](/fr-CA/docs/get-started/apis/scopes) pour en savoir plus. |
| `audience`                    | facultatif      | (String) L’audience par défaut à utiliser pour demander l’accès à l’API.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| `responseType`                | facultatif\*    | (String) La valeur `responseType` par défaut. Il peut s’agir de n’importe quelle liste de valeurs séparées par des espaces parmi `code`, `token`, `id_token`. La valeur par défaut est `'token'`, sauf si un `redirectUri` est fourni; dans ce cas, la valeur par défaut est `'code'`. **Si vous ne fournissez pas de valeur `responseType` globale, vous devrez fournir une valeur `responseType` pour *chaque* méthode utilisée.**                                                                                                                                      |
| `responseMode`                | facultatif      | (String) Cette option n’est pas définie par défaut. Elle peut être définie à `'form_post'` pour envoyer le jeton ou le code à `'redirectUri'` par POST. Les valeurs prises en charge sont `query`, `fragment` et `form_post`.                                                                                                                                                                                                                                                                                                                                             |
| `leeway`                      | facultatif      | (Integer) Une valeur en secondes; marge tolérée pour compenser le décalage d’horloge concernant les heures d’expiration de l’ID Token.                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `_disableDeprecationWarnings` | facultatif      | (Boolean) Désactive les avertissements de dépréciation; la valeur par défaut est `false`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |

En raison du décalage d’horloge, il se peut que vous rencontriez parfois l’erreur `The token was issued in the future`. Le paramètre `leeway` permet d’ajouter quelques secondes de tolérance aux heures d’expiration de l’ID Token afin d’éviter cette situation.

<div id="scope">
  ##### Scope
</div>

La valeur `scope` par défaut dans Auth0.js v10 est `openid profile email`.

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  **Exécuter Auth0.js localement**

  Si vous ne précisez pas au minimum le scope ci-dessus lors de l’initialisation d’Auth0.js et que votre site Web est exécuté depuis `http://localhost` ou `http://127.0.0.1`, l’appel à la méthode `getSSOData()` entraînera l’erreur suivante dans la console du navigateur :

  `Consent required. When using getSSOData, the user has to be authenticated with the following scope: openid profile email`

  Cela ne se produira pas si vous exécutez votre application en production ou si vous précisez le scope `openid profile email`. Pour en savoir plus, consultez le document [Consentement de l’utilisateur et applications tierces](/fr-CA/docs/get-started/applications/third-party-applications/user-consent-and-third-party-applications).
</Callout>

<div id="login">
  ## Connexion
</div>

Vous pouvez choisir une méthode de connexion en fonction du type d’authentification requis par votre application.

<div id="webauthauthorize">
  ### webAuth.authorize()
</div>

La méthode `authorize()` peut être utilisée pour authentifier des utilisateurs au moyen de <Tooltip tip="Universal Login : votre application redirige vers Universal Login, hébergé sur le serveur d’autorisation d’Auth0, afin de vérifier l’identité d’un utilisateur." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=Universal+Login">Universal Login</Tooltip> ou de connexions sociales, comme l’illustrent les exemples ci-dessous. Cette méthode appelle le point de terminaison `/authorize` de l’Authentication API et peut accepter divers paramètres au moyen de l’objet `options`.

| **Paramètre**  | **Obligatoire** | **Description**                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| -------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `audience`     | facultatif      | (String) L’audience par défaut à utiliser pour demander l’accès à l’API.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| `connection`   | facultatif      | (String) Spécifie la connexion à utiliser, au lieu de présenter toutes les connexions disponibles pour l’application.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| `scope`        | facultatif      | (String) Les scopes pour lesquels vous souhaitez demander une autorisation. Ils doivent être séparés par un espace. Vous pouvez demander n’importe lequel des scopes OIDC standard concernant les utilisateurs, comme `profile` et `email`, des claims personnalisées qui doivent [respecter un format avec espace de noms](/fr-CA/docs/secure/tokens/json-web-tokens/create-custom-claims), ou tout scope pris en charge par l’API cible (par exemple, `read:contacts`). Incluez `offline_access` pour obtenir un <Tooltip tip="Refresh Token : jeton utilisé pour obtenir un nouveau Jeton d’accès sans obliger les utilisateurs à se reconnecter." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=Refresh+Token">Jeton d’actualisation</Tooltip>. |
| `responseType` | facultatif      | (String) Il peut s’agir de toute liste de valeurs `code`, `token`, `id_token`, séparées par des espaces. La valeur par défaut est `'token'`, sauf si un `redirectUri` est fourni, auquel cas la valeur par défaut est `'code'`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `clientID`     | facultatif      | (String) Votre ID client Auth0.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `redirectUri`  | facultatif      | (String) L’URL vers laquelle Auth0 redirigera le navigateur une fois l’autorisation accordée à l’utilisateur.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| `state`        | facultatif      | (String) Une valeur arbitraire qui doit être conservée d’une redirection à l’autre. Elle est utile pour atténuer les attaques CSRF et pour toute information contextuelle (par exemple, une URL de retour) dont vous pourriez avoir besoin une fois le processus d’authentification terminé. Pour en savoir plus, consultez [paramètre state](/fr-CA/docs/secure/attack-protection/state-parameters). Auth0.js, lorsqu’il est utilisé dans des applications monopages, gère automatiquement la génération et la validation de `state` si elle n’est pas spécifiée.                                                                                                                                                                                            |
| `prompt`       | facultatif      | (String) Une valeur de `login` forcera l’affichage de la page de connexion, peu importe la session en cours. Une valeur de `none` tentera d’ignorer les invites de connexion si une session existe déjà (consultez la documentation sur l’[authentification silencieuse](/fr-CA/docs/authenticate/single-sign-on#silent-authentication) pour plus de détails).                                                                                                                                                                                                                                                                                                                                                                                                |

Pour une connexion hébergée, il faut appeler la méthode `/authorize()`.

`webAuth.authorize({//Toutes les options supplémentaires peuvent être ajoutées ici});`

Pour les connexions sociales, le paramètre `connection` devra être précisé :

`webAuth.authorize({connection: 'twitter'});`

<div id="webauthpopupauthorize">
  ### webAuth.popup.authorize()
</div>

Pour l’authentification dans une fenêtre contextuelle, vous pouvez utiliser la méthode `popup.authorize`. L’authentification dans une fenêtre contextuelle ne peut pas être utilisée dans les pages de connexion hébergées. En général, l’authentification dans une fenêtre contextuelle est utilisée par les applications monopage afin de ne pas perdre l’état en cours lors d’une redirection de la page entière.

Autorisation par défaut avec fenêtre contextuelle (Universal Login) :

```js lines theme={null}
webAuth.popup.authorize({
  responseType: 'token'
  redirectUri: 'https://YOUR_APP/popup_response_handler.html'
  //D'autres options peuvent être ajoutées ici
}, function(err, authResult) {
  //faire quelque chose
});
```

Et pour une connexion sociale dans une fenêtre contextuelle à l’aide de `authorize` :

```js lines theme={null}
webAuth.popup.authorize({
  responseType: 'token'
  redirectUri: 'https://{yourApp}/popup_response_handler.html',
  connection: 'twitter'
}, function(err, authResult) {
  //faire quelque chose
});
```

<div id="handle-popup-authentication-results">
  #### Gérer les résultats de l’authentification par fenêtre contextuelle
</div>

Lorsque vous utilisez l’authentification par fenêtre contextuelle, vous devez fournir un `redirectUri` où la page de destination transmet les résultats de l’autorisation au callback à l’aide de la méthode `webAuth.popup.callback`. Une implémentation simple pourrait ressembler à ceci :

```html lines theme={null}
<!-- popup_response_handler.html -->
<html>
  <body>
    <script src="https://cdn.auth0.com/js/auth0/10.0.0/auth0.min.js"></script>
    <script type="text/javascript">
      var webAuth = new auth0.WebAuth({
        domain:       'YOUR_DOMAIN',
        clientID:     'YOUR_CLIENT_ID'
      });
      webAuth.popup.callback();
    </script>
  </body>
</html>
```

Un gestionnaire idéal ne devrait inclure que cette fonctionnalité minimale (c’est-à-dire éviter de recharger toute l’application uniquement pour traiter la réponse).

Vous devrez ajouter le `redirectUri` à la liste **Allowed Callback URLs** de l’application, sur la page de configuration de l’application dans l’Auth0 Dashboard.

<div id="webauthlogin">
  ### webAuth.login()
</div>

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  La connexion intégrée pour les applications Web utilise l’[authentification inter-origines](/fr-CA/docs/authenticate/login/cross-origin-authentication), sauf si vous [configurez un domaine personnalisé](/fr-CA/docs/customize/custom-domains) pour votre locataire. L’authentification inter-origines utilise des témoins tiers pour permettre des transactions d’authentification sécurisées entre différentes origines.
</Callout>

La méthode `login` peut être utilisée pour la connexion intégrée au moyen de l’[authentification inter-origines](/fr-CA/docs/authenticate/login/cross-origin-authentication) pour les connexions de base de données, à l’aide de `/co/authenticate`.

| **Paramètre** | **Obligatoire** | **Description**                                                                                                                  |
| ------------- | --------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| `username`    | facultatif      | (String) Le nom d’utilisateur à fournir pour l’authentification. **L’un ou l’autre** de `username` ou `email` doit être présent. |
| `email`       | facultatif      | (String) Le courriel à fournir pour l’authentification. **L’un ou l’autre** de `username` ou `email` doit être présent.          |
| `password`    | obligatoire     | (String) Le mot de passe à fournir pour l’authentification.                                                                      |
| `realm`       | obligatoire     | (String) Le nom de la connexion de base de données à utiliser pour l’authentification.                                           |

```js lines theme={null}
webAuth.login({
  realm: 'tests',
  username: 'testuser',
  password: 'testpass',
});
```

<div id="webauthcrossoriginverification">
  ### webAuth.crossOriginVerification()
</div>

La méthode `crossOriginVerification()` peut être utilisée pour offrir une authentification inter-origines aux clients qui ont désactivé les témoins tiers dans leur navigateur. Pour en savoir plus sur son utilisation, consultez [Authentification inter-origines](/fr-CA/docs/authenticate/login/cross-origin-authentication).

<div id="buildauthorizeurloptions">
  ### buildAuthorizeUrl(options)
</div>

La méthode `buildAuthorizeUrl` permet de construire l’URL `/authorize` afin d’initialiser une nouvelle transaction. Utilisez cette méthode si vous souhaitez implémenter une authentification dans le navigateur (passive).

export const codeExample2 = `// Calculer l’URL de redirection
var url = webAuth.client.buildAuthorizeUrl({
  clientID: '{yourClientId}', // chaîne
  responseType: 'token id_token', // code
  redirectUri: 'https://{yourApp}/callback',
  state: '{yourState}',
  nonce: '{yourNonce}'
});

// Rediriger vers l’URL
// ...`;

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

Le paramètre `state` est une valeur opaque qu’Auth0 vous renverra. Cette méthode aide à prévenir les attaques CSRF et doit être spécifiée si vous redirigez vous-même vers l’URL au lieu d’appeler `webAuth.authorize()`. Pour en savoir plus, consultez [le paramètre state](/fr-CA/docs/secure/attack-protection/state-parameters).

<div id="single-sign-on-with-embedded-authentication">
  ### Authentification unique avec authentification intégrée
</div>

La connexion intégrée prend en charge l’<Tooltip tip="Authentification unique (SSO) : service qui, après qu’un utilisateur s’est connecté à une application, le connecte automatiquement à d’autres applications." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=Single+Sign-on">authentification unique</Tooltip> (SSO) lorsque vos applications partagent l’architecture suivante :

1. Les applications qui tentent d’utiliser le SSO sont des applications de première partie. Le partage de sessions intégrées avec des applications tierces n’est pas pris en charge.
2. Les applications et votre locataire Auth0 partagent un domaine de premier niveau au moyen d’un [domaine personnalisé](/fr-CA/docs/customize/custom-domains). Les domaines Auth0 traditionnels utilisent le format `foo.auth0.com` ; les domaines personnalisés permettent à vos applications et à votre locataire Auth0 de partager le même domaine de premier niveau, ce qui contribue aussi à prévenir les attaques CSRF.

Lorsque votre architecture répond à ces critères, le SSO intégré avec Auth0.js est une bonne option. Universal Login gère automatiquement le SSO sur plusieurs domaines ou avec des [applications tierces](/fr-CA/docs/get-started/applications/third-party-applications/configure-third-party-applications) grâce à sa couche de session, et les deux peuvent coexister dans la même application — par exemple, Universal Login pour la connexion principale et Auth0.js pour l’inscription intégrée d’un facteur d’authentification ou pour des flux d’authentification renforcée. Pour comparer les compromis, consultez [Hosted Login vs. Embedded Login](/fr-CA/docs/authenticate/login/universal-vs-embedded-login).

<div id="passwordless-login">
  ## Connexion Passwordless
</div>

<Tooltip tip="Passwordless : forme d’authentification qui ne repose pas sur un mot de passe comme premier facteur." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=Passwordless">Passwordless</Tooltip> permet aux utilisateurs de se connecter en recevant un mot de passe à usage unique par courriel ou par message texte. Le processus vous oblige à démarrer le flux Passwordless, à générer et à envoyer un code à l’utilisateur (ou un lien contenant un code), puis à recueillir ses identifiants au moyen de la méthode de vérification. Cela peut prendre la forme d’un écran de connexion qui demande son courriel (ou son numéro de téléphone) ainsi que le code que vous venez de lui envoyer. Il est aussi possible d’utiliser un lien Passwordless au lieu d’envoyer un code à l’utilisateur. Il lui suffit alors de cliquer sur le lien dans son courriel ou son message texte pour appeler votre point de terminaison et vérifier automatiquement ces données à l’aide de la même méthode de vérification (sans que l’utilisateur ait à saisir manuellement un code).

Pour utiliser l’authentification Passwordless, initialisez Auth0.js avec un `redirectUri` et définissez `responseType: 'token'`.

export const codeExample3 = `var webAuth = new auth0.WebAuth({
  clientID: '{yourClientId}',
  domain: '{yourDomain}',
  redirectUri: 'http://example.com',
  responseType: 'token id_token'
});`;

<AuthCodeBlock children={codeExample3} language="js" />

<div id="start-passwordless-authentication">
  ### Démarrer l’authentification Passwordless
</div>

La première étape de l’authentification Passwordless avec Auth0.js consiste à utiliser la méthode `passwordlessStart`, qui accepte plusieurs paramètres dans son objet `options` :

| **Paramètre** | **Obligatoire** | **Description**                                                                                            |
| ------------- | --------------- | ---------------------------------------------------------------------------------------------------------- |
| `connection`  | obligatoire     | (String) Indique comment envoyer le code ou le lien à l’utilisateur. La valeur doit être `email` ou `sms`. |
| `send`        | obligatoire     | (String) La valeur doit être `code` ou `link`. Si elle est `null`, un lien sera envoyé.                    |
| `phoneNumber` | facultatif      | (String) Le numéro de téléphone de l’utilisateur pour l’envoi d’un code ou d’un lien par SMS.              |
| `email`       | facultatif      | (String) Le courriel de l’utilisateur pour l’envoi d’un code ou d’un lien par courriel.                    |

Notez qu’exactement un des paramètres facultatifs `phoneNumber` et `email` doit être envoyé pour démarrer la transaction Passwordless.

```js lines theme={null}
webAuth.passwordlessStart({
    connection: 'email',
    send: 'code',
    email: 'foo@bar.com'
  }, function (err,res) {
    // gérer les erreurs ou continuer
  }
);
```

<div id="complete-passwordless-authentication">
  ### Finaliser l’authentification Passwordless
</div>

Si vous envoyez un code, vous devrez ensuite demander à l’utilisateur de le saisir. Vous traiterez ensuite le code et authentifierez l’utilisateur à l’aide de la méthode `passwordlessLogin`, qui accepte plusieurs paramètres pouvant être transmis dans son objet `options` :

| **Paramètre**      | **Obligatoire** | **Description**                                                                                                                                                  |
| ------------------ | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `connection`       | requis          | (String) Indique comment envoyer le code ou le lien à l’utilisateur. La valeur doit être `email` ou `sms`, et identique à celle transmise à `passwordlessStart`. |
| `verificationCode` | requis          | (String) Le code envoyé à l’utilisateur, soit sous forme de code, soit intégré à un lien.                                                                        |
| `phoneNumber`      | facultatif      | (String) Le numéro de téléphone de l'utilisateur auquel le code ou le lien a été envoyé par SMS.                                                                 |
| `email`            | facultatif      | (String) Le courriel de l'utilisateur auquel le code ou le lien a été envoyé par courriel.                                                                       |

Comme avec `passwordlessStart`, un seul des paramètres facultatifs `phoneNumber` et `email` doit être transmis afin de vérifier la transaction Passwordless.

Pour utiliser `passwordlessLogin`, précisez `redirectUri` et `responseType` lors de l’initialisation de WebAuth.

```js lines theme={null}
webAuth.passwordlessLogin({
    connection: 'email',
    email: 'foo@bar.com',
    verificationCode: '389945'
  }, function (err,res) {
    // gérer les erreurs ou continuer
  }
);
```

<div id="extract-the-authresult-and-get-user-info">
  ## Extraire `authResult` et obtenir les informations sur l’utilisateur
</div>

Après l’authentification, vous pouvez utiliser la méthode `parseHash` pour analyser un fragment de hachage d’URL lorsque l’utilisateur est redirigé vers votre application afin d’extraire le résultat d’une réponse d’authentification d’Auth0. Vous pouvez choisir de gérer cela dans une page de rappel qui redirigera ensuite vers votre application principale, ou directement dans la page, selon le contexte.

La méthode `parseHash` prend un objet `options` qui contient les paramètres suivants :

| **Paramètre**                                                                                                                                                                                                                      | **Obligatoire** | **Description**                                                                                                                                                                                                 |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `state`                                                                                                                                                                                                                            | facultatif      | (String) Une valeur opaque que l’application ajoute à la demande initiale et qu’Auth0 inclut lors de la redirection vers l’application. Cette valeur est utilisée par Auth0.js pour prévenir les attaques CSRF. |
| <Tooltip tip="Nonce : nombre arbitraire émis une seule fois dans un protocole d’authentification pour détecter et prévenir les attaques par rejeu." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=nonce">nonce</Tooltip> | facultatif      | (String) Utilisé pour vérifier l’ID Token                                                                                                                                                                       |
| `hash`                                                                                                                                                                                                                             | facultatif      | (String) Le hachage de l’URL (s’il n’est pas fourni, `window.location.hash` sera utilisé par défaut)                                                                                                            |

Le contenu de l’objet authResult renvoyé par `parseHash` dépend des paramètres d’authentification utilisés. Il peut inclure :

| **Élément**   | **Description**                                                                                                                                                                                                                                                          |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `accessToken` | Un <Tooltip tip="Jeton d’accès : jeton d’autorisation, sous la forme d’une chaîne opaque ou d’un JWT, utilisé pour accéder à une API." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=Access+Token">Jeton d’accès</Tooltip> pour l’API, spécifié par `audience` |
| `expiresIn`   | Une chaîne contenant la durée de validité (en secondes) du `accessToken`                                                                                                                                                                                                 |
| `idToken`     | Un JWT ID Token contenant des informations sur le profil de l’utilisateur                                                                                                                                                                                                |

```js lines theme={null}
webAuth.parseHash({ hash: window.location.hash }, function(err, authResult) {
  if (err) {
    return console.log(err);
  }

  webAuth.client.userInfo(authResult.accessToken, function(err, user) {
    // Vous avez maintenant les informations de l'utilisateur
  });
});
```

Comme indiqué ci-dessus, la méthode `client.userInfo` peut être appelée en lui transmettant l’`accessToken` renvoyé. Elle enverra une requête au point de terminaison `/userinfo` et retournera l’objet `user`, qui contient les renseignements sur l’utilisateur, présentés de façon semblable à l’exemple ci-dessous.

```json lines theme={null}
{
    "sub": "auth0|123456789012345678901234",
    "nickname": "johnfoo",
    "name": "johnfoo@gmail.com",
    "picture": "https://gravatar.com/avatar/example.png",
    "updated_at": "2018-05-07T14:16:52.013Z",
    "email": "johnfoo@gmail.com",
    "email_verified": "false"
}
```

Vous pouvez maintenant utiliser ces renseignements selon les besoins de votre application, par exemple pour récupérer l’ensemble des informations de profil de l’utilisateur à l’aide de la <Tooltip tip="Management API : un produit qui permet aux clients d’effectuer des tâches administratives." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=Management+API">Management API</Tooltip>, comme indiqué ci-dessous.

<div id="using-nonces">
  ## Utilisation des valeurs nonce
</div>

Par défaut (et si `responseType` contient `id_token`), Auth0.js génère une valeur `nonce` aléatoire lorsque vous appelez `webAuth.authorize`, la stocke dans le stockage local, puis la récupère dans `webAuth.parseHash`. Ce comportement par défaut convient dans la plupart des cas, mais certains cas d’utilisation peuvent exiger qu’un développeur contrôle la valeur `nonce`.
Si vous souhaitez utiliser une valeur `nonce` générée par le développeur, vous devez la fournir comme option à la fois à `webAuth.authorize` et à `webAuth.parseHash`.
`webAuth.authorize({<Tooltip tip="Nonce : nombre arbitraire émis une seule fois dans un protocole d’authentification pour détecter et prévenir les attaques par rejeu." cta="Voir le glossaire" href="/docs/glossary?term=nonce">nonce</Tooltip>: '1234', responseType: 'token id_token'});
webAuth.parseHash({nonce: '1234'}, callback);`

Si vous appelez `webAuth.checkSession` au lieu de `webAuth.authorize`, vous devez seulement spécifier votre valeur `nonce` personnalisée comme option de `checkSession` :

```js lines theme={null}
webAuth.checkSession({
  nonce: '1234',
}, function (err, authResult) {
    ...
});
```

La méthode `webAuth.checkSession` vérifiera automatiquement que la revendication `nonce` du <Tooltip tip="ID Token : justificatif destiné à l’application cliente elle-même plutôt qu’à l’accès à une ressource." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=ID+Token">ID Token</Tooltip> renvoyé correspond à la valeur fournie dans l’option.

<div id="error-codes-and-descriptions">
  ## Codes d’erreur et descriptions
</div>

Lorsque Auth0.js est utilisé pour la connexion intégrée, il utilise le point de terminaison `/co/authenticate`, qui peut produire les erreurs suivantes :

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Les descriptions d’erreur sont destinées à être compréhensibles pour les humains. La description **ne doit pas être interprétée par du code** et peut être modifiée à tout moment.
</Callout>

| **Statut** | **Code**                      | **Description**                                                                                                                                                                                      |
| ---------- | ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 400        | invalid\_request              | Corps de requête invalide. Les paramètres requis sont, et doivent être uniquement, `client_id`, credential\_type, username, otp et realm.                                                            |
| 401        | unauthorized\_client          | Connexion inter-origines non autorisée.                                                                                                                                                              |
| 400        | unsupported\_credential\_type | Paramètre de type d’identifiant inconnu.                                                                                                                                                             |
| 400        | invalid\_request              | Realm non-existent-connection inconnu.                                                                                                                                                               |
| 403        | access\_denied                | Courriel ou mot de passe incorrect.                                                                                                                                                                  |
| 403        | access\_denied                | Erreur d’authentification                                                                                                                                                                            |
| 403        | blocked\_user                 | Utilisateur bloqué                                                                                                                                                                                   |
| 401        | password\_leaked              | Cette tentative de connexion a été bloquée parce que le mot de passe que vous utilisez a déjà été divulgué lors d’une fuite de données (pas dans cette application).                                 |
| 429        | too\_many\_attempts           | Votre compte a été bloqué après plusieurs tentatives de connexion consécutives. Nous vous avons envoyé une notification selon votre mode de contact préféré avec des instructions pour le débloquer. |
| 429        | too\_many\_attempts           | Nous avons détecté un comportement de connexion suspect et toute tentative supplémentaire sera bloquée. Veuillez communiquer avec l’administrateur.                                                  |

De plus, vous pouvez aussi recevoir une erreur 403 générique sans propriété `error` ni `error_description`. Le corps de la réponse contiendrait simplement quelque chose de semblable à ce qui suit :
`Origin https://test.app is not allowed.`

<div id="logout">
  ## Déconnexion
</div>

Pour déconnecter un utilisateur, utilisez la méthode `logout()`. Cette méthode accepte un objet d’options pouvant inclure les paramètres suivants.

Si le paramètre `clientID` est inclus, l’URL `returnTo` fournie doit figurer dans les **Allowed Logout URLs** de l’application dans l’[Auth0 Dashboard](https://manage.auth0.com/#). Toutefois, si le paramètre `clientID` n’est pas inclus, l’URL `returnTo` doit figurer dans les **Allowed Logout URLs** au niveau du compte dans l’[Auth0 Dashboard](https://manage.auth0.com/#).

```js lines theme={null}
webAuth.logout({
  returnTo: 'some url here',
  clientID: 'some client ID here'
});
```

<div id="signup">
  ## Inscription
</div>

Pour inscrire un utilisateur, utilisez la méthode `signup`. Cette méthode accepte un objet d’options qui peut inclure les paramètres suivants.

| **Paramètre**   | **Obligatoire** | **Description**                                                                                                                                                                       |
| --------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `email`         | obligatoire     | (String) Adresse de courriel de l’utilisateur                                                                                                                                         |
| `password`      | obligatoire     | (String) Mot de passe souhaité par l’utilisateur                                                                                                                                      |
| `username`      | obligatoire\*   | (String) Nom d’utilisateur souhaité. \*Obligatoire si vous utilisez une connexion de base de données et que **Requires Username** est activé                                          |
| `connection`    | obligatoire     | (String) Nom de la connexion de base de données de votre application à utiliser pour tenter de créer le compte utilisateur                                                            |
| `user_metadata` | facultatif      | (JSON object) Attributs supplémentaires utilisés pour les renseignements sur l’utilisateur. Ils seront stockés dans [user\_metadata](/fr-CA/docs/manage-users/user-accounts/metadata) |

Les inscriptions doivent être effectuées pour des connexions de base de données. Voici un exemple de la méthode `signup` et un exemple de code pour un formulaire.

```html lines theme={null}
<h2>Signup Database Connection</h2>
<input class="signup-email" />
<input type="password" class="signup-password" />
<input type="button" class="signup-db" value="Signup!" />
<script type="text/javascript">
    $('.signup-db').click(function (e) {
        e.preventDefault();
        webAuth.signup({
            connection: 'Username-Password-Authentication',
            email: $('.signup-email').val(),
            password: $('.signup-password').val(),
            user_metadata: { plan: 'silver', team_id: 'a111' }
        }, function (err) {
            if (err) return alert('Something went wrong: ' + err.message);
            return alert('success signup without login!')
        });
    });
</script>
```

<div id="using-checksession-to-acquire-new-tokens">
  ## Utiliser checkSession pour obtenir de nouveaux jetons
</div>

La méthode `checkSession` vous permet d’obtenir un nouveau jeton d’Auth0 pour un utilisateur déjà authentifié auprès d’Auth0 sur votre domaine. La méthode accepte tous les paramètres OAuth2 valides qui seraient normalement envoyés à `authorize`. Si vous les omettez, elle utilisera ceux fournis lors de l’initialisation d’Auth0.

L’appel à `checkSession` peut servir à obtenir un nouveau jeton pour l’API spécifiée comme <Tooltip tip="Audience : identifiant unique de l’audience d’un jeton émis. Appelée aud dans un jeton, sa valeur contient l’ID d’une application (ID client) pour un ID Token ou d’une API (identifiant d’API) pour un jeton d’accès." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=audience">audience</Tooltip> lors de l’initialisation de `webAuth` :

```js lines theme={null}
webAuth.checkSession({}, function (err, authResult) {
  // err si le parseHash automatique échoue
  ...
});
```

Consultez [Extraire AuthResult et obtenir les renseignements de l’utilisateur](#extract-the-authresult-and-get-user-info) pour connaître le format de `authResult`.

Ou bien, le jeton peut être obtenu pour une API différente de celle utilisée lors de l’initialisation de `webAuth` en précisant une `audience` et un `scope` :

```js lines theme={null}
webAuth.checkSession(
  {
    audience: `https://mydomain/another-api/˜`,
    scope: 'read:messages'
  }, function (err, authResult) {
  // err si le parseHash automatique échoue
  ...
});
```

Notez que `checkSession()` déclenche toutes les [Rules](/fr-CA/docs/customize/rules) que vous avez éventuellement configurées. Vous devriez donc vérifier vos Rules dans l’[Auth0 Dashboard](https://manage.auth0.com/#/rules) avant de l’utiliser.

La redirection réelle vers `/authorize` se fait dans une iframe; votre application ne sera donc pas rechargée et vous ne serez pas redirigé hors de celle-ci.

Cependant, le navigateur **doit** avoir les témoins tiers activés. Sinon, **checkSession()** ne pourra pas accéder à la session de l’utilisateur actuel (ce qui rend impossible l’obtention d’un nouveau jeton sans rien afficher à l’utilisateur). Il en ira de même si les utilisateurs ont [la fonctionnalité ITP de Safari activée](https://support.auth0.com/center/s/article/troubleshoot-auth0-token-renewal-issues-in-safari-with-itp-enabled).

N’oubliez pas d’ajouter l’URL d’où provient la demande d’autorisation à la liste **Origines Web autorisées** de votre application Auth0 dans l’[Auth0 Dashboard](https://manage.auth0.com/#), sous les **Settings** de votre application.

<Warning>
  Si la connexion est une connexion sociale et que vous utilisez les clés de développement Auth0, l’appel à `checkSession` renverra toujours `login_required`.
</Warning>

<div id="polling-with-checksession">
  ### Vérification périodique avec `checkSession()`
</div>

Dans certains scénarios impliquant plusieurs applications, où une déconnexion unique est souhaitée (lorsqu’un utilisateur se déconnecte d’une application, il doit aussi être déconnecté des autres applications), une application peut être configurée pour interroger périodiquement Auth0 à l’aide de `checkSession()` afin de vérifier si une session existe. Si aucune session n’existe, vous pouvez alors déconnecter l’utilisateur de l’application. La même méthode de vérification périodique peut être utilisée pour mettre en œuvre l’authentification silencieuse dans un scénario d’authentification unique (SSO).

L’intervalle entre les appels à `checkSession()` doit être d’au moins 15 minutes afin d’éviter tout problème futur lié à la limitation du nombre de requêtes pour cet appel.

<div id="password-reset-requests">
  ## Demandes de réinitialisation du mot de passe
</div>

Si vous essayez de mettre en place une fonctionnalité de réinitialisation du mot de passe, utilisez la méthode `changePassword` et transmettez-lui un objet `options` contenant un paramètre `connection` et un paramètre `email`.

```js lines theme={null}
$('.change_password').click(function () {
    webAuth.changePassword({
      connection: 'db-conn',
      email:   'foo@bar.com'
    }, function (err, resp) {
      if(err){
        console.log(err.message);
      }else{
        console.log(resp);
      }
    });
  });
```

L’utilisateur reçoit un courriel contenant un lien pour réinitialiser son mot de passe.

<div id="user-management">
  ## Gestion des utilisateurs
</div>

La Management API offre des fonctionnalités qui vous permettent d’associer et de dissocier des comptes utilisateur distincts provenant de différents fournisseurs, ainsi que de mettre à jour les métadonnées utilisateur. Pour en savoir plus, consultez [la documentation sur la liaison des comptes utilisateur](/fr-CA/docs/manage-users/user-accounts/user-account-linking).

Pour commencer, vous devez d’abord obtenir un <Tooltip tip="Jeton d’accès : justificatif d’autorisation, sous la forme d’une chaîne opaque ou d’un JWT, utilisé pour accéder à une API." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=access+token">jeton d’accès</Tooltip> qui peut être utilisé pour appeler la Management API. Pour ce faire, indiquez l’audience `https://{yourDomain}/api/v2/` lors de l’initialisation d’Auth0.js; vous obtiendrez alors le jeton d’accès dans le cadre du flux d’authentification.

Si vous utilisez des [domaines personnalisés](/fr-CA/docs/customize/custom-domains), vous devrez créer une nouvelle instance de `webAuth` en utilisant votre domaine Auth0 plutôt que votre domaine personnalisé pour les appels à la Management API, car elle fonctionne uniquement avec les domaines Auth0.

export const codeExample4 = `var webAuth = new auth0.WebAuth({
  clientID: '{yourClientId}',
  domain: '{yourDomain}',
  redirectUri: 'http://example.com',
  audience: \`https://{yourDomain}/api/v2/\`,
  scope: 'read:current_user',
  responseType: 'token id_token'
});`;

<AuthCodeBlock children={codeExample4} language="js" />

Vous pouvez également le faire à l’aide de `checkSession()` :

export const codeExample5 = `webAuth.checkSession(
  {
    audience: \`https://{yourDomain}/api/v2/\`,
    scope: 'read:current_user'
  }, function(err, result) {
     // utilisez result.accessToken
  }
);`;

<AuthCodeBlock children={codeExample5} language="js" />

Vous devez préciser les scopes dont vous avez besoin. Vous pouvez demander les scopes suivants :

* `read:current_user`
* `update:current_user_identities`
* `create:current_user_metadata`
* `update:current_user_metadata`
* `delete:current_user_metadata`
* `create:current_user_device_credentials`
* `delete:current_user_device_credentials`

Une fois le jeton d’accès obtenu, vous pouvez créer une nouvelle instance `auth0.Management` en lui transmettant le Domaine Auth0 du compte ainsi que le jeton d’accès.

export const codeExample6 = `var auth0Manage = new auth0.Management({
  domain: '{yourDomain}',
  token: 'ACCESS_TOKEN'
});`;

<AuthCodeBlock children={codeExample6} language="js" />

<div id="get-the-user-profile">
  ### Obtenir le profil de l’utilisateur
</div>

Pour obtenir les données du profil de l’utilisateur, utilisez la méthode `getUser()` en lui passant `userId` et un callback en paramètres. La méthode renvoie le profil de l’utilisateur. Notez que le `userID` requis ici est le même que celui récupéré par la méthode `client.userInfo`.
`auth0Manage.getUser(userId, cb);`

<div id="update-the-user-profile">
  ### Mise à jour du profil utilisateur
</div>

Lorsque vous mettez à jour les métadonnées utilisateur, vous devez d’abord créer un objet `userMetadata`, puis appeler la méthode `patchUserMetadata` en lui passant l’id de l’utilisateur et l’objet `userMetadata` que vous avez créé. Les valeurs de cet objet remplaceront les valeurs existantes ayant la même clé ou ajouteront de nouvelles valeurs pour les clés qui n’existent pas encore dans les métadonnées utilisateur. Pour en savoir plus, consultez [Metadata](/fr-CA/docs/manage-users/user-accounts/metadata).
`auth0Manage.patchUserMetadata(userId, userMetadata, cb);`

<div id="link-users">
  ### Lier des utilisateurs
</div>

La liaison de comptes utilisateur permet à un utilisateur de s’authentifier à partir de n’importe lequel de ses comptes et, peu importe celui qu’il utilise, d’accéder au même profil à la connexion. Par défaut, Auth0 traite tous ces comptes comme des profils distincts. Si vous voulez lier les comptes d’un utilisateur, utilisez cette méthode.

La méthode `linkUser` accepte deux paramètres : le `userId` principal et l’ID Token de l’utilisateur secondaire (le jeton obtenu après la connexion avec cette identité). L’ID utilisateur en question est l’identifiant unique du compte utilisateur principal. L’ID doit être transmis avec le préfixe du fournisseur, par exemple `auth0|1234567890` ou `facebook|1234567890`, lorsque vous utilisez cette méthode. Consultez [User Account Linking](/fr-CA/docs/manage-users/user-accounts/user-account-linking) pour en savoir plus.
`auth0Manage.linkUser(userId, secondaryUserToken, cb);`

Après la liaison des comptes, le second compte n’existera plus comme entrée distincte dans la base de données des utilisateurs et ne sera accessible qu’à titre de partie du compte principal.
Lorsque des comptes sont liés, les métadonnées du compte secondaire ne sont pas fusionnées avec celles du compte principal et, s’ils sont ensuite dissociés, le compte secondaire ne conservera pas non plus les métadonnées du compte principal lorsqu’il redeviendra distinct.