[Question] How to manually refresh tokens

[jonsgreen]

Forgive me for my ignorance here as I am still trying to learn how this library works.

We are using your library in an application with a React front end and Rails api backend using doorkeeper with the token expiration set to 1 hour. We have a situation where sometimes the background token refresh fails to happen and so the stored token has become stale and so api requests to our backend fail. The token would refresh if requested but unfortunately it won't happen in the background automatically for up to an hour.

Is there a simple way to catch the api error and manually make a call to refresh the token using your library. I am seeing that the refreshAccessToken function is not exposed in the AuthContext and I am guessing that is intentional.

I am going to keep exploring on my own and will close this issue myself if I figure it out but I thought I would post it in case the maintainers of the library can save me some time and point me in the right direction.

Thanks!

[sebastianvitterso]

What we often do as a "hack" when testing new functionality, is to just set the token expiration to 0 (basically jan 1st 1970).

So you could write a simple function like:

function triggerTokenRefresh() {
  window.localStorage.setItem("ROCP_tokenExpire", 0)
}

Note that this won't make it trigger immediately, but at some time within the next 15 seconds.

---

Otherwise, as most other libraries, the main functionality is built to "depend" on other components working as intended, so I don't see us exposing the refresh-function any time soon.

[jonsgreen]

@sebastianvitterso thanks so much for responding to my question so quickly and converting this to a discussion.

My sense is that our scenario must be pretty common and so I am guessing we must be not configuring our application in a proper way and I am wondering if someone could point us in the right direction.

To explain again we are doing a get request on the root page of our React app. You need to be authenticated in order to access that page and so far we just check that there is a token in localStorage needed for the request. If someone has closed their tabs and then returns after the expiry time for the token then we get a 401. The token then refreshes and repairs itself in the next 15 seconds or so like you suggest but it creates a bad initial experience for the user.

I am curious how you or others would suggest handling this scenario more gracefully. Should we be checking ourselves whether the token is expired before making the api request? Is there some kind of configuration that we are missing?

I still feel like it would be helpful if we could "manually" refresh the token if we get a 401 response and not have to wait the interval for the refresh to happen in the background. We would be happy to contribute to a PR if that seems like it would be a valid, reasonable feature that the library wants to support.

Let me know if any of this is unclear. Thanks again for the help!

[jonsgreen]

Also, I am really curious about how I can publish the dist folder locally so that I can test changes locally to try things out.

[sebastianvitterso]

What do you mean by "publish the dist folder", in this context?
If you'd like to run the library locally, read the "Develop" section of the readme. It's fairly simple to get started. 😄

Good luck!

[soofstad]

You should verify that the token_expire, and refresh_token_expire values are returned from the auth server, and are set in localStorage.
And also you should implement the onRefreshTokenExpire-callback function.
Have a look in https://github.com/soofstad/react-oauth2-pkce?tab=readme-ov-file#configuration-parameters to see what parameters you might need to set.
To debug any further, it would be interesting to see the /token-responses you receive.