App stuck on initial load after token times out

[OwenVey]

I'm submitting a:

• [X] Bug report
• [ ] Feature request
• [ ] Other (Describe below)

Current behavior

I've noticed that whenever I navigate to my app after ~30 minutes, it will perform the authorization and token calls when entering but doesn't seem to trigger some sort or refresh. The URL is accurate but the page component is not rendered. If I refresh the page, everything works fine. All of my pages have requiredAuth: true. Note: this doesn't have to do with the redirectUri as the app loads fine when it goes to Okta for login. It seems like it has to do with using cached information and performing some sort of auth check.

Expected behavior

When first entering my site it should authorize if need be and render the page component.

Minimal reproduction of the problem with instructions

Here is my OktaAuth setup:

export default new OktaAuth({
  issuer: window.env.OKTA_ISSUER,
  clientId: window.env.OKTA_CLIENT_ID,
  redirectUri: window.location.origin + '/implicit/callback',
  scopes: ['openid', 'profile', 'email', 'groups'],
  pkce: true,
});

This is how my routes are set up:

{
  path: '/',
  name: 'Home',
  component: () => import(/* webpackChunkName: "home" */ '../components/Home.vue'),
  meta: {
    requiresAuth: true,
  },
},

and I use the navigation guard as well:

router.beforeEach(navigationGuard);

This is how my network calls look when the bug occurs:

After reloading the page no authorize or token calls happen and my app loads fine.

Environment

• Package version: 5.0.1
• Vue version: 3.2.1
• Browser: Chrome
• OS: MacoS
• Node version (node -v): Not running locally
• Other: @okta/okta-auth-js 5.3.0

[shuowu]

@OwenVey Thanks for reporting the issue!

Internal Ref: OKTA-420066

[OwenVey]

Would also like to add that this issue did not occur when using @okta/okta-vue: 4.0.0 and @okta/okta-auth-js: 4.9.2

[denysoblohin-okta]

@OwenVey Do you have this issue with okta-vue 5.0.2?

[OwenVey]

Finally got around to upgrading my app to the latest versions of okta-vue and okta-auth-js. I'm using the following versions:

@okta/okta-auth-js - 6.2.0
@okta/okta-vue - 5.2.0

Still seeing a very similar bug as before.

Whenever I navigate to my website after having previously logging in and waiting ~30 min, a ton of /authorize and /token requests are made in some sort of stuck loop. I see a bunch of these warnings in the console:

The request being made look like so:

After refreshing the page, none of that happens and everything works fine. This error doesn't happen again until my token expires and I try to navigate back to my site.

[OwenVey]

Was able to get a much better stack trace for that error locally. Let me know if there are any more details I can provide, thank you!

[OwenVey]

@denysoblohin-okta has someone taken a look at this? Sorry, just wasn't sure if this got lost in the comments and if I should have created a new issue instead.

[oleksandrpravosudko-okta]

@OwenVey this was expected to be fixed by https://github.com/okta/okta-vue/pull/77. Are you able to replicate this issue using sample app?