[bug] Unexpected token E in JSON at position 0 from Csrf Token After Upgrading Next 13 about rainbowkit HOT 10 CLOSED

nextauthjs/next-auth#7166 (comment)

from rainbowkit.

This worked for me!

// let token = await getToken({req})
if (siwe.nonce !== (await getCsrfToken({ req: { headers: req?.headers } }))) {
    return null
}

from rainbowkit.

@0xAskar Did you happen to also upgrade next-auth? A breaking change was introduced after 4.20.1 that we're waiting on some documentation around, so if that's the case, please downgrade to 4.20.1 or below for the time being.

from rainbowkit.

If that doesn't resolve the issue, are you using the Next.js App Router or Routes after upgrading to Next 13?

from rainbowkit.

@DanielSinclair hey thanks for the response:

• my next-auth is "next-auth": "^4.15.0",
• After upgrading to Next 13, I haven't changed what I had previously with respect to routes. I've been using next/router

Why do you think it may problematic because of that? Its weird that the response that hits the /api/auth/[next-auth] response is a stream which makes it not accessible for the csrf token.

from rainbowkit.

Not sure if this would resolve the issue, but you should be using NEXTAUTH_SECRET instead of NEXT_PUBLIC_NEXTAUTH_SECRET as Next.js will bundle public envs on the client-side

from rainbowkit.

@DanielSinclair thanks for the reply, but that didn't seem to fix it either, changing the env variable and ensuring that the versions of next-auth are good. I'm still confused as to why the "req" that is passed into the nextAuth route is a circular object, a stream. Because I think that is what's preventing the getCsrfToken function from doing its thing correctly. Does that make sense or no? I'm confused as to why its a circular object that isn't parseable by the getCsrfToken function anymore?

Here's the error in reference to trying to stringify the req (I only stringified as a test)

TypeError: Converting circular structure to JSONmmended protections disabled.
    --> starting at object with constructor 'Socket'
    |     property 'parser' -> object with constructor 'HTTPParser'
    --- property 'socket' closes the circle
    at JSON.stringify (<anonymous>)
    at Object.authorize (webpack-internal:///(api)/./pages/api/auth/[...nextauth].js:55:43)
    at runMicrotasks (<anonymous>)

The error from the await getCsrf({req}) function is below:

https://next-auth.js.org/errors#client_fetch_error Unexpected token E in JSON at position 0 {
 error: {
   message: 'Unexpected token E in JSON at position 0',
   stack: 'SyntaxError: Unexpected token E in JSON at position 0\n' +
     '    at JSON.parse (<anonymous>)\n' +
     '    at parseJSONFromBytes ' +

from rainbowkit.

With @rainbow-me/[email protected] (reference the Migration Guide) and the latest version of next-auth, are you still experiencing this issue? It is possible that we need to add more consideration for the App Router. Lmk

from rainbowkit.

@DanielSinclair i can try this and see if its still a problem

from rainbowkit.

hey @Markkos89 this worked for me too. this is great, thank you so much!

from rainbowkit.