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

> Décrit le flux de travail à l’aide du SDK auth0-spa-js pour gérer les sessions multisites.

# Gérer les sessions multisites avec le SDK Auth0

<div id="short-lived-sessions">
  ## Sessions de courte durée
</div>

Ce processus montre comment le SDK auth0-spa-js doit être intégré pour prendre en charge la gestion de session multisite. Dans ce scénario, on suppose que le délai d’inactivité du <Tooltip tip="Single Sign-On (SSO) : service qui, après qu’un utilisateur s’est connecté à une application, connecte automatiquement cet utilisateur aux autres applications." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=SSO">SSO</Tooltip> du tenant est réglé à 300 secondes, et que l’expiration du <Tooltip tip="ID Token : justificatif destiné 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 chaque application SPA est réglée à 150 secondes. Cela correspond à une session « de courte durée ».

<div id="sdk-features">
  ### Fonctionnalités du SDK
</div>

<div id="pkce-flow">
  #### Flux PKCE
</div>

Pour toutes les méthodes permettant d’obtenir un ID Token ou 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="/docs/fr-ca/glossary?term=Access+Token">jeton d’accès</Tooltip>, le SDK prend en charge toute la complexité de la clé de preuve pour l’échange de code. Aucune étape ni configuration supplémentaire n’est nécessaire pour que cela fonctionne.

<div id="deep-linking">
  #### Liens directs
</div>

Pour améliorer l’expérience utilisateur, le SDK inclut un paramètre `appState` pour la méthode `loginWithRedirect()`. Les renseignements sur l’application en cours sont inclus dans la requête envoyée au serveur Auth et sont renvoyés après une authentification réussie, ce qui assure une continuation fluide du parcours utilisateur.

Dans le Quickstart, le composant `PrivateRoute` définit le paramètre state `targetUrl`, et la fonction `onRedirectCallback` de `index.js` récupère cette valeur pour rediriger l’utilisateur lorsque l’authentification est terminée.

<div id="token-storage">
  #### Stockage des jetons
</div>

Afin de stocker les jetons renvoyés de la manière la plus sécuritaire possible, tous les jetons sont placés dans un cache local. Les ID Token et jetons d’accès sont stockés par paires, et les valeurs de <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 (Client ID) pour un ID Token ou d’une API (identifiant d’API) pour un jeton d’accès." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=audience">l’audience</Tooltip> et du scope servent à récupérer les jetons au besoin.

De plus, les jetons mis en cache sont supprimés dès que l’ID Token ou le jeton d’accès expire, de sorte que si un jeton se trouve dans le cache, on peut supposer qu’il est encore valide.

<div id="call-apis">
  #### Appeler des API
</div>

La méthode `getTokenSilently()` utilise d’abord le cache de jetons et, si aucun jeton n’y est stocké, lance un iframe invisible pour en récupérer un nouveau. À cette fin, toutes les requêtes aux API peuvent utiliser cette méthode pour créer l’en-tête du bearer token, sans logique supplémentaire pour gérer les jetons expirés.

Dans le Quickstart, la vue `ExternalService` effectue une requête vers l’API express à l’aide de cette fonctionnalité.

<div id="warn-users-to-continue-their-sessions">
  #### Avertissez les utilisateurs pour qu’ils poursuivent leur session
</div>

Lorsqu’un utilisateur n’a effectué aucune action susceptible de mettre à jour la session Auth0, Auth0 recommande d’afficher un avertissement lui demandant de choisir explicitement de poursuivre sa session.

Cette approche permet à la session de devenir inactive si l’utilisateur n’est plus présent, tout en offrant un moyen de déclencher l’actualisation silencieuse du jeton afin qu’il puisse poursuivre sa session sans avoir à saisir de nouveau ses informations d’identification.

Pour en savoir plus sur les délais d’inactivité et les fenêtres modales d’expiration, consultez [les URL de logout propres à l’application](/docs/fr-ca/manage-users/sessions/configure-session-lifetime-settings).

<div id="example-workflow">
  ### Exemple de flux de travail
</div>

1. Authentification initiale
2. Maintien de la session Auth0
3. SSO transparent
4. Demander à l’utilisateur de prolonger la session
5. L’utilisateur se déconnecte explicitement de l’application
6. L’utilisateur revient à l’application initiale après s’être déconnecté

<div id="initial-authentication">
  #### Authentification initiale
</div>

1. Un nouvel onglet s’ouvre
2. Envoi d’une requête de connexion
3. L’utilisateur saisit ses identifiants
4. Le cookie SSO (avec date d’expiration) est défini
5. Échange de jetons effectué

<Frame>
  <img src="https://mintcdn.com/translations/Dcx0M11uuptU53TX/docs/images/cdy7uua7fh8z/2voC3vs36CJJlpDu4xl06Y/310fe5afe79ad7d083833baa2690dfa4/initial-authentication.png?fit=max&auto=format&n=Dcx0M11uuptU53TX&q=85&s=4f51098c0b8f844858d9c464393d96e3" alt="Schéma du flux d’authentification initiale" width="1500" height="1346" data-path="docs/images/cdy7uua7fh8z/2voC3vs36CJJlpDu4xl06Y/310fe5afe79ad7d083833baa2690dfa4/initial-authentication.png" />
</Frame>

<div id="maintain-auth0-session">
  #### Maintenir la session Auth0
</div>

1. L’utilisateur demande des données à une ressource protégée
2. `getTokenSilently()` appelé
3. Ressource récupérée
4. L’utilisateur met à jour des données dans la ressource protégée
5. `getTokenSilently()` appelé

   1. Iframe ouverte
   2. Échange de jeton effectué
6. La ressource est mise à jour

<Frame>
  <img src="https://mintcdn.com/translations/c0RQ9V0YAcT0-8l5/docs/images/cdy7uua7fh8z/7CI29ouvhuJ4TFC1G2C5n8/4d2bd0c9372a6cc16e75fc76f438a0bd/maintain-auth0-session.png?fit=max&auto=format&n=c0RQ9V0YAcT0-8l5&q=85&s=0b4232fbfdf4359e2290b8100a72258e" alt="Schéma du maintien de la session" width="1500" height="1839" data-path="docs/images/cdy7uua7fh8z/7CI29ouvhuJ4TFC1G2C5n8/4d2bd0c9372a6cc16e75fc76f438a0bd/maintain-auth0-session.png" />
</Frame>

<div id="seamless-sso">
  #### SSO transparent
</div>

1. L'utilisateur accède à une route privée
2. Vérifier avec `isAuthenticated()`
3. Si faux, `loginWithRedirect()`

<Frame>
  <img src="https://mintcdn.com/translations/3nS3prIggmJG9TUI/docs/images/cdy7uua7fh8z/38heJlnN0letWMVhpTtXad/4d4127150fb818522ea29eea28ccc00e/seamless-sso.png?fit=max&auto=format&n=3nS3prIggmJG9TUI&q=85&s=5be4dbdc1a3e26c45f8195c092ec3a59" alt="Schéma du flux SSO transparent pour les sessions" width="1500" height="1633" data-path="docs/images/cdy7uua7fh8z/38heJlnN0letWMVhpTtXad/4d4127150fb818522ea29eea28ccc00e/seamless-sso.png" />
</Frame>

<div id="prompt-user-to-extend-session">
  #### Demander à l’utilisateur de prolonger la session
</div>

1. Au bout de 240 secondes, demander à l’utilisateur de garder la session active au moyen d’une fenêtre modale affichée pendant 60 secondes
2. S’il choisit de garder la session active, `getTokenSilently()`

<Frame>
  <img src="https://mintcdn.com/translations/6GE5Z24GDCZehiJ9/docs/images/cdy7uua7fh8z/6kH2G3oclCfSudwd0hJEUM/70651da37771c9945c5a34dcad409d9f/prompt-user-extend-session.png?fit=max&auto=format&n=6GE5Z24GDCZehiJ9&q=85&s=82396b75a3239be57569f04f465b2d6f" alt="Schéma montrant comment inviter un utilisateur à garder une session active" width="1500" height="1870" data-path="docs/images/cdy7uua7fh8z/6kH2G3oclCfSudwd0hJEUM/70651da37771c9945c5a34dcad409d9f/prompt-user-extend-session.png" />
</Frame>

<div id="user-explicitly-logs-out-of-application">
  #### L’utilisateur se déconnecte explicitement de l’application
</div>

1. L’utilisateur choisit de se déconnecter
2. `logout()` est appelé

   1. Vider le cache de jetons
   2. Envoyer une requête à `/oidc/logout`
   3. Effacer le cookie SSO et supprimer les données de session
   4. Rediriger l’utilisateur vers la page de déconnexion

<Frame>
  <img src="https://mintcdn.com/translations/pvjQqAy3EB2TK6NP/docs/images/cdy7uua7fh8z/4b55FKM2vZBoskXTPY4nxs/1a9e69437677f2cfac9a3d8e6bff7ffe/user-explicitly-logs-out-of-app.png?fit=max&auto=format&n=pvjQqAy3EB2TK6NP&q=85&s=c91d63541b687a25cc827afb2c6fa003" alt="Schéma d’un utilisateur qui se déconnecte" width="1500" height="1194" data-path="docs/images/cdy7uua7fh8z/4b55FKM2vZBoskXTPY4nxs/1a9e69437677f2cfac9a3d8e6bff7ffe/user-explicitly-logs-out-of-app.png" />
</Frame>

<div id="user-returns-to-initial-application-after-logging-out">
  #### L’utilisateur revient à l’application initiale après s’être déconnecté
</div>

1. L’utilisateur demande des données à une ressource protégée
2. `getTokenSilently()` est appelé
3. Comportement variable selon l’application

<Frame>
  <img src="https://mintcdn.com/translations/3nS3prIggmJG9TUI/docs/images/cdy7uua7fh8z/3geXGwsXkIgFkwopoGoLMx/01685b6b8e8473c6ce6f26e59b402cf3/user-returns-to-initial-app.png?fit=max&auto=format&n=3nS3prIggmJG9TUI&q=85&s=dc23f4e3b518b9b980cfd37daa05f34e" alt="Schéma de l’utilisateur revenant à l’application après s’être déconnecté" width="1500" height="1046" data-path="docs/images/cdy7uua7fh8z/3geXGwsXkIgFkwopoGoLMx/01685b6b8e8473c6ce6f26e59b402cf3/user-returns-to-initial-app.png" />
</Frame>

<div id="long-lived-sessions">
  ## Sessions de longue durée
</div>

Auth0 prend en charge les sessions de longue durée pour les forfaits Enterprise. Avec les sessions de longue durée, vous pouvez configurer des limites de session pouvant aller jusqu’à 100 jours d’inactivité (délai d’expiration d’inactivité) et jusqu’à un an de durée totale (délai d’expiration absolu). Si vos échéances sont trimestrielles, mensuelles ou autres, cela vous permet de réduire les irritants pour les utilisateurs finaux et d’offrir l’accès à du contenu et à des capacités à faible risque. De plus, les entreprises de médias peuvent tirer parti des sessions de longue durée pour améliorer l’expérience utilisateur grâce à un accès fluide au contenu. Vous pouvez aussi choisir entre les sessions de longue durée et la validation du mot de passe selon vos exigences en matière d’expérience utilisateur et de sécurité.

Les détails du workflow changeraient dans le cas d’une session de longue durée, où la session de l’application serait très probablement plus courte que la session [d’authentification unique (SSO)](/docs/fr-ca/authenticate/single-sign-on).

Pour en savoir plus, consultez [Configurer les limites de durée de vie de la session](/docs/fr-ca/manage-users/sessions/configure-session-lifetime-settings) et [Mettre à jour la durée de vie du jeton d’accès](/docs/fr-ca/secure/tokens/access-tokens/update-access-token-lifetime).