Nuxt Auth loggedIn state getting cached

Question

I am having issues with the Nuxt Auth loggedIn state. I am using Nuxt JS in universal mode, and I am authenticating with Nuxt Auth.

When a user logs out, the $auth.loggedIn state resolves appropriately in that session. I do not have a redirect during the $auth.logout(), but have conditional statements that resolve all the logged out state needs. When the user logs out in that session then everything is fine.

The issue occurs with my the PWA instance, where the start url goes to: http://example.com/pwa And, from here does a redirect ($router.push(redirectPage)) to an appropriate location after mounted(). Side note, I tried redirecting server side, but couldn't get around hydration issues, so this seemed like a decent enough alternative.

After the logout(), when the PWA opens up the start_url, $auth.loggedIn shows true, even though the user was logged out. This is conflict with the local storage and cookies that all show false for the auth keys.

When I debug this in Chrome, and do a hard refresh, then it resolves appropriately the $auth.loggedIn as false. Without the hard refresh, it will show true.

It appears to be some sort of cache issue. Additionally, I am using the Nuxt PWA module. I'm not sure if this is a service worker issue with caching the vuex store.

Any ideas are appreciated.

Here is the auth config:

auth: {
        redirect: false,
        strategies: {
            local: false,
            password_grant: {
                scheme: 'local',
                token: {
                    property: 'access_token'
                },
                endpoints: {
                    login: {
                        url: '/oauth/token',
                        method: 'post',
                        propertyName: 'access_token'
                    },
                    logout: false,
                    user: {
                        url: 'api/auth/me',
                        method: 'get',
                        propertyName: 'user'
                    },
                }
            },
}

The PWA workbox config uses all default cache values.

Answer 1

I figured out the problem. The Nuxt PWA module adds the start_url to pre-cache. Perhaps this is a requirement to allow offline PWAs. Since the start_url was being pre-cached it wouldn't change states after logging in/out. To get around this, whenever I log in/out, I also refresh the start_url pre-cache entry like this:

//delete pre-cache start_url, then re-add, to refresh logged state
caches.open('cache-name').then(function(cache) {
  cache.keys().then( (arrayOfRequest) => {
    arrayOfRequest.forEach(function(request) {
      if (request.url.indexOf('start_url') !== -1) {
        cache.delete(request.url)
        cache.add(request.url)
      }
    })
  });
})