Configuring NextAuth.js and Next.js to work behind Azure FrontDoor CDN

If you want to use a CDN that performs caching in front of your Next.js + NextAuth.js website, you need to be aware that the default configuration exposes the website to a security issue.

Some CDNs assume that if a response does not contain a Cache-Control header, then they should go ahead and cache the request anyway. Azure FrontDoor is one such example. In the documentation it says: If no Cache-Control is present, the default behavior is that Front Door will cache the resource for X amount of time where X gets randomly picked between 1 to 3 days.

Since NextAuth endpoints such as /api/auth/session do not currently return a Cache-Control header, FrontDoor caches the result. This is a major security risk because it will end up caching the information of a different user.

Ideally this problem should be fixed inside NextAuth.js, and I opened a bug asking them to do so.

Meanwhile, the workaround is to set a custom header in next.config.js for the NextAuth.js API routes:

async headers() {
 return [
   {
     source: '/api/auth/:slug',
     headers: [
       {
         key: 'Cache-Control',
         value: 'no-store, max-age=0',
       },
     ],
   },
 ];
},

— Ovi Dan