> ## Documentation Index
> Fetch the complete documentation index at: https://docs-staging-actions-triggers-prototype.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Trousse SDK Auth0 pour les applications à page unique (SPA)

> Trousse SDK Auth0 pour les applications à page unique utilisant le flux Autorisation de codes d’autorisation 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) + "*****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 trousse SDK Auth0 pour les applications à page unique (SPA) est une nouvelle bibliothèque JavaScript pour la implémentation de l’authentification et de l’autorisation dans les applications à page unique (SPA) avec Auth0. Il fournit une API de haut niveau et gère une grande partie des détails afin que vous puissiez sécuriser les SPA en utilisant les meilleures pratiques, tout en écrivant moins de code.

La trousse SDK Auth0 pour les applications à page unique (SPA) gère les détails de l’autorisation et du protocole, l’expiration et le renouvellement des jetons, ainsi que le stockage et la mise en cache des jetons. En arrière-plan, il met en œuvre la [connexion universelle](/docs/fr-ca/universal-login) et le [flux d’octroi de code d’autorisation 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 de la nouvelle trousse SDK pour JavaScript, veuillez [lire la FAQ](https://github.com/auth0/auth0-spa-js/blob/master/FAQ.md) pour voir si votre problème y est traité.

## Installation

Vous avez plusieurs options pour utiliser la trousse SDK Auth0 pour les applications à page unique (SPA) dans votre projet :

* Depuis le CDN : `<script src="https://cdn.auth0.com/js/auth0-spa-js/2.0/auth0-spa-js.production.js"></script>`. Pour plus d’informations, lisez 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`

## Premiers pas

### Créer le client

Tout d’abord, vous devez 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 en utilisant soit la méthode async/await, soit les promesses. Vous ne devez créer qu’une seule instance du client.

L’utilisation de `createAuth0Client` permet de réaliser plusieurs choses automatiquement :

* Elle crée une instance de `Auth0Client`.
* Elle appelle `getTokenSilently` pour actualiser la session de l’utilisateur.
* Elle supprime toutes les erreurs provenant de `getTokenSilently`, à l’exception de `login_required`.

#### Utiliser async/await

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

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

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

#### Utiliser les promesses

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

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

Vous pouvez également créer le client directement en utilisant le constructeur `Auth0Client`. Cela peut être utile si vous souhaitez :

* Contourner l’appel à `getTokenSilently` lors de l’initialisation.
* Effectuer une gestion personnalisée des erreurs.
* Initialiser la trousse 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="javascript" />

### Se connecter et obtenir des informations sur l’utilisateur

Ensuite, créez un bouton sur lequel les utilisateurs peuvent cliquer pour commencer à se connecter :

`<button id="login">Cliquer pour se connecter</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()`.

#### Utiliser async/await

```javascript lines theme={null}
document.getElementById('login').addEventListener('click', async () => {
  await auth0.loginWithRedirect({
    authorizationParams: {
      redirect_uri: 'http://localhost:3000/'
    }
  });
  //logged in. you can get the user profile like this:
  const user = await auth0.getUser();
  console.log(user);
});
```

#### Utiliser les promesses

```javascript lines theme={null}
document.getElementById('login').addEventListener('click', () => {
  auth0.loginWithRedirect({
    authorizationParams: {
      redirect_uri: 'http://localhost:3000/'
    }
  }).then(token => {
    //logged in. you can get the user profile like this:
    auth0.getUser().then(user => {
      console.log(user);
    });
  });
});
```

### Appeler une API

Pour appeler votre API, commencez par obtenir le jeton d’accès de l’utilisateur. Utilisez ensuite le jeton d’accès dans votre demande. Dans cet exemple, la méthode `getTokenSilently` est utilisée pour récupérer le jeton d’accès :

`<button id="callApi">Appeler une API</button>`

#### Utiliser async/await

```javascript 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);
});
```

#### Utiliser les promesses

```javascript 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);
    });
});
```

### Déconnexion

Ajoutez un bouton sur lequel les utilisateurs peuvent cliquer pour se déconnecter :

`<button id="logout">Déconnexion</button>`

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

### Modifier les options de stockage

Par défaut, la trousse SDK Auth0 pour les applications à page unique (SPA) stocke les jetons en mémoire. Toutefois, cette méthode ne permet pas d’assurer la persistance de l’information entre les actualisations de pages et les onglets du navigateur. Au lieu de cela, vous pouvez choisir de stocker les jetons dans le stockage local en définissant la propriété `cacheLocation` sur `localstorage` lors de l’initialisation de la trousse SDK. Cela peut contribuer à atténuer certains des effets de la technologie de protection de la vie privée des navigateurs qui empêche l’accès au témoin de session Auth0 en stockant les jetons d’accès plus longtemps.

<Warning>
  Le stockage des jetons dans la mémoire locale du navigateur assure la persistance des jetons à travers les actualisations de pages et les onglets du navigateur. Toutefois, si un attaquant parvient à exécuter le JavaScript dans l’application Web monopage (SPA) à l’aide des scripts intersites (XSS), il peut récupérer les jetons stockés dans la mémoire locale. La vulnérabilité menant à une attaque XSS réussie peut se trouver soit dans le code source de l’application Web monopage (SPA), soit dans tout code JavaScript tiers (tel que bootstrap, jQuery ou Google Analytics) inclus dans la SPA.

  Informez-vous davantage sur la question du [Stockage de 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="javascript" />

### Utilisation de jetons d’actualisation rotatifs

La trousse SDK Auth0 pour les applications à page unique (SPA) pour application monopage peut être configurée pour utiliser une [rotation des jetons d’actualisation](/docs/fr-ca/secure/tokens/refresh-tokens/refresh-token-rotation) afin d’obtenir silencieusement de nouveaux jetons d’accès. Ils peuvent être utilisés pour contourner la technologie de confidentialité du navigateur qui empêche l’accès au témoin de session Auth0 lors d’une authentification silencieuse, ainsi que pour fournir une détection de réutilisation intégrée.

Pour ce faire, configurez la trousse SDK en définissant `useRefreshTokens` sur `true` lors de l’initialisation :

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

// Request a new access token using a refresh token
const token = await auth0.getTokenSilently();`;

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

Les jetons d’actualisation devront également être [configurés pour votre locataire](/docs/fr-ca/secure/tokens/refresh-tokens/configure-refresh-token-rotation) avant de pouvoir être utilisés dans votre application monopage (SPA).

Une fois configuré, la trousse SDK demandera la permission `offline_access` pendant l’étape d’autorisation. En outre, `getTokenSilently` appellera alors le point de terminaison `/oauth/token` directement pour échanger des jetons d’actualisation contre des jetons d’accès.
Le SDK respectera la configuration de stockage lors du stockage des jetons d’actualisation. Si le SDK a été configuré en utilisant le mécanisme de stockage en mémoire par défaut, les jetons d’actualisation seront perdus lors de l’actualisation de la page.

## Utilisation

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

### Connexion avec redirection

Redirigez vers le point de terminaison `/authorize` à Auth0, en démarrant le flux de [connexion universelle](/docs/fr-ca/universal-login) :

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

### Connexion avec fenêtre contextuelle

Utilisez une fenêtre contextuelle pour vous connecter à l’aide de la page de Connexion universelle :

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

Si l’utilisateur prend plus de temps que le délai par défaut de 60 secondes pour compléter le flux d’authentification, l’authentification sera interrompue et vous devrez gérer l’erreur dans votre code :

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

```javascript lines theme={null}
$('#loginPopup').click(async () => {
  try {
    await auth0.loginWithPopup();
  } catch {error}
  if (error instanceof auth0.PopupTimeoutError) {
    // custom logic to inform user to retry
    error.popup.close();
  }
});
```

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

```javascript 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) {
    // custom logic to inform user to retry
    error.popup.close();
  }
});
```

### Connexion avec rappel de redirection

Lorsque le navigateur est redirigé d’Auth0 vers votre application monopage, `handleRedirectCallback` doit être appelé afin de compléter le flux de connexion :

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

### Obtenir un jeton d’accès sans interaction

Obtenir un nouveau jeton d’accès silencieusement en utilisant une iframe cachée et `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 de la trousse SDK.

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Obtenir un jeton d’accès en mode silencieux sans utiliser de jetons d’actualisation ne fonctionnera pas dans les navigateurs qui bloquent les témoins tiers, tels que Safari et Brave. Pour en savoir plus sur la solution de contournement des domaines personnalisés, consultez [Comment renouveler les jetons dans Safari](/docs/fr-ca/troubleshoot/authentication-issues/renew-tokens-when-using-safari).
</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 à l’aide d’un agent web sur les navigateurs pris en charge :

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

La méthode `getTokenSilently()` nécessite que **Autoriser le contournement du consentement utilisateur** soit activé dans vos [Paramètres API dans Dashboard](https://manage.auth0.com/#/apis). En outre, 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).

### Obtenir un jeton d’accès avec une fenêtre contextuelle

Les jetons d’accès peuvent également être récupérés à l’aide d’une fenêtre contextuelle. Contrairement à `getTokenSilently`, cette méthode de récupération d’un jeton d’accès fonctionnera dans les navigateurs dont les témoins tiers sont bloqués par défaut :

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

### Obtenir un jeton d’accès pour une audience différente

Des options peuvent être transmises à `getTokenSilently` pour obtenir un jeton d’accès dont l'<Tooltip data-tooltip-id="react-containers-DefinitionTooltip-0" tip="">audience</Tooltip> et la permission diffèrent de ceux demandés au moment de l’authentification de l’utilisateur.

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Ne fonctionne que si vous n’utilisez pas de jetons d’actualisation (`useRefreshTokens:false`), car un jeton d’actualisation est lié à l'audience et à la permission spécifiques demandés lors de l’authentification de l’utilisateur.
</Callout>

```javascript 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);
});
```

### Obtenir l’utilisateur

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

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

### Obtenir des demandes de jetons d’ID

Vous pouvez obtenir les demandes du jeton d’ID de l’utilisateur authentifié en appelant la méthode `getIdTokenClaims` :

```javascript lines theme={null}
$('#getIdTokenClaims').click(async () => {
  const claims = await auth0.getIdTokenClaims();
  // if you need the raw id_token, you can access it
  // using the __raw property
  const id_token = claims.__raw;
});
```

### Déconnexion (par défaut)

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

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

### Déconnexion sans ID client

Vous pouvez lancer une action de déconnexion sans spécifier d’ID client en appelant la méthode `logout` et en incluant `clientId:null` :

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

## En savoir plus

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