How to keep the user logged in after a Refresh in 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();
}

Inside the App component:

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

What I expect is that unless I logged out from the app, checkSession must return a valid authResult but it returns undefined when I refresh the page? So I want the user to keep logged in after Refresh?

Answer 1

How about using something like localStorage to store your state?

localStorage.setItem("loggedIn", true)

....

localStorage.getItem("loggedIn")

Answer 2

Your authResult should contain different fields including:

• idToken
• access_token
• expiresAt
• ...

I would recommmend to store those values in your LocalStorage or SessionStorage on login and retrieve it on application state. I would not recommend to store loggedIn with a boolean value since this might has changed according to the expiresAt attribute. So an isAuthenticated in your AuthService that determines the current real state according to the availability of access_token and expiresAt in the context of the current time would be the appropriate way to go.