React expired token after long time

So we’ve run into an issue where if our users leave our react app open for a really long time. It seems that they land up having an expired token in local storage which doesn’t update till they refresh the page. We validate all the requests in our API using the introspection request and as the token we receive is expired the requests fail.

How do we go about refreshing the token without having the user reload the page?

React is a different beast, so not sure it’s fully applicable to your situation, but in vanilla okta-auth-js there is a way to subscribe to expiration event and in a callback you can do refresh of your access token w/o user re-entering their Okta credentials. I think you can still do the same inside your react app.

I think in theory we are meant to have that but we run into a case where it doesn’t seem to work. I’ll do some more reading of the docs but from my understanding that should just happen with the hooks we are using

I recalled seeing an issue opened on GitHub about the refresh (https://github.com/okta/okta-oidc-js/issues/892) Try to read and check few other issues mentioned there. One of them might be similar and people found a workaround. Maybe you’ll find a solution there

Auth JS TokenManager has autoRenew property which when set to true will attempt to renew tokens before they expire. Auto renew should pass as long as there is active okta session.