CSRF Token validation issue when "cookieValue" is not present

[juan-carlos-correa]

I'm building an app using next-auth 5.0.0-beta.19.

When running Playwright login tests with nodemailer provider, the first tests are passing, but if I run the tests again, I'm having this error:

MissingCSRF: CSRF token was missing during an action signin.

I cloned the repo and debugged the error message because I have spent a weekend in this issue in my project ☕ and started guessing if this is actually a bug 🐛

I looked at : https://github.com/nextauthjs/next-auth/blob/main/packages/core/src/lib/init.ts#L152C2-L176C4

  if (csrfDisabled) {
    options.csrfTokenVerified = true
  } else {
    const {
      csrfToken,
      cookie: csrfCookie,
      csrfTokenVerified,
    } = await createCSRFToken({
      options,
      cookieValue: reqCookies?.[options.cookies.csrfToken.name],
      isPost,
      bodyValue: reqCsrfToken,
    })


    options.csrfToken = csrfToken
    options.csrfTokenVerified = csrfTokenVerified


    if (csrfCookie) {
      cookies.push({
        name: options.cookies.csrfToken.name,
        value: csrfCookie,
        options: options.cookies.csrfToken.options,
      })
    }
  }

The createCSRFToken is returning csrfTokenVerified value only if cookieValue exists. If doesn't exists, it won't return a csrfTokenVerified value as we can see at: https://github.com/nextauthjs/next-auth/blob/a7a48a142f47e4c03d39df712a2bf810342cf202/packages/core/src/lib/actions/callback/oauth/csrf-token.ts#L26C1-L55C2 more specifically, this if:

if (cookieValue) {
    const [csrfToken, csrfTokenHash] = cookieValue.split("|")

    const expectedCsrfTokenHash = await createHash(
      `${csrfToken}${options.secret}`
    )

    if (csrfTokenHash === expectedCsrfTokenHash) {
      // If hash matches then we trust the CSRF token value
      // If this is a POST request and the CSRF Token in the POST request matches
      // the cookie we have already verified is the one we have set, then the token is verified!
      const csrfTokenVerified = isPost && csrfToken === bodyValue

      return { csrfTokenVerified, csrfToken }
    }
  }

The csrfTokenVerified is used at: https://github.com/nextauthjs/next-auth/blob/main/packages/core/src/lib/index.ts#L67

const { csrfTokenVerified } = options

And is used as a flag in the case signin:

validateCSRF(action, csrfTokenVerified)

Where if csrfTokenVerified is falsy, it will throw the error mentioned at the beginning.

export function validateCSRF(action: AuthAction, verified?: boolean) {
  if (verified) return
  throw new MissingCSRF(`CSRF token was missing during an action ${action}`)
}

Is this a bug? is this expected behavior?

This is the project I'm working on: https://github.com/product-makers-hub/open-micro-saas

There is the implementation and the tests.

The thing is that the issue is happening only in Playwright so far, I have not relased my app public yet and I'm wondering if it the auth will work with many users 😟

Please Heeeeeeeeeelp!

[juan-carlos-correa]

Btw, it's important to mention that this issue is happening only on headless mode tests.

Not sure if this could affect the security of the authentication!