Caching script requests breaks auth

[Youdaman]

I'm using the Nuxt Supabase module for auth and it doesn't work properly due to the following block in templates/workbox/sw.js

// Cache CSS, JS, and Web Worker requests with a Stale While Revalidate strategy
registerRoute(
  ({ request }) =>
    request.destination === 'style' ||
    request.destination === 'script' ||
    request.destination === 'worker',
  new StaleWhileRevalidate({
    cacheName: 'assets',
    plugins: [
      new CacheableResponsePlugin({ statuses: [200] })
    ]
  })
)

Specifically, the request.destination === 'script' line is the cause -- if I comment out this line things work correctly.

The usual login sequence is that after being sent off to the auth provider (for example Azure) it redirects to something like:

http://localhost:8080/#access_token=xxx&expires_in=3600&provider_token=xxx&refresh_token=xxx&token_type=bearer

These token params usually get processed by the Supabase module, user is logged in, and URL becomes http://localhost:8080/

But the script caching prevents this from happening and things get stuck at the URL with the token params still showing.

Likewise if the user was already logged in before enabling this PWA module, the usual logout functionality doesn't work either.

Assuming when more workbox options are available via config this caching strategy and its destinations can be overridden?

For now the workaround is to comment out the line for script requests.

[kevinmarrec]

@Youdaman Why is the logout affected as it only removes tokens from local/cache storage ?

I'd like to find a fix but I would need help figuring out what could be the best Caching Strategy to keep caching while having Supabase Auth working :)

[Youdaman]

I only discovered the logout bug by chance -- I had logged in already, then activated the PWA module, and when I hit logout it may very well have removed the tokens (sorry I didn't check and can't right now) but it was showing the content as it was, i.e. I had it showing the JSON for the user and it was still there, so I'm guessing it just caches the page content that it had already?

[kevinmarrec]

@Youdaman Have you been able to test it locally with Workbox disabled (Login/Logout) ?

[Youdaman]

Yeah the login/logout works fine before activating the module, if that's what you mean?

[kevinmarrec]

Alright, yes. We need to figure out what changes we can do around the default Caching Strategy to prevent this.

[Youdaman]

I ended up just using the approach here and things work fine: https://github.com/larbish/nuxt3-pwa/blob/main/public/sw.js

[kevinmarrec]

@Youdaman Alright, maybe it is just worker requests that should be removed ? I don't think it's about scripts caching but about Web Worker requests being cached that causes Auth issues :)

[Youdaman]

It could be, I don't know enough to say :) All I know is that when I commented out the line that cached scripts then it worked, so maybe there's some more fine-grained control that needs to be worked out for script caching? Again just a guess.

[kevinmarrec]

Well, I'd want you to use you're working cache strategy which contain only style, and add script but not worker, so we can confirm it is the culprit and remove it.

[Youdaman]

Can confirm "style + worker" worked fine but "style + script" did not work.

[kevinmarrec]

The think is we want scripts, at least nuxt assets to be cached by the Worker. I'd like to know better why/how it breaks Supabase Auth.

/cc @larbish As a Supabase Auth + Nuxt 3 PWA user, do you have a clue about the behavior @Youdaman is facing ?

[larbish]

Hey @kevinmarrec @Youdaman, I'm not facing this issue on my repo using both supabase-module ad pwa-module but that's an interesting case, thanks for the feedback. @Youdaman Is it possible to provide a reproduction in order to understand the problem and find a solution ?

[Youdaman]

Hey @kevinmarrec @Youdaman, I'm not facing this issue on my repo using both supabase-module ad pwa-module but that's an interesting case, thanks for the feedback. @Youdaman Is it possible to provide a reproduction in order to understand the problem and find a solution ?

Hey @larbish sorry for such a late reply, but from memory the repro was simply spin up a fresh Nuxt3 and do nothing else but add this PWA module and follow any of the various auth provider guides in the Supabase docs.

[kevinmarrec]

@Youdaman Did you find any fix ?

I'm gonna add support for custom workbox template, so if needed you'll be able to adjust it to your needs if your app has still some issues with current cache strategies.