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

> SDK Auth0 pour les applications monopages utilisant le flux d’octroi de code d’autorisation avec PKCE.

# Auth0 Single Page App SDK : flux d’octroi de code avec PKCE.

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

Auth0 Single Page App SDK est une nouvelle bibliothèque Javascript conçue pour mettre en œuvre l’authentification et l’autorisation dans des applications monopages (SPA) avec Auth0. Elle fournit une API de haut niveau et prend en charge une bonne partie des détails, afin que vous puissiez sécuriser les SPA selon les pratiques exemplaires tout en écrivant moins de code.

Auth0 SPA SDK gère les détails liés aux types d’octroi et au protocole, l’expiration et le renouvellement des tokens, ainsi que le stockage des tokens et la mise en cache. En coulisses, il implémente [Universal Login](/docs/fr-ca/authenticate/login/auth0-universal-login) et le [flux d’octroi de code avec PKCE](/docs/fr-ca/get-started/authentication-and-authorization-flow/authorization-code-flow-with-pkce).

La [bibliothèque](https://github.com/auth0/auth0-spa-js) et la [documentation de l’API](https://auth0.github.io/auth0-spa-js/) sont hébergées sur GitHub.

Si vous rencontrez des problèmes ou des erreurs lors de l’utilisation du nouveau SDK Javascript, veuillez [consulter la FAQ](https://github.com/auth0/auth0-spa-js/blob/master/FAQ.md) pour vérifier si votre problème y est déjà traité.

<div id="installation">
  ## Installation
</div>

Vous avez plusieurs options pour utiliser l’Auth0 SPA SDK dans votre projet :

* À partir du CDN : `<script src="https://cdn.auth0.com/js/auth0-spa-js/2.0/auth0-spa-js.production.js"></script>`. Pour en savoir plus, consultez la [FAQ](https://github.com/auth0/auth0-spa-js/blob/main/FAQ.md#how-to-use-from-a-cdn).
* Avec [npm](https://npmjs.org) : `npm install @auth0/auth0-spa-js`
* Avec [yarn](https://yarnpkg.com) : `yarn add @auth0/auth0-spa-js`

<div id="getting-started">
  ## Premiers pas
</div>

<div id="create-the-client">
  ### Créer le client
</div>

Vous devez d’abord créer une nouvelle instance de l’objet client `Auth0Client`. Créez l’instance `Auth0Client` avant d’afficher ou d’initialiser votre application. Vous pouvez le faire soit avec la méthode async/await, soit avec des promesses. Vous ne devez créer qu’une seule instance du client.

L’utilisation de `createAuth0Client` effectue automatiquement quelques opérations :

* Elle crée une instance d’`Auth0Client`.
* Elle appelle `getTokenSilently` pour actualiser la session de l’utilisateur.
* Elle ignore toutes les erreurs de `getTokenSilently`, sauf `login_required`.

<div id="use-asyncawait">
  #### Utilisez async/await
</div>

export const codeExample1 = `import { createAuth0Client } from '@auth0/auth0-spa-js';

const auth0 = await createAuth0Client({
  domain: '{yourDomain}',
  clientId: '{yourClientId}'
});`;

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

<div id="use-promises">
  #### Utiliser les promesses
</div>

export const codeExample2 = `createAuth0Client({
  domain: '{yourDomain}',
  clientId: '{yourClientId}'
}).then(auth0 => {
  //...
});`;

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

Vous pouvez aussi créer le client directement à l’aide du constructeur `Auth0Client`. Cela peut être utile si vous souhaitez :

* Contourner l’appel à `getTokenSilently` à l’initialisation.
* Gérer les erreurs de façon personnalisée.
* Initialiser le SDK de manière synchrone.

export const codeExample3 = `import { Auth0Client } from '@auth0/auth0-spa-js';

const auth0 = new Auth0Client({
  domain: '{yourDomain}',
  clientId: '{yourClientId}'
});`;

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

<div id="login-and-get-user-info">
  ### Se connecter et obtenir les renseignements sur l’utilisateur
</div>

Ensuite, créez un bouton sur lequel les utilisateurs peuvent cliquer pour lancer la connexion :

`<button id="login">Click to Login</button>`

Écoutez les événements de clic du bouton que vous avez créé. Lorsque l’événement se produit, utilisez la méthode de connexion souhaitée pour authentifier l’utilisateur (`loginWithRedirect()` dans cet exemple). Une fois l’utilisateur authentifié, vous pouvez récupérer son profil à l’aide de la méthode `getUser()`.

#### Utiliser async/await

```jsx lines theme={null}
document.getElementById('login').addEventListener('click', async () => {
  await auth0.loginWithRedirect({
    authorizationParams: {
      redirect_uri: 'http://localhost:3000/'
    }
  });
  //connecté. vous pouvez obtenir le profil utilisateur ainsi :
  const user = await auth0.getUser();
  console.log(user);
});
```

<div id="use-promises">
  #### Utiliser les promesses
</div>

```jsx lines theme={null}
document.getElementById('login').addEventListener('click', () => {
  auth0.loginWithRedirect({
    authorizationParams: {
      redirect_uri: 'http://localhost:3000/'
    }
  }).then(token => {
    //connecté. vous pouvez obtenir le profil utilisateur comme suit :
    auth0.getUser().then(user => {
      console.log(user);
    });
  });
});
```

<div id="call-an-api">
  ### Appeler une API
</div>

Pour appeler votre API, commencez par obtenir le <Tooltip tip="Jeton d’accès : information d’identification d’autorisation, sous la forme d’une chaîne opaque ou d’un JWT, utilisée pour accéder à une API." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=Access+Token">jeton d’accès</Tooltip> de l’utilisateur. Utilisez ensuite le jeton d’accès dans votre requête. Dans cet exemple, la méthode `getTokenSilently` est utilisée pour récupérer le jeton d’accès :

`<button id="callApi">Call an API</button>`

#### Utiliser async/await

```jsx lines theme={null}
document.getElementById('callApi').addEventListener('click', async () => {
  const accessToken = await auth0.getTokenSilently();
  const result = await fetch('https://exampleco.com/api', {
    method: 'GET',
    headers: {
      Authorization: 'Bearer ' + accessToken
    }
  });
  const data = await result.json();
  console.log(data);
});
```

<div id="use-promises">
  #### Utiliser les promesses
</div>

```jsx lines theme={null}
document.getElementById('callApi').addEventListener('click', () => {
  auth0
    .getTokenSilently()
    .then(accessToken =>
      fetch('https://exampleco.com/api', {
        method: 'GET',
        headers: {
          Authorization: 'Bearer ' + accessToken
        }
      })
    )
    .then(result => result.json())
    .then(data => {
      console.log(data);
    });
});
```

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

Ajoutez un bouton permettant aux utilisateurs de se déconnecter :

`<button id="logout">Logout</button>`

```jsx lines theme={null}
$('#logout').click(async () => {
  auth0.logout({
    logoutParams: {
      returnTo: 'http://localhost:3000/'
    }
  });
});
```

<div id="change-storage-options">
  ### Modifier les options de stockage
</div>

Par défaut, l’Auth0 SPA SDK stocke les jetons en mémoire. Toutefois, cela ne permet pas de les conserver d’une actualisation de page à l’autre ni entre les onglets du navigateur. Vous pouvez plutôt choisir de stocker les jetons dans le stockage local en définissant la propriété `cacheLocation` sur `localstorage` lors de l’initialisation du SDK. Cela peut aider à atténuer certains effets des technologies de protection de la vie privée des navigateurs qui empêchent l’accès au <Tooltip tip="Cookie de session : Entité qui, lorsqu'elle est présente, permet de considérer l'utilisateur comme authentifié." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=session+cookie">cookie de session</Tooltip> Auth0 en conservant les jetons d’accès plus longtemps.

<Warning>
  Le stockage des jetons dans le stockage local du navigateur permet de les conserver entre les actualisations de page et les onglets du navigateur. Toutefois, si un attaquant parvient à exécuter du JavaScript dans la SPA au moyen d’une attaque de script intersite (XSS), il peut récupérer les jetons stockés dans le stockage local. Une vulnérabilité menant à une attaque XSS réussie peut se trouver soit dans le code source de la SPA, soit dans tout code JavaScript tiers (comme Bootstrap, jQuery ou Google Analytics) inclus dans la SPA.

  Pour en savoir plus, consultez [le stockage des jetons](/docs/fr-ca/secure/tokens/token-best-practices).
</Warning>

export const codeExample4 = `const auth0 = await createAuth0Client({
  domain: '{yourDomain}',
  clientId: '{yourClientId}',
  cacheLocation: 'localstorage'
});`;

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

<div id="use-rotating-refresh-tokens">
  ### Utiliser des jetons d’actualisation avec rotation
</div>

L’Auth0 SPA SDK peut être configuré pour utiliser des [jetons d’actualisation avec rotation](/docs/fr-ca/secure/tokens/refresh-tokens/refresh-token-rotation) afin d’obtenir silencieusement de nouveaux jetons d’accès. Ceux-ci peuvent servir à contourner les technologies de confidentialité des navigateurs qui empêchent l’accès au cookie de session d’Auth0 lors d’une authentification silencieuse, tout en offrant une détection intégrée de la réutilisation.

Configurez le SDK en définissant `useRefreshTokens` à `true` lors de l’initialisation :

export const codeExample5 = `const auth0 = await createAuth0Client({
  domain: '{yourDomain}',
  clientId: '{yourClientId}',
  useRefreshTokens: true
});

// Obtenir un nouveau jeton d’accès à l’aide d’un jeton d’actualisation
const token = await auth0.getTokenSilently();`;

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

<Tooltip tip="Jeton d’actualisation : jeton utilisé pour obtenir un nouveau jeton d’accès sans obliger les utilisateurs à se connecter de nouveau." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=Refresh+Tokens">Jetons d’actualisation</Tooltip> devront aussi être [configurés pour votre tenant](/docs/fr-ca/secure/tokens/refresh-tokens/configure-refresh-token-rotation) avant de pouvoir être utilisés dans votre SPA.

Une fois configurés, le SDK demandera la portée `offline_access` pendant l’étape d’autorisation. De plus, `getTokenSilently` appellera alors directement le point de terminaison `/oauth/token` pour échanger des jetons d’actualisation contre des jetons d’accès.
Le SDK respectera la configuration de stockage au moment d’enregistrer les jetons d’actualisation. Si le SDK a été configuré avec le mécanisme de stockage en mémoire par défaut, les jetons d’actualisation seront perdus au rechargement de la page.

<div id="usage">
  ## Utilisation
</div>

Vous trouverez ci-dessous des exemples d’utilisation de différentes méthodes du SDK. Veuillez noter que jQuery est utilisé dans ces exemples.

<div id="login-with-redirect">
  ### Connexion par redirection
</div>

Redirigez vers l’endpoint `/authorize` d’Auth0 pour lancer le flux [Universal Login](/docs/fr-ca/authenticate/login/auth0-universal-login) :

```jsx lines theme={null}
$('#loginRedirect').click(async () => {
  await auth0.loginWithRedirect({
    authorizationParams: {
      redirect_uri: 'http://localhost:3000/'
    }
  });
});
```

<div id="login-with-popup">
  ### Se connecter avec une fenêtre contextuelle
</div>

Utilisez une fenêtre contextuelle pour vous connecter au moyen de la page <Tooltip tip="Universal Login : votre application redirige l’utilisateur vers Universal Login, hébergé sur l’Authorization Server d’Auth0, afin de vérifier son identité." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=Universal+Login">Universal Login</Tooltip> :

```jsx lines theme={null}
$('#loginPopup').click(async () => {
  await auth0.loginWithPopup();
});
```

Si l’utilisateur met plus de 60 secondes, soit le délai d’expiration par défaut, pour terminer le flux d’authentification, l’authentification sera interrompue et vous devrez intercepter l’erreur dans votre code pour :

Suggérer à l’utilisateur de réessayer et de fermer manuellement la fenêtre contextuelle à l’aide de `error.popup.close` :

```jsx lines theme={null}
$('#loginPopup').click(async () => {
  try {
    await auth0.loginWithPopup();
  } catch {error}
  if (error instanceof auth0.PopupTimeoutError) {
    // logique personnalisée pour informer l'utilisateur de réessayer
    error.popup.close();
  }
});
```

Ou créez une option `popup` personnalisée dans l’objet `options` :

```jsx lines theme={null}
$('#loginPopup').click(async () => {
  const popup = window.open(
    '',
    'auth0:authorize:popup',
    'left=100,top=100,width=400,height=600,resizable'
  );
  try {
    await auth0.loginWithPopup({ popup });
  } catch {error}
  if (error instanceof auth0.PopupTimeoutError) {
    // logique personnalisée pour informer l'utilisateur de réessayer
    error.popup.close();
  }
});
```

<div id="login-with-redirect-callback">
  ### Connexion avec callback de redirection
</div>

Lorsque le navigateur est redirigé d’Auth0 vers votre SPA, `handleRedirectCallback` doit être appelé pour terminer le flux de connexion :

```jsx lines theme={null}
$('#loginRedirectCallback').click(async () => {
  await auth0.handleRedirectCallback();
});
```

<div id="get-access-token-with-no-interaction">
  ### Obtenir un jeton d’accès sans interaction
</div>

Obtenez un nouveau jeton d’accès sans interaction à l’aide d’un iframe masqué avec `prompt=none`, ou d’un jeton d’actualisation avec rotation. Les jetons d’actualisation sont utilisés lorsque `useRefreshTokens` est défini sur `true` lors de la configuration du SDK.

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  L’obtention d’un jeton d’accès sans interaction, sans utiliser de jetons d’actualisation, ne fonctionnera pas dans les navigateurs qui bloquent les cookies tiers, comme Safari et Brave. Pour en savoir plus sur cette solution de contournement au moyen d’un domaine personnalisé, consultez [Résoudre les problèmes de renouvellement de jetons lors de l’utilisation de Safari](https://support.auth0.com/center/s/article/troubleshoot-auth0-token-renewal-issues-in-safari-with-itp-enabled).
</Callout>

Si le stockage en mémoire (par défaut) et des jetons d’actualisation sont utilisés, les nouveaux jetons sont récupérés au moyen d’un Web Worker dans les navigateurs pris en charge :

```jsx lines theme={null}
$('#getToken').click(async () => {
  const token = await auth0.getTokenSilently();
});
```

La méthode `getTokenSilently()` exige que l’option **Allow Skipping User Consent** soit activée dans les [paramètres de votre API dans le Dashboard](https://manage.auth0.com/#/apis). De plus, le consentement de l’utilisateur [ne peut pas être ignoré sur 'localhost'](/docs/fr-ca/get-started/applications/third-party-applications/user-consent-and-third-party-applications).

<div id="get-access-token-with-popup">
  ### Obtenir un jeton d’accès au moyen d’une fenêtre contextuelle
</div>

Les jetons d’accès peuvent aussi être récupérés au moyen d’une fenêtre contextuelle. Contrairement à `getTokenSilently`, cette méthode de récupération d’un jeton d’accès fonctionne dans les navigateurs où les cookies tiers sont bloqués par défaut :

```jsx lines theme={null}
$('#getTokenPopup').click(async () => {
  const token = await auth0.getTokenWithPopup({
    authorizationParams: {
      audience: 'https://mydomain/api/',
      scope: 'read:rules'
    }
  });
});
```

<div id="get-access-token-for-a-different-audience">
  ### Obtenir un jeton d’accès pour une audience différente
</div>

Des options peuvent être transmises à `getTokenSilently` pour obtenir un jeton d’accès avec une <Tooltip tip="Audience : Identifiant unique de l’audience d’un jeton émis. Nommée aud dans un jeton, sa valeur contient l’ID d’une application (ID client) pour un ID Token ou d’une API (API Identifier) pour un jeton d’accès." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=audience">audience</Tooltip> et une portée différentes de celles demandées lors de l’authentification de l’utilisateur.

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Cela fonctionne uniquement si vous n’utilisez pas de jeton d’actualisation (`useRefreshTokens: false`), puisqu’un jeton d’actualisation est lié à l’audience et à la portée précises demandées lors de l’authentification de l’utilisateur.
</Callout>

```jsx lines theme={null}
$('#getToken_audience').click(async () => {
  const differentAudienceOptions = {
    authorizationParams: {
      audience: 'https://mydomain/another-api/',
      scope: 'read:rules',
      redirect_uri: 'http://localhost:3000/callback.html'
    }
  };
  const token = await auth0.getTokenSilently(differentAudienceOptions);
});
```

<div id="get-user">
  ### Récupérer l’utilisateur
</div>

Vous pouvez récupérer les données du profil de l’utilisateur authentifié en appelant la méthode `getUser` :

```jsx lines theme={null}
$('#getUser').click(async () => {
  const user = await auth0.getUser();
});
```

<div id="get-id-token-claims">
  ### Obtenir les claims de l’ID Token
</div>

Vous pouvez obtenir les claims de l’<Tooltip tip="ID Token : information d’authentification destinée au client lui-même, plutôt qu’à l’accès à une ressource." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=ID+Token">ID Token</Tooltip> de l’utilisateur authentifié en appelant la méthode `getIdTokenClaims` :

```jsx lines theme={null}
$('#getIdTokenClaims').click(async () => {
  const claims = await auth0.getIdTokenClaims();
  // si vous avez besoin du id_token brut, vous pouvez y accéder
  // via la propriété __raw
  const id_token = claims.__raw;
});
```

<div id="logout-default">
  ### Déconnexion (par défaut)
</div>

Vous pouvez lancer une déconnexion en appelant la méthode `logout` :

```jsx lines theme={null}
$('#logout').click(async () => {
  auth0.logout({
    logoutParams: {
      returnTo: 'http://localhost:3000/'
    }
  });
});
```

<div id="logout-with-no-client-id">
  ### Déconnexion sans ID client
</div>

Vous pouvez initier une déconnexion sans préciser d’<Tooltip tip="ID client : valeur d’identification attribuée à votre ressource enregistrée par Auth0." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=Client+ID">ID client</Tooltip> en appelant la méthode `logout` et en incluant `clientId: null` :

```jsx lines theme={null}
$('#logoutNoClientId').click(async () => {
  auth0.logout({
    clientId: null,
    logoutParams: {
      returnTo: 'http://localhost:3000/'
    }
  });
});
```

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

* [Valider les jetons d’accès](/docs/fr-ca/secure/tokens/access-tokens/validate-access-tokens)