Comment maintenir la connexion de l'utilisateur après un rafraîchissement dans auth0-js ?

Question

Authentication.js :

silentAuth() {
  return new Promise((resolve, reject) => {
    this.auth0.checkSession({}, (err, authResult) => {
      console.log("Auth result: " + authResult);
      if (err) return reject(err);
      this.setSession(authResult);
      resolve();
    });
  });
}

setSession(authResult, step) {
  this.idToken = authResult.idToken;
  this.profile = authResult.idTokenPayload;
  // set the time that the id token will expire at
  this.expiresAt = authResult.expiresIn * 1000 + new Date().getTime();
}

A l'intérieur du composant App :

async componentDidMount() {
  if (this.props.location.pathname === '/callback') return;
  try {
    await auth0Client.silentAuth();
    this.forceUpdate();
  } catch (err) {
    if (err.error === 'login_required') return;
    console.log("ERROR: " + err.error);
  }
}

Je m'attends à ce que, sauf si je me déconnecte de l'application, checkSession renvoie un authResult valide, mais il renvoie un résultat indéfini lorsque je rafraîchis la page ? Je veux donc que l'utilisateur reste connecté après le rafraîchissement ?

Answer 1

Que diriez-vous d'utiliser quelque chose comme localStorage pour stocker votre état ?

localStorage.setItem("loggedIn", true)

....

localStorage.getItem("loggedIn")

Answer 2

Votre authResult doit contenir différents champs, notamment :

• idToken
• access_token
• expiresAt
• ...

Je vous recommande de stocker ces valeurs dans votre LocalStorage ou SessionStorage lors de la connexion et de les récupérer lors de l'état de l'application. Je ne recommanderais pas de stocker loggedIn avec une valeur booléenne, car celle-ci peut avoir été modifiée en fonction de l'évolution de la situation. expiresAt attribut. Ainsi, un isAuthenticated dans votre AuthService qui détermine l'état réel actuel en fonction de la disponibilité de access_token y expiresAt dans le contexte de l'époque actuelle serait la manière appropriée de procéder.