Describe the bug?

Hi,

I have an existing VueJS 3.0 project that has only one page and I am trying to integrate it with Okta using @okta/okta-vue ^5.5.0 and @okta/okta-auth-js ^7.0.0 libraries. I am using TypeScript and VueJs 3.0 Composition API. I am trying it with Okta hosted login.

I am trying to load the application after user logs in via Okta but the application is always stuck at /login/callback URI that comes with code and state query strings. I can see the user information with parseFromUrl() function. I can also see original URI with oktaAuth.getOriginalUri() function but the request never lands that page.

I have gone through multiple Okta documentation and found that Okta library must be sending user to originalURI after a successful login but it's not happening in my case.

What is expected to happen?

I would like user to hit http://localhost:8080/form/company/1234 and redirect to Okta in case user wasn't authenticated earlier and it seems to be working fine but user is not returning to this URL after a successful Okta login.

What is the actual behavior?

Here is my router configuration:-
`const router = createRouter({

history: createWebHistory("/form/company"),
routes: [

{ path: '/login/callback', component: LoginCallback },
{
  path: '/:id',
  name: 'My Form',
  component: () => import(/* webpackChunkName: "Form" */ '../components/Form.vue'),
  meta: {
    title: 'My Form',
    requiresAuth: true,
  },
},

],
})

router.beforeEach(navigationGuard);

export default router;;`

Okta Auth configuration

export const oktaAuth = new OktaAuth({ issuer: 'something', clientId: 'removed', redirectUri: window.location.origin + '/login/callback', pkce: true, })

Here is my App.vue component
`export default defineComponent({
name: 'app',
components: {Header, Spinner},

setup(context, { expose }) {
function login() {
this.$auth.signInWithRedirect({originalUri: '/'})
}
onMounted(async() => {
const auth = getCurrentInstance().appContext.app.config.globalProperties.$auth

  const stManager = oktaAuth.authStateManager;
//It's always null
  console.log("Is it authstate"+ oktaAuth.authStateManager.getPreviousAuthState())
  auth.authStateManager.subscribe((authState) => {
  // Always null
    console.log("Subscribed "+authState.isAuthenticated);
  });
  const idToken = await auth.token?.parseFromUrl()
  .then(async res => {
    const { idToken } = res.tokens;
    const { accessToken } = res.tokens;
    const { userInfo } = res.tokens;

    console.log(`Hi ${idToken.claims.email}!`);
    console.log(`accessToken ${accessToken}!`);
    // Always prints the intended Uri e.g. '/1234'
    console.log(oktaAuth.getOriginalUri());
   //Goes in in finite loop between Okta and /login/callback if I push to original URI
    //router.push({ path: oktaAuth.getOriginalUri() })
    if (oktaAuth.isLoginRedirect()) {
      try {
        await oktaAuth.handleLoginRedirect();
      } catch (e) {
        // log or display error details
      }
    }
  })
})

},
})`

Reproduction Steps?

Not sure if it's a bug but I might be missing something here.

SDK Versions

"dependencies": {
"@okta/okta-auth-js": "^7.0.0",
"@okta/okta-vue": "^5.5.0",
"@vue/compat": "^3.1.0",
"vue": "^3.2.31",
"vue-router": "^4.0.3",
"dotenv": "^16.0.3"
}

"devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.4.0",
"@typescript-eslint/parser": "^5.4.0",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-plugin-typescript": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"@vue/compiler-sfc": "^3.1.0",
"eslint": "^7.32.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.1.0",
"eslint-plugin-vue": "^9.7.0",
"typescript": "~4.5.5",
"vue-loader-v16": "npm:vue-loader@^16.1.2"
},

Execution Environment

Chrome, Mozilla Firefox

Additional Information?

No response