oidc-client: ServiceWorker errors: inactive tab, keepAlive

Issue and Steps to Reproduce

Log in to your app; Turn on ‘Preserve log’ setting of your js console; Switch to another tab for some minutes; Go back, see errors in console before you will be redirected to auth provider;

Versions

Current latest;

Screenshots

Screenshot 2022-09-15 at 12 31 13

For better search posting here are errors:

initWorker.js:105          GET http://localhost:3000/OidcKeepAliveServiceWorker.json net::ERR_FAILED

bundle.js:23846          Uncaught (in promise) TypeError: Failed to fetch
    at keepAlive

OidcServiceWorker.js:262 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'access_token')
    at handleFetch (OidcServiceWorker.js:262:80)

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 37 (20 by maintainers)

Most upvoted comments

Hi @MidoAhmed , @chaimabenkaddour , @beanovar, The version 6.10.16, now continue fetches refresh token in background.

It work also with mobile and laptop back after a sleep mode.

guillaume-chervet on Nov 14, 2022

Thanks. I’m curious where you found that chrome will not give enough time for http fetches to successfully complete when the tab is in the background ? I’ve done digging and all I can find is that chrome will throttle your timers to only execute every minute (even if they are scheduled to run more frequently) https://developer.chrome.com/blog/timer-throttling-in-chrome-88/

I can’t find anything that describes the amount of time you have to execute your code once the timer does trigger is limited ?

beanovar on Sep 28, 2022

Hopefully we are talking about the same line, it’s this one here: https://github.com/AxaGuilDEv/react-oidc/blob/bbb63160f255eba573b14e88453ad4d7fe24f259/packages/react/src/oidc/vanilla/oidc.ts#L946

My understanding is that timers are simply throttled for background tabs, but fetch requests should still work. Is it ok to provide an option to override this and allow it to try and continue fetching tokens when the document is hidden? I would be quite interested to see the behaviour of that…

beanovar on Sep 24, 2022

Hi @guillaume-chervet - related to this conversation, our application has the need to continue polling the server even when the tab is in the background (a type of heartbeat). I’ve noticed the lib skips fetching a new token on token expiry if document.hidden is true. Is there a way to at least put an option in to allow the token to continually refresh in the background, even if the tab / page is not visible? It would probably also fix the issues above where you come back to a tab and the token is now expired. Thanks.

beanovar on Sep 24, 2022

yeah @inomn thank you, I am seraching how to fix this. it is a magic error 😕

guillaume-chervet on Sep 23, 2022

Hi @tielushko , you may use the fetch provided by useFetch hook given by react oidc. It is compatible with react query and will wait for tokens to be sync before making the request.

guillaume-chervet on Sep 20, 2022

We also got the same error and we had to disable service workers for our project.

Now we have a problem with the silent login being slow when the tab becomes active again and the API calls gets a expired token from the access token hook.

@guillaume-chervet have you considered adding a promise function like getAccessTokenSilently from Auth0’s sdk?

mlsmaycon on Sep 18, 2022