> ## 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 monopage utilisant le flux de code d’autorisation avec PKCE.

# Flux de code d’autorisation avec PKCE du SDK Auth0 Single Page App.

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

Le SDK Auth0 pour applications monopages est une nouvelle bibliothèque JavaScript qui permet d’implémenter l’authentification et l’autorisation dans des applications monopages (SPA) avec Auth0. Il fournit une API de haut niveau et prend en charge une grande partie des détails afin que vous puissiez sécuriser les SPA selon les pratiques exemplaires tout en écrivant moins de code.

L’Auth0 SPA SDK gère les détails liés aux autorisations et aux protocoles, l’expiration et le renouvellement des jetons, ainsi que le stockage et la mise en cache des jetons. En arrière-plan, il implémente [Universal Login](/fr-CA/docs/authenticate/login/auth0-universal-login) et le [flux de code d’autorisation avec PKCE](/fr-CA/docs/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 voir si votre problème y est déjà traité.

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

Vous avez plusieurs options pour utiliser le 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 l’application
</div>

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

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

* Crée une instance de `Auth0Client`.
* Appelle `getTokenSilently` pour actualiser la session de l’utilisateur.
* Supprime 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 des promesses
</div>

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

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

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

* Éviter l’appel à `getTokenSilently` lors de 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">
  ### Connectez-vous et obtenez les informations de 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 sur le 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 le profil utilisateur à l’aide de la méthode `getUser()`.

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

```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 comme suit :
  const user = await auth0.getUser();
  console.log(user);
});
```

<div id="use-promises">
  #### Utiliser des 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 : 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> de l’utilisateur. Utilisez ensuite ce 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 des 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 sur lequel les utilisateurs peuvent cliquer pour 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, le Auth0 SPA SDK stocke les jetons en mémoire. Toutefois, cela n’assure pas la persistance entre les rechargements de page et 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 du navigateur 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="/fr-CA/docs/glossary?term=session+cookie">cookie de session</Tooltip> d’Auth0, en conservant les jetons d’accès plus longtemps.

<Warning>
  Le stockage des jetons dans le stockage local du navigateur assure la persistance entre les rechargements de page et les onglets du navigateur. Toutefois, si un attaquant parvient à exécuter du JavaScript dans la SPA au moyen d’une attaque par 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](/fr-CA/docs/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>

Le Auth0 SPA SDK peut être configuré pour utiliser des [jetons d’actualisation avec rotation](/fr-CA/docs/secure/tokens/refresh-tokens/refresh-token-rotation) afin d’obtenir silencieusement de nouveaux jetons d’accès. Ils permettent de contourner les mécanismes 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` sur `true` lors de l’initialisation :

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

// Demander un nouveau jeton d’accès au moyen 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 reconnecter." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=Refresh+Tokens">Jetons d’actualisation</Tooltip> devront aussi être [configurés pour votre locataire](/fr-CA/docs/secure/tokens/refresh-tokens/configure-refresh-token-rotation) avant de pouvoir être utilisés dans votre SPA.

Une fois configurés, le SDK demandera le scope `offline_access` à 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 lorsque la page sera rechargée.

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

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

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

Redirigez vers le point de terminaison `/authorize` d’Auth0 pour lancer le flux [Universal Login](/fr-CA/docs/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">
  ### Connexion avec une fenêtre contextuelle
</div>

Utilisez une fenêtre contextuelle pour vous connecter à l’aide de la page <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> :

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

Si l’utilisateur met plus que le délai d’expiration par défaut de 60 secondes 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 après redirection
</div>

Lorsque le navigateur est redirigé depuis 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 silencieusement à l’aide d’un `iframe` masqué et de `prompt=none`, ou en utilisant un Jeton d’actualisation rotatif. 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 silencieuse d’un Jeton d’accès sans utiliser de Jetons d’actualisation ne fonctionne pas dans les navigateurs qui bloquent les témoins tiers, comme Safari et Brave. Pour en savoir plus sur la solution de contournement avec un Domaine personnalisé, consultez [Troubleshoot Renew Tokens When Using 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 les jetons d’actualisation sont utilisés, les nouveaux jetons sont récupérés au moyen d’un worker Web 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 vos [paramètres d’API dans le Auth0 Dashboard](https://manage.auth0.com/#/apis). De plus, le consentement de l’utilisateur [ne peut pas être ignoré sur « localhost »](/fr-CA/docs/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 obtenus au moyen d’une fenêtre contextuelle. Contrairement à `getTokenSilently`, cette méthode pour obtenir un jeton d’accès fonctionne dans les navigateurs où les témoins 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>

Vous pouvez transmettre des options à `getTokenSilently` pour obtenir un jeton d’accès avec une <Tooltip tip="Audience : identifiant unique de l’audience d’un jeton émis. Dans un jeton, elle est nommée aud; sa valeur contient l’ID d’une application (ID client) pour un ID Token ou d’une API (identifiant de l’API) pour un jeton d’accès." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=audience">audience</Tooltip> et un scope différents de ceux demandés au moment de l’authentification de l’utilisateur.

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Cela fonctionne uniquement si vous n’utilisez pas de jetons d’actualisation (`useRefreshTokens: false`), car un jeton d’actualisation est lié à l’audience et au scope précis demandés au moment 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 de 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 : justificatif destiné à l’application 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> 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 lancer 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="/fr-CA/docs/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](/fr-CA/docs/secure/tokens/access-tokens/validate-access-tokens)