Twitter login with redirect proxy URL is not working

[ldemesla]

Provider type

Twitter

Environment

  System:
    OS: macOS 13.2
    CPU: (12) arm64 Apple M2 Max
    Memory: 7.90 GB / 64.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.18.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.8.1 - /usr/local/bin/npm
    pnpm: 9.13.0 - /opt/homebrew/bin/pnpm
    bun: 1.0.3 - ~/.bun/bin/bun
    Watchman: 2024.11.04.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 120.1.61.101
    Chrome: 131.0.6778.86
    Safari: 16.3

Reproduction URL

https://github.com/ldemesla/next-auth

Describe the issue

The preview deployment setup is not working for Twitter. The redirect to the stable URL is working but throw the following error:

InvalidCheck: state value could not be parsed. Read more at https://errors.authjs.dev#invalidcheck

I made sure that the AUTH_SECRET and the AUTH_REDIRECT_PROXY_URL are the same in the stable environment and the preview. The application is also properly configured on Twitter side.

The error is also visible in the next-auth demo page, you sign-in with Twitter.

How to reproduce

• Create a NextJs project with Next Auth, and setup the Twitter Provider
• Deploy it using Vercel
• Follow the documentation to support previews environment. In my case, I used my production application as the stable deployment URL (e.g: 0https://auth.yourdomain.com/api/auth)
• Deploy a preview, and try to login with Twitter.

Expected behavior

The expected behavior is that we succeed to connect to Twitter

[nilinswap]

+1 to this issue.
here is the gist of error that I faced. It started happening recently.

[garshythoel]

Apple is also not working in the example app.

Locally i get the following error:

uth][error] InvalidCheck: Missing state in query, but required for redirect proxy. Read more at https://errors.authjs.dev#invalidcheck
    at handleState (webpack-internal:///(rsc)/../../node_modules/@auth/core/lib/actions/callback/oauth/checks.js:180:15)
    at Module.callback (webpack-internal:///(rsc)/../../node_modules/@auth/core/lib/actions/callback/index.js:32:113)
    at AuthInternal (webpack-internal:///(rsc)/../../node_modules/@auth/core/lib/index.js:39:77)
    at async Auth (webpack-internal:///(rsc)/../../node_modules/@auth/core/index.js:126:34)
    at async eval (webpack-internal:///(rsc)/../../node_modules/next/dist/esm/server/future/route-modules/app-route/module.js:228:37)
    at async AppRouteRouteModule.execute (webpack-internal:///(rsc)/../../node_modules/next/dist/esm/server/future/route-modules/app-route/module.js:157:26)
    at async AppRouteRouteModule.handle (webpack-internal:///(rsc)/../../node_modules/next/dist/esm/server/future/route-modules/app-route/module.js:293:30)
    at async EdgeRouteModuleWrapper.handler (webpack-internal:///(rsc)/../../node_modules/next/dist/esm/server/web/edge-route-module-wrapper.js:90:21)
    at async adapter (webpack-internal:///(rsc)/../../node_modules/next/dist/esm/server/web/adapter.js:178:16)
    at async /Users/harshytgoel/Projects/inkrepo/node_modules/next/dist/server/web/sandbox/sandbox.js:110:22

[yordis]

Facing the same original issue using Zitadel and Vercel Preview deployment, it works for Production deployment.

I confirmed the required environment variables, and I see the state and code search params present in the request.

�[31m[auth][error]�[0m InvalidCheck: state value could not be parsed. Read more at https://errors.authjs.dev#invalidcheck
    at (node_modules/@auth/core/lib/actions/callback/oauth/checks.js:43:0)
    at (node_modules/@auth/core/lib/actions/callback/oauth/checks.js:65:0)
    at (node_modules/@auth/core/lib/actions/callback/oauth/callback.js:90:36)
    at (node_modules/@auth/core/lib/actions/callback/index.js:37:0)
    at (node_modules/@auth/core/lib/index.js:29:0)
    at (node_modules/@auth/core/index.js:111:0)
    at (node_modules/next/dist/esm/server/route-modules/app-route/module.js:308:0)

I tracked the issue, and it seems to be state cookie was missing which led me to the following situation:

• Are you using the *.vercel.app domain instead of a domain that you shared between the production and your preview deployment?

Remember, cookies can not be shared across different domains, only subdomains when allowed.