Auto refreshing of tokens doesn't work with Vue3

[Ancient-Dragon]

Describe the bug

In @Okta/okta-vue@3 our users never get an expired token being sent to the backend but when using the newer library with vue3 they are consistently getting time outs. I'm not sure if this was functionality that was removed or functionality that is broken but it seems like the tokens are not being auto refreshed. Both libraries are setup with the same config and run from the same domain but under different URLs.

Reproduction Steps?

We have an okta application setup with a 15 minute token window, when we login to our UI and leave it for a short period or even use it, after a while when we call our backend with our token it checks it and returns a 401 (i.e. it was not a valid token any longer)

SDK Versions

New UI: "@okta/okta-auth-js": "^7.2.0", "@okta/okta-vue": "^5.6.0",

Old UI: "@okta/okta-auth-js": "6.6.0", "@okta/okta-vue": "3.1.0",

Additional Information

No response

[jaredperreault-okta]

when using the newer library with vue3

What versions were you using prior?

Can you paste your OktaAuth config? (please obfuscate sensitive fields)

we call our backend with our token it checks it and returns a 401

Are you sure the token is expired? Could there have been a change to your backend causing a configuration mismatch?

[Ancient-Dragon]

We use the same backend for both UI's at the moment. Sorry I was literally just thinking I needed to add the old one. I have updated the description.

New UI config:

const oktaAuth = new OktaAuth({
  clientId: import.meta.env.VITE_OKTA_CLIENT_ID,
  issuer: import.meta.env.VITE_OKTA_ISSUER,
  redirectUri: `${window.location.origin}${import.meta.env.VITE_PATH || '/'}login/callback`,
  scopes: ['openid', 'profile', 'email', 'offline_access'],
});
  // https://github.com/okta/okta-vue/issues/121
  app.use(OktaVue, {
    oktaAuth,
  } as any);

Old UI:

const oktaAuth = new OktaAuth({
  clientId: process.env.VUE_APP_OKTA_CLIENT_ID,
  issuer: process.env.VUE_APP_OKTA_ISSUER,
  redirectUri: `${window.location.origin}/login/callback`,
  scopes: ['openid', 'profile', 'email', 'offline_access'],
});
oktaAuth.start();
Vue.use(OktaVue, { oktaAuth });

Yes we are sure the token has expired the auth0 jwt library is giving us the following error: The Token has expired on 2023-05-03T12:34:03Z. which is logged at: 2023-05-03T12:35:56.075091Z

[denysoblohin-okta]

@Ancient-Dragon

• Please try upgrading to @okta/okta-auth-js 7.3.0, it has a fix for LeaderElectionService that can be source of your issue.
• If you call oktaAuth.start() manually in new UI code, does the issue go away?
• Do you use Composition API?

[Ancient-Dragon]

Thanks we will try that.

We haven't tried this, the only reason we added this in the old code was because it was recommended to us by your support team as we were getting black screens in our old UI as we had to use lower versions of okta-auth-js (since officially there is no support for vue2 anymore & okta-vue in theory only allowed okta-auth-js 5)

Yes, we use the composition api :)

[Ancient-Dragon]

Found out there was something going on with the library we were using as well. After updating the library in both old and new UI's and changing some logic with the library we were using it now refreshes and I can see the expired events being emitted.

Thanks for the help!

[jaredperreault-okta]

@Ancient-Dragon Could you provide some more details for our own records?

changing some logic with the library we were using

Does this refer to @okta/okta-auth-js?

[Ancient-Dragon]

Ah yes sorry!

No this was the library that was adding our Bearer token to the request, it was caching the token occasionally.