CustomPage will prompt MissCSRF, and the page will refresh normally after refreshing

[liuhuapiaoyuan]

Environment

  System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 Intel(R) Core(TM) i7-9700F CPU @ 3.00GHz
    Memory: 18.01 GB / 31.94 GB
  Binaries:
    Node: 19.0.0 - ~\.version-fox\cache\nodejs\current\node.EXE
    Yarn: 1.22.22 - ~\.version-fox\cache\nodejs\current\yarn.CMD
    npm: 8.19.2 - ~\.version-fox\cache\nodejs\current\npm.CMD
    pnpm: 9.1.3 - ~\.version-fox\cache\nodejs\current\pnpm.CMD
  Browsers:
    Edge: Chromium (126.0.2592.56)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    next: canary => 15.0.0-canary.135
    next-auth: beta => 5.0.0-beta.20
    react: next => 19.0.0-rc-a19a8ab4-20240829

Reproduction URL

https://github.com/liuhuapiaoyuan/nextjs-auth-misscsrf

Describe the issue

The code is exactly the same as the official demo, but it still prompts MissCSRF

[auth][error] MissingCSRF: CSRF token was missing during an action signin. Read more at https://errors.authjs.dev#missingcsrf
    at validateCSRF (webpack-internal:///(rsc)/./node_modules/.pnpm/@[email protected]/node_modules/@auth/core/lib/actions/callback/oauth/csrf-token.js:45:11)
    at AuthInternal (webpack-internal:///(rsc)/./node_modules/.pnpm/@[email protected]/node_modules/@auth/core/lib/index.js:71:100)
    at async Auth (webpack-internal:///(rsc)/./node_modules/.pnpm/@[email protected]/node_modules/@auth/core/index.js:126:34)
    at async D:\NextjsCourse\code\nextjs-nextauth-misscsrf\node_modules\.pnpm\[email protected][email protected][email protected]_ihexqs56wnz4zgvgj3pwmpzolq\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:113290
    at async AppRouteRouteModule.execute (D:\NextjsCourse\code\nextjs-nextauth-misscsrf\node_modules\.pnpm\[email protected][email protected][email protected]_ihexqs56wnz4zgvgj3pwmpzolq\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:94752)
    at async AppRouteRouteModule.handle (D:\NextjsCourse\code\nextjs-nextauth-misscsrf\node_modules\.pnpm\[email protected][email protected][email protected]_ihexqs56wnz4zgvgj3pwmpzolq\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:115058)
    at async doRender (D:\NextjsCourse\code\nextjs-nextauth-misscsrf\node_modules\.pnpm\[email protected][email protected][email protected]_ihexqs56wnz4zgvgj3pwmpzolq\node_modules\next\dist\server\base-server.js:1440:42)
    at async responseGenerator (D:\NextjsCourse\code\nextjs-nextauth-misscsrf\node_modules\.pnpm\[email protected][email protected][email protected]_ihexqs56wnz4zgvgj3pwmpzolq\node_modules\next\dist\server\base-server.js:1771:28)
    at async DevServer.renderToResponseWithComponentsImpl (D:\NextjsCourse\code\nextjs-nextauth-misscsrf\node_modules\.pnpm\[email protected][email protected][email protected]_ihexqs56wnz4zgvgj3pwmpzolq\node_modules\next\dist\server\base-server.js:1778:28)
    at async DevServer.renderPageComponent (D:\NextjsCourse\code\nextjs-nextauth-misscsrf\node_modules\.pnpm\[email protected][email protected][email protected]_ihexqs56wnz4zgvgj3pwmpzolq\node_modules\next\dist\server\base-server.js:2120:24)
    at async DevServer.renderToResponseImpl (D:\NextjsCourse\code\nextjs-nextauth-misscsrf\node_modules\.pnpm\[email protected][email protected][email protected]_ihexqs56wnz4zgvgj3pwmpzolq\node_modules\next\dist\server\base-server.js:2158:32)
    at async DevServer.pipeImpl (D:\NextjsCourse\code\nextjs-nextauth-misscsrf\node_modules\.pnpm\[email protected][email protected][email protected]_ihexqs56wnz4zgvgj3pwmpzolq\node_modules\next\dist\server\base-server.js:946:25)
    at async NextNodeServer.handleCatchallRenderRequest (D:\NextjsCourse\code\nextjs-nextauth-misscsrf\node_modules\.pnpm\[email protected][email protected][email protected]_ihexqs56wnz4zgvgj3pwmpzolq\node_modules\next\dist\server\next-server.js:282:17)
    at async DevServer.handleRequestImpl (D:\NextjsCourse\code\nextjs-nextauth-misscsrf\node_modules\.pnpm\[email protected][email protected][email protected]_ihexqs56wnz4zgvgj3pwmpzolq\node_modules\next\dist\server\base-server.js:839:17)
    at async D:\NextjsCourse\code\nextjs-nextauth-misscsrf\node_modules\.pnpm\[email protected][email protected][email protected]_ihexqs56wnz4zgvgj3pwmpzolq\node_modules\next\dist\server\dev\next-dev-server.js:377:20
    at async Span.traceAsyncFn (D:\NextjsCourse\code\nextjs-nextauth-misscsrf\node_modules\.pnpm\[email protected][email protected][email protected]_ihexqs56wnz4zgvgj3pwmpzolq\node_modules\next\dist\trace\trace.js:157:20)
    at async DevServer.handleRequest (D:\NextjsCourse\code\nextjs-nextauth-misscsrf\node_modules\.pnpm\[email protected][email protected][email protected]_ihexqs56wnz4zgvgj3pwmpzolq\node_modules\next\dist\server\dev\next-dev-server.js:374:24)
    at async invokeRender (D:\NextjsCourse\code\nextjs-nextauth-misscsrf\node_modules\.pnpm\[email protected][email protected][email protected]_ihexqs56wnz4zgvgj3pwmpzolq\node_modules\next\dist\server\lib\router-server.js:183:21)
    at async handleRequest (D:\NextjsCourse\code\nextjs-nextauth-misscsrf\node_modules\.pnpm\[email protected][email protected][email protected]_ihexqs56wnz4zgvgj3pwmpzolq\node_modules\next\dist\server\lib\router-server.js:360:24)
    at async requestHandlerImpl (D:\NextjsCourse\code\nextjs-nextauth-misscsrf\node_modules\.pnpm\[email protected][email protected][email protected]_ihexqs56wnz4zgvgj3pwmpzolq\node_modules\next\dist\server\lib\router-server.js:384:13)
    at async Server.requestListener (D:\NextjsCourse\code\nextjs-nextauth-misscsrf\node_modules\.pnpm\[email protected][email protected][email protected]_ihexqs56wnz4zgvgj3pwmpzolq\node_modules\next\dist\server\lib\start-server.js:142:13)
 POST /api/auth/signin?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2F 302 in 23ms
 GET /signin?error=MissingCSRF 200 in 30ms

How to reproduce

Expected behavior

Stop missing CSRF at this time!

[liuhuapiaoyuan]

https://authjs.dev/guides/pages/signin

I am using this page's demo

[REDAMANS]

This problem has been around for a while, and nobody seems to take action about it, i don't know, maybe it has become a feature.

[liuhuapiaoyuan]

Too bad, can't anyone answer?

[liuhuapiaoyuan]

#11713 I found that this jump error is the cause

[jr200]

This appears to still be broken, can someone take a look please.

In particular, the Missing CSRF error appears if you have a custom signin pages. Steps to reproduce are:

1. Sign-in (first time this works)
2. Sign-out
3. Sign-in <-- this step fails.

[liuhuapiaoyuan]

Currently, this can be solved by using the signin on the client side.

import { signIn } from "next-auth/react";

[jr200]

I think I might have this working now. In my case, my middleware was pointing to the original signin url rather than my custom page. I factored this out into constants to make it clearer where my code was using each URL.

I've shared an example repo which shows how I managed to get it to work.

https://github.com/jr200/nats-skeleton-nextjs

@liuhuapiaoyuan I'd be interested to hear if your issue is different from mine, or if you think i'm doing something unusual/incorrect.

[liuhuapiaoyuan]

I think I might have this working now. In my case, my middleware was pointing to the original sign-in URL rather than my custom page. I factored this out into constants to make it clearer where my code was using each URL.

I've shared an example repository that shows how I managed to get it to work.

https://github.com/jr200/nats-skeleton-nextjs

I would be interested to hear if your issue is different from mine, or if you think I am doing something unusual or incorrect.

??, It should not have this problem if auth is used as a middleware directly, shouldn't it?