Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
liuhuapiaoyuan opened this issue Aug 30, 2024 · 8 comments
Open

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

liuhuapiaoyuan opened this issue Aug 30, 2024 · 8 comments
Labels
bug Something isn't working triage Unseen or unconfirmed by a maintainer yet. Provide extra information in the meantime.

Comments

@liuhuapiaoyuan
Copy link

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/@auth+core@0.34.2/node_modules/@auth/core/lib/actions/callback/oauth/csrf-token.js:45:11)
    at AuthInternal (webpack-internal:///(rsc)/./node_modules/.pnpm/@auth+core@0.34.2/node_modules/@auth/core/lib/index.js:71:100)
    at async Auth (webpack-internal:///(rsc)/./node_modules/.pnpm/@auth+core@0.34.2/node_modules/@auth/core/index.js:126:34)
    at async D:\NextjsCourse\code\nextjs-nextauth-misscsrf\node_modules\.pnpm\next@15.0.0-canary.135_react-dom@19.0.0-rc-a19a8ab4-20240829_react@19.0.0-rc-a19a8ab4-2024082_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\next@15.0.0-canary.135_react-dom@19.0.0-rc-a19a8ab4-20240829_react@19.0.0-rc-a19a8ab4-2024082_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\next@15.0.0-canary.135_react-dom@19.0.0-rc-a19a8ab4-20240829_react@19.0.0-rc-a19a8ab4-2024082_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\next@15.0.0-canary.135_react-dom@19.0.0-rc-a19a8ab4-20240829_react@19.0.0-rc-a19a8ab4-2024082_ihexqs56wnz4zgvgj3pwmpzolq\node_modules\next\dist\server\base-server.js:1440:42)
    at async responseGenerator (D:\NextjsCourse\code\nextjs-nextauth-misscsrf\node_modules\.pnpm\next@15.0.0-canary.135_react-dom@19.0.0-rc-a19a8ab4-20240829_react@19.0.0-rc-a19a8ab4-2024082_ihexqs56wnz4zgvgj3pwmpzolq\node_modules\next\dist\server\base-server.js:1771:28)
    at async DevServer.renderToResponseWithComponentsImpl (D:\NextjsCourse\code\nextjs-nextauth-misscsrf\node_modules\.pnpm\next@15.0.0-canary.135_react-dom@19.0.0-rc-a19a8ab4-20240829_react@19.0.0-rc-a19a8ab4-2024082_ihexqs56wnz4zgvgj3pwmpzolq\node_modules\next\dist\server\base-server.js:1778:28)
    at async DevServer.renderPageComponent (D:\NextjsCourse\code\nextjs-nextauth-misscsrf\node_modules\.pnpm\next@15.0.0-canary.135_react-dom@19.0.0-rc-a19a8ab4-20240829_react@19.0.0-rc-a19a8ab4-2024082_ihexqs56wnz4zgvgj3pwmpzolq\node_modules\next\dist\server\base-server.js:2120:24)
    at async DevServer.renderToResponseImpl (D:\NextjsCourse\code\nextjs-nextauth-misscsrf\node_modules\.pnpm\next@15.0.0-canary.135_react-dom@19.0.0-rc-a19a8ab4-20240829_react@19.0.0-rc-a19a8ab4-2024082_ihexqs56wnz4zgvgj3pwmpzolq\node_modules\next\dist\server\base-server.js:2158:32)
    at async DevServer.pipeImpl (D:\NextjsCourse\code\nextjs-nextauth-misscsrf\node_modules\.pnpm\next@15.0.0-canary.135_react-dom@19.0.0-rc-a19a8ab4-20240829_react@19.0.0-rc-a19a8ab4-2024082_ihexqs56wnz4zgvgj3pwmpzolq\node_modules\next\dist\server\base-server.js:946:25)
    at async NextNodeServer.handleCatchallRenderRequest (D:\NextjsCourse\code\nextjs-nextauth-misscsrf\node_modules\.pnpm\next@15.0.0-canary.135_react-dom@19.0.0-rc-a19a8ab4-20240829_react@19.0.0-rc-a19a8ab4-2024082_ihexqs56wnz4zgvgj3pwmpzolq\node_modules\next\dist\server\next-server.js:282:17)
    at async DevServer.handleRequestImpl (D:\NextjsCourse\code\nextjs-nextauth-misscsrf\node_modules\.pnpm\next@15.0.0-canary.135_react-dom@19.0.0-rc-a19a8ab4-20240829_react@19.0.0-rc-a19a8ab4-2024082_ihexqs56wnz4zgvgj3pwmpzolq\node_modules\next\dist\server\base-server.js:839:17)
    at async D:\NextjsCourse\code\nextjs-nextauth-misscsrf\node_modules\.pnpm\next@15.0.0-canary.135_react-dom@19.0.0-rc-a19a8ab4-20240829_react@19.0.0-rc-a19a8ab4-2024082_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\next@15.0.0-canary.135_react-dom@19.0.0-rc-a19a8ab4-20240829_react@19.0.0-rc-a19a8ab4-2024082_ihexqs56wnz4zgvgj3pwmpzolq\node_modules\next\dist\trace\trace.js:157:20)
    at async DevServer.handleRequest (D:\NextjsCourse\code\nextjs-nextauth-misscsrf\node_modules\.pnpm\next@15.0.0-canary.135_react-dom@19.0.0-rc-a19a8ab4-20240829_react@19.0.0-rc-a19a8ab4-2024082_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\next@15.0.0-canary.135_react-dom@19.0.0-rc-a19a8ab4-20240829_react@19.0.0-rc-a19a8ab4-2024082_ihexqs56wnz4zgvgj3pwmpzolq\node_modules\next\dist\server\lib\router-server.js:183:21)
    at async handleRequest (D:\NextjsCourse\code\nextjs-nextauth-misscsrf\node_modules\.pnpm\next@15.0.0-canary.135_react-dom@19.0.0-rc-a19a8ab4-20240829_react@19.0.0-rc-a19a8ab4-2024082_ihexqs56wnz4zgvgj3pwmpzolq\node_modules\next\dist\server\lib\router-server.js:360:24)
    at async requestHandlerImpl (D:\NextjsCourse\code\nextjs-nextauth-misscsrf\node_modules\.pnpm\next@15.0.0-canary.135_react-dom@19.0.0-rc-a19a8ab4-20240829_react@19.0.0-rc-a19a8ab4-2024082_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\next@15.0.0-canary.135_react-dom@19.0.0-rc-a19a8ab4-20240829_react@19.0.0-rc-a19a8ab4-2024082_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

image

Expected behavior

Stop missing CSRF at this time!
@liuhuapiaoyuan liuhuapiaoyuan added bug Something isn't working triage Unseen or unconfirmed by a maintainer yet. Provide extra information in the meantime. labels Aug 30, 2024
@liuhuapiaoyuan
Copy link
Author

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

I am using this page's demo

@REDAMANS
Copy link

REDAMANS commented Aug 30, 2024 •
edited
Loading

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
Copy link
Author

Too bad, can't anyone answer?

@liuhuapiaoyuan
Copy link
Author

#11713 I found that this jump error is the cause

@jr200
Copy link

jr200 commented Sep 16, 2024 •
edited
Loading

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
Copy link
Author

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

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

@jr200
Copy link

jr200 commented Sep 18, 2024

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
Copy link
Author

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working triage Unseen or unconfirmed by a maintainer yet. Provide extra information in the meantime.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@liuhuapiaoyuan @jr200 @REDAMANS