Okta refresh token not working. Expired and renew events not triggering

[igloo12]

Describe the bug

I am trying to get the refresh token to trigger automatically. I am using okta-auth-js with the okta-react library. I am listening to the token events added, error, expired, renewed. The only event that fires is the added event.

 new OktaAuth({
        services: {
            autoRenew: true,
            autoRemove: true,
            syncStorage: true,
        },
        redirectUri: window.location.origin + '/login/callback'
    })

    oktaAuth.tokenManager.on("added", (key, newToken) => {
        console.log(`token added`)

        if ('accessToken' in newToken) {
            updateToken(newToken.accessToken);
        }
    })

    oktaAuth.tokenManager.on("error", (error: TokenManagerError) => {
        console.log(JSON.stringify(error))
    })
    oktaAuth.tokenManager.on("expired", (key, token) => {
        console.log("Okta token has expired")
    })

    oktaAuth.tokenManager.on("renewed", (key, newToken) => {
        console.log(`renewed token`)
        if ('accessToken' in newToken) {
            updateToken(newToken.accessToken);
        }
    })

Reproduction Steps?

Sign in and wait for the token to expire. No event is triggered

SDK Versions

System:
OS: macOS 13.4.1
CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
Memory: 719.52 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.2.0 - /usr/local/bin/node
npm: 9.6.6 - /usr/local/bin/npm
Browsers:
Chrome: 114.0.5735.198
Safari: 16.5.2
npmPackages:
@okta/okta-react: ^6.7.0 => 6.7.0

Additional Information?

No response

[jaredperreault-okta]

What version of @okta/okta-auth-js are you using?

Can you confirm you're only constructing a single oktaAuth instance?

[igloo12]

I am only constructing one instance of oktaAuth.

I was using the prepacked okta-js version in okta-react 7.0.0 but I have tried with the latest 7.3.1 too and it doesn't work

[shuowu-okta]

@igloo12 Can you share more information about how you observe token expiration happen? You can use expireearlyseconds config to observe token expiration (DEV mode only).

Internal Ref: OKTA-631863

[igloo12]

@shuowu-okta It seems the issue is when the App is background. When I set the expireearlyseconds I see the token refresh as expected. But if I leave the app minimized and come back later the events don't fire and the token is expired

[fseee]

We faced similar issue, since it seems that browser puts background/inactive tabs in a sleep mode after certain time.
We solved it by using a dummy webworker which keeps active the tab.

[pream1234]

We are facing the similar issue, token auto renew is not happening when the user minimize the tab. Also the when user stays in same path its not getting renewed. is there any fix for this ?

[ugandhar1995]

Hi @fseee , we are also facing same issue in angular application, like when the tab is minimized or the screen is locked and when we come back token renewal is not happening. And you have mentioned about web workers, can you please share your code like how you integrated the web worker in your app, so that it would be helpful.. or any other solution is also would be appreciated. Thanks in advance.

[jaredperreault-okta]

@ugandhar1995 Can you paste your versions and your OktaAuth config (please omit sensitive fields)? I'm curious if you're using the autoRenew service or listening to the expired events manually

[ugandhar1995]

sure @jaredperreault-okta
"@okta/okta-auth-js": "^6.6.2",

okta: {
pkce: true,
scopes: ['openid', 'profile', 'groups', 'offline_access'],
apitoken: '',
allowedOrigins: ['http://localhost'],
cookieKeys: ['okta-oauth-state', 'okta-oauth-nonce'],
oktaLoginReDirectionUrl: '/dashboard',
oktaReDirectionUrl: '/auth/callback',
localStorageKeys: ['okta-token-storage', 'okta-cache-storage'],
postLogoutRedirectUri: '/login',
oktaLogoutReDirectionUrl: '/',
oktaClientId: envVariableKey(oktaclient),
oktaIssuer: 'https://************.oktapreview.com',
oktaApiToken: '',
},
tokenManager: {
autoRenew: true,
syncStorage: true,
autoRemove: true,
storage: 'localStorage',
},
This is the config I use in our angular application I am not using any service here, I set autorenew to true. listening to renewed event manually, to capture logs of new token.
this.oktaAuth.tokenManager.on('renewed', (key, newToken: any, _) => {
console.log(newToken)
}

[jaredperreault-okta]

In version 7.6.0 (#1512) of okta-auth-js, I added a new service to help alleviate this issue. It uses the Page Visibility API and will attempt a token refresh when a tab comes active after a period of unfocus. This hopefully will be a simpler solution than adding Web Workers

[fseee]

@ugandhar1995 we got rid of the web worker since we solved the issue by using the session.refesh() method before requesting new tokens.
Basically we listened on the tokenmanager.on('expired') event, triggering session.refresh() method and on the response we requested new tokens. It worked fine with no issues.
Once we get rid of above session.refresh() method since relies on third party cookies and since this method was requested to be avoided in the documentation, we started using the brand new method getOrRenew but the issue you mentioned started come back again randomly.

[ugandhar1995]

In version 7.6.0 (#1512) of okta-auth-js, I added a new service to help alleviate this issue. It uses the Page Visibility API and will attempt a token refresh when a tab comes active after a period of unfocus. This hopefully will be a simpler solution than adding Web Workers

Thanks for your suggestion, will try it out and post my experience here, since we face this issue when working in multiple tabs. Hope this helps our problem.

[jaredperreault-okta]

@fseee Are you using refresh tokens (aka offline_access)?

[fseee]

@jaredperreault-okta yes

[ksproyectos]

@ugandhar1995 we got rid of the web worker since we solved the issue by using the session.refesh() method before requesting new tokens. Basically we listened on the tokenmanager.on('expired') event, triggering session.refresh() method and on the response we requested new tokens. It worked fine with no issues. Once we get rid of above session.refresh() method since relies on third party cookies and since this method was requested to be avoided in the documentation, we started using the brand new method getOrRenew but the issue you mentioned started come back again randomly.

If you are using session api to get it work, consider to move to sessionStorage because session api uses thirdparty cookies and some browser could start to block those cookies.

[jaredperreault-okta]

I'm not sure I see the correlation between sessionStorage and 3p cookies. I recommend using localStorage (the SDK's default) in almost all cases. Using a non-shared storage location can cause odd UX when using multiple tabs of the same app

And mitigating 3p cookie concerns can be done by using a Custom Domain, so your Okta IDP and your web app reside on the same domain (or etld+1). But your point about avoiding 3p cookies is a one good one