Infinite loop with 431 Request Header Fields Too Large right after install

[JohnyProkie]

Environment

local development

Reproduction

Using Nuxt3 fresh project created via

npx nuxi@latest init my-app

Then installed packages as mentioned in Installation on Sidebase docs

yarn add --dev @sidebase/nuxt-auth
yarn add next-auth@4.21.1

and added a module as mentioned in Quick Start.

   modules: ['@sidebase/nuxt-auth'],

Now open a browser and go to localhost:3000 or whatever port is given to you by Nuxt.

Describe the bug

Page can't load, log full of messages like these

[nuxt] [request error] [unhandled] [431]  (431 Request Header Fields Too Large (http://localhost:3000/api/auth/session?callbackUrl=http://localhost:3000/))
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)  
  at async $fetch2 (./node_modules/ofetch/dist/shared/ofetch.d438bb6f.mjs:239:15)  
  at async ./node_modules/@sidebase/nuxt-auth/dist/runtime/plugin.mjs:15:81  
  at async Object.callAsync (./node_modules/unctx/dist/index.mjs:72:16)  
  at async applyPlugin (./node_modules/nuxt/dist/app/nuxt.js:122:23)  
  at async Module.applyPlugins (./node_modules/nuxt/dist/app/nuxt.js:132:5)  
  at async createNuxtAppServer (./node_modules/nuxt/dist/app/entry.js:29:7)  
  at async default (./node_modules/@nuxt/vite-builder/dist/runtime/vite-node.mjs:27:18)  
  at async Object.renderToString (./node_modules/vue-bundle-renderer/dist/runtime.mjs:176:19)  
  at async ./.nuxt/dev/index.mjs:756:21

Additional context

No response

Logs

Thousands of lines of these during few seconds.

[nuxt] [request error] [unhandled] [431]  (431 Request Header Fields Too Large (http://localhost:3000/api/auth/session?callbackUrl=http://localhost:3000/api/auth/session?callbackUrl=http://localhost:3000/api/auth/session?callbackUrl=http://localhost:3000/))
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)  
  at async $fetch2 (./node_modules/ofetch/dist/shared/ofetch.d438bb6f.mjs:239:15)  
  at async ./node_modules/@sidebase/nuxt-auth/dist/runtime/plugin.mjs:15:81  
  at async Object.callAsync (./node_modules/unctx/dist/index.mjs:72:16)  
  at async applyPlugin (./node_modules/nuxt/dist/app/nuxt.js:122:23)  
  at async Module.applyPlugins (./node_modules/nuxt/dist/app/nuxt.js:132:5)  
  at async createNuxtAppServer (./node_modules/nuxt/dist/app/entry.js:29:7)  
  at async default (./node_modules/@nuxt/vite-builder/dist/runtime/vite-node.mjs:27:18)  
  at async Object.renderToString (./node_modules/vue-bundle-renderer/dist/runtime.mjs:176:19)  
  at async ./.nuxt/dev/index.mjs:756:21
[nuxt] [request error] [unhandled] [431]  (431 Request Header Fields Too Large (http://localhost:3000/api/auth/session?callbackUrl=http://localhost:3000/api/auth/session?callbackUrl=http://localhost:3000/))
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)  
  at async $fetch2 (./node_modules/ofetch/dist/shared/ofetch.d438bb6f.mjs:239:15)  
  at async ./node_modules/@sidebase/nuxt-auth/dist/runtime/plugin.mjs:15:81  
  at async Object.callAsync (./node_modules/unctx/dist/index.mjs:72:16)  
  at async applyPlugin (./node_modules/nuxt/dist/app/nuxt.js:122:23)  
  at async Module.applyPlugins (./node_modules/nuxt/dist/app/nuxt.js:132:5)  
  at async createNuxtAppServer (./node_modules/nuxt/dist/app/entry.js:29:7)  
  at async default (./node_modules/@nuxt/vite-builder/dist/runtime/vite-node.mjs:27:18)  
  at async Object.renderToString (./node_modules/vue-bundle-renderer/dist/runtime.mjs:176:19)  
  at async ./.nuxt/dev/index.mjs:756:21
[nuxt] [request error] [unhandled] [431]  (431 Request Header Fields Too Large (http://localhost:3000/api/auth/session?callbackUrl=http://localhost:3000/))
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)  
  at async $fetch2 (./node_modules/ofetch/dist/shared/ofetch.d438bb6f.mjs:239:15)  
  at async ./node_modules/@sidebase/nuxt-auth/dist/runtime/plugin.mjs:15:81  
  at async Object.callAsync (./node_modules/unctx/dist/index.mjs:72:16)  
  at async applyPlugin (./node_modules/nuxt/dist/app/nuxt.js:122:23)  
  at async Module.applyPlugins (./node_modules/nuxt/dist/app/nuxt.js:132:5)  
  at async createNuxtAppServer (./node_modules/nuxt/dist/app/entry.js:29:7)  
  at async default (./node_modules/@nuxt/vite-builder/dist/runtime/vite-node.mjs:27:18)  
  at async Object.renderToString (./node_modules/vue-bundle-renderer/dist/runtime.mjs:176:19)  
  at async ./.nuxt/dev/index.mjs:756:21

[cannap]

did you created the NuxtAuthHandler ?

[JohnyProkie]

Yup, I took samples from you tutorial. Was the same. In report I just posted minimal I had to do to replicate this.

[cedWetzel]

Yup, I took samples from you tutorial. Was the same. In report I just posted minimal I had to do to replicate this.

Can you provide a screenshot from you server/api/auth folder structure containing all files?

[hafizjavaid]

I faced the same issue but after 1 hour of debugging I'm able to fix this

The mistake I was doing that, I was trying to register the user first and in that case I didn't create the [...].ts file in server/api/auth folder

Once I created the [...].ts, now it's running smoothly

[mardraze]

Hi everyone, I found what causes the problem. https://github.com/sidebase/nuxt-auth/blob/7234c66beb7ebd6a05763e95201e6424d85fef3d/src/runtime/plugin.ts#L12 await getSession()

When I commented this line, then everything working properly. I don't know how to resolve this problem to keep backward compatibility, it's just a hint

[zoey-kaiser]

As this issue was present during v0.4, I will close this issue, as AfAIK it has been resolved in version 0.5 and higher!

[Denson787]

Hello,

I'm trying to configure the sidebase/nuxt-auth with Auh0Provider but and I have the same error of 431 Infinite loop, although I have created the NuxtAuthHandler

Can someone help me with that ?

You will find below my config :

nuxt.config.ts file

// other config
....
auth: {
    provider: {
        type: 'authjs',
    },
    session: {  // Session options
      enableRefreshOnWindowFocus: true,
      enableRefreshPeriodically: true
    },
    globalAppMiddleware: {
      isEnabled: false
    }
  }
...
// other config

// file: ~/server/api/auth/[...].ts
import { NuxtAuthHandler } from '#auth'
import Auht0Provider from 'next-auth/providers/auth0'

export default NuxtAuthHandler({
  secret: process.env.SECRET,
  providers: [
      Auht0Provider.default({
          clientId: process.env.CLIENT_ID,
          clientSecret: process.env.CLIENT_SECRET,
          domain: process.env.DOMAIN
      })
  ]
})

[Denson787]

Hello,

I'm trying to configure the sidebase/nuxt-auth with Auh0Provider but and I have the same error of 431 Infinite loop, although I have created the NuxtAuthHandler

Can someone help me with that ?

You will find below my config :

nuxt.config.ts file

// other config
....
auth: {
    provider: {
        type: 'authjs',
    },
    session: {  // Session options
      enableRefreshOnWindowFocus: true,
      enableRefreshPeriodically: true
    },
    globalAppMiddleware: {
      isEnabled: false
    }
  }
...
// other config

// file: ~/server/api/auth/[...].ts
import { NuxtAuthHandler } from '#auth'
import Auht0Provider from 'next-auth/providers/auth0'

export default NuxtAuthHandler({
  secret: process.env.SECRET,
  providers: [
      Auht0Provider.default({
          clientId: process.env.CLIENT_ID,
          clientSecret: process.env.CLIENT_SECRET,
          domain: process.env.DOMAIN
      })
  ]
})

Hello,

Finally, I succeed to make it work, I didn't know that the file that includes the NuxtAuthHandler should be named exactly as "[...].ts", I named it differently at first.

Now, I understand the catch all route in docs of Nuxt 😀

I put this here if it can help somebody.

Have a nice day !

[larry-xue]

I encountered a similar issue, and I resolved it by modifying the auth.ts file. Initially, this file was located in /api/auth.ts, which triggered a 431 error. I renamed the file to [...].ts and moved it to /api/auth/[...].ts, and that resolved the issue.