Refreshing stale sessions

[johnantoni]

Hi, I’m using the React @okta/okta-react library and need a way to refresh the ACCESS_TOKEN if the user has gone away for some time or switched their wifi network?

Is there are similar method like this.props.auth.getAccessToken() to refresh the token?

[tom]

This happens automatically underneath the hood by the token manager if a refresh token (offline_access scope) is delivered to your react app. Let me know any questions!

[johnantoni]

offline_access scope? do i have to define that in the react router?

[tom]

I actually misspoke. Checking the code, the access_token will refresh silently without the offline_access scope.

Can you verify the behavior and let me know?

Thanks,
Tom

[johnantoni]

What I get is “token has expired”

  async componentDidMount() {
    await this.checkAuthentication();
    this.ready()
  }


async function checkAuthentication() {
  const authenticated = await this.props.auth.isAuthenticated();
  if (authenticated !== this.state.authenticated) {
    if (authenticated && !this.state.userinfo) {
      const userinfo = await this.props.auth.getUser();
      const accessToken = await this.props.auth.getAccessToken();

      const userlocal = await request
        .get(`/v1/accounts/${userinfo.sub}`)
        .set({ Authorization: `Bearer ${accessToken}` })
        .set('accept', 'json')
        .then(function(res) {
          return res.body
        });

      try {
        userinfo.role = userlocal.role || 'teacher'
        userinfo.lang = userlocal.lang || 'en'
      } catch (err) {
        console.log(err)
      }

      localStorage.setItem('lang', userinfo.lang);
      this.setState({
        authenticated,
        userinfo,
        userlocal
      });
    } else {
      // get lang, if not defined default it to en
      let lang = localStorage.getItem('lang') || 'en';
      this.setState({
        authenticated,
        lang: lang
      })
    }
  }
}

should i do something else on checkAuthentication to get the token?

[lboyette]

That’s pretty strange behavior, as @tom is right, the tokenManager should keep the tokens fresh for you. You mention users switching wifi networks. Is that one way to consistently reproduce it, or do you just wait until the token expires?

[johnantoni]

Yep, by switching wifi network it seems to cause the issue.

For fixing the “token has expired” issue what I could do is force a full page refresh and switch back to the login page via

window.location.href('/')

Do you know a better way to solve this?

Thanks

[johnantoni]

Figured that out, I was firing checkAuthenticated on componentDidMount and not componentDidUpdate which would fire if the user returns to the browser tab with the page loaded.