VueJS Logout Not Working. Immediately Logged back in on page refresh

[jeremy_wischusen]

I am following this guide https://developer.okta.com/quickstart-fragments/vue/default-example/ and this sample application https://github.com/okta/samples-js-vue/tree/master/okta-hosted-login.

I used to be using my own developer account for this and it seemed to work with that, but recently I had to switch over to my organizations dev account and when I did so, logout stopped working. By this I mean:

My Old Dev Account:

1. Arrive at home page which requires auth:
2. I am redirected to Okta login page.
3. I login and arrive back my home page.
4. I click logout button triggering a function as described in the two URLs I cited at the beginning of this post.
5. Page reloads and I am redirected to okta login page.

Organization’s Dev Account:

Steps 1-4 same as above.
5. I traced out my authenticated property and immediately after clicking logout, it is false, but after page reload, it is set back to true as the application (per the example apps) checks for authentication on create or route changes.

Has anyone else ran into this and if so, how did you address it?

Code Snippets:
routes/index.js

const routes = [
    {
        path: '/implicit/callback',
        component: Auth.handleCallback()
    },
    {
        path: '/',
        name: 'Portal',
        component: Portal,
        meta: {requiresAuth: true}
    }
];

logout function in App.vue:
I realize the last line of my logout function differs from the example which does this.$router.push({ path: '/' }). If I do that, I get a duplicate navigation error from the router since I am already on that path. I have also done this.$router.go() which does much of the same thing, but from what I understand is a “soft” refresh.

async logout() {
  await this.$auth.logout();
  await this.isAuthenticated();
  window.location.reload(true)
}

isAuthenticated in App.vue

async isAuthenticated() {
  this.authenticated = await this.$auth.isAuthenticated();
  console.log("Is authenticated: ", this.authenticated)
  if (this.authenticated && !this.user) {
    this.user = await this.$auth.getUser();
  } else {
    this.user = null;
  }
},

[warren]

Hi Jeremy, does your organization’s dev account have some sort of multi-org setup? For example, you are trying to authenticate with org A but there is a configuration saying you need to authenticate with an external IDP (org B). You authenticate with the external IDP (org B) and now you have an active session for both org A and org B. You click on logout and that clears your session for org A but not org B. If you are redirected to the authorize request url again, you are automatically logged in because you still have an active session with org B.