Different cache logic for next-auth

[maiconcarraro]

Hey, I recently migrated from next-pwa to serwist, so far so good, then I noticed some increase in the next-auth OAuthCallback error.

I was doing some comparison and the cache files are different, so I wounder what was the reason to change from:

(return false for any /api/auth)
https://github.com/shadowwalker/next-pwa/blob/1e6af5fa9f6a807930f451adb5ab5078d5cda451/cache.js#L136

to

(return false only for /api/auth/callback)

serwist/packages/next/src/index.browser.ts

Line 144 in 008d794

if (!sameOrigin || pathname.startsWith("/api/auth/callback")) {

For now I'm passing the previous logic and it seems stable (still monitoring), but posting here to get + context.

[DuCanhGH]

To be honest, even I am fairly confused about this (I, frankly, have never used next-auth). If you look at the comment right above the if branch, you can see that it tells us to exclude /api/auth/callback/*, yet the if branch used to exclude /api/auth/*, same as next-pwa. This was changed to match the comment (in a @ducanh2912/next-pwa commit rather than a Serwist one - not by me, mind you).

Not sure what it should be, but I will trace the change to /api/auth/*, investigate the problem with next-auth, and change certain things should I see fit. The week after next week, perhaps. I'm kinda busy with other stuff at the moment...

[maiconcarraro]

I had it, is there a way to debug to make sure the current service worker is updated w/ the cache config? I have return false for any /api/auth/* 🤔

[DuCanhGH]

@maiconcarraro just unregister the service worker and reload 💀

[maiconcarraro]

@DuCanhGH maybe the issue I had above w/ runtimeCaching was related to your new fix? 6a1986c I'm going to check out

[DuCanhGH]

@maiconcarraro just asking, but why does caching "/api/auth/*" cause issues? Looking at your described solution, I guess that it is due to navigation preloading. Unfortunately, I'm not aware of a way to opt out of that feature for specific routes at the moment. This is because @serwist/strategies.StrategyHandler.fetch unconditionally handles event.preloadResponse if it is available. I believe that your only way out is to disable navigation preloading altogether. Not sure why that fixes the issue though, since that feature is meant for GET navigations... Is this related to pages like "/api/auth/signin/:provider", which probably fetch a CSRF token from "/api/auth/csrf" on load?

Sorry for having not responded for such a long time. I've been snow under for the past few months, so it is fairly difficult to keep track of things. Not that I couldn't even write a reply, it is just that I forgot about this issue altogether...

[kdurek]

By the way, lucia-auth similarly didn't work, what fixed it, was comment below

[tony19]

I noticed the same thing. To disable caching for all /api/auth/ routes, you have to add a NetworkOnly rule in the runtimeCaching array before the defaultCache. Otherwise, the defaultCache contains a NetworkFirst entry for /api/ which would take precedence over your entry.

This worked for me:

// src/app/sw.ts
import { defaultCache } from '@serwist/next/browser'
import { installSerwist } from '@serwist/sw'

installSerwist({
  //...
  runtimeCaching: [
    {
      urlPattern: /\/api\/auth\/.*/,
      handler: 'NetworkOnly',
      options: {}, // needed to avoid serwist crash
    },
    ...defaultCache,
  ],
})

[kdurek]

This fixed my issue on serwist 9.0.0

// src/app/sw.ts
import { ExpirationPlugin } from '@serwist/expiration';
import { defaultCache } from '@serwist/next/browser'
import { NetworkOnly } from '@serwist/strategies';
import { installSerwist } from '@serwist/sw'

installSerwist({
  //...
  runtimeCaching: [
    {
      matcher: /\/api\/auth\/.*/,
      handler: new NetworkOnly({
        plugins: [
          new ExpirationPlugin({
            maxEntries: 16,
            maxAgeSeconds: 24 * 60 * 60, // 24 hours
          }),
        ],
        networkTimeoutSeconds: 10, // fallback to cache if API does not response within 10 seconds
      }),
    },
    ...defaultCache,
  ],
})