vercel / platforms

A full-stack Next.js app with multi-tenancy and custom domain support. Built with Next.js App Router and the Vercel Domains API.
https://app.vercel.pub
5.62k stars 734 forks source link

Next 14.0.2 Github OAuthCallbackError 'State cookie was missing' in local development #357

Closed msywulak closed 10 months ago

msywulak commented 10 months ago

I was working on my own version of this repo with other technologies that were having issues with NextJs 14.0.2 and it led to this PR from the Clerk team to potentially resolve it. I wanted to do my due diligence and check if this project still worked on 14.0.2 after it was updated and it seems like it's also facing issues in local development.

If you try to login from app.localhost:3000 it'll redirect back to localhost:3000 and throw the error. Downgrading to 14.0.1 works for now. I just wanted to note this in case anyone else tested soon and goes down a rabbit hole trying to figure it out.

[next-auth][error][OAUTH_CALLBACK_ERROR]
https://next-auth.js.org/errors#oauth_callback_error State cookie was missing. {
  error: TypeError: State cookie was missing.
      at Object.use (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.24.5_next@14.0.2_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/core/lib/oauth/checks.js:126:27)
      at oAuthCallback (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.24.5_next@14.0.2_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/core/lib/oauth/callback.js:98:29)
      at async Object.callback (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.24.5_next@14.0.2_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/core/routes/callback.js:18:79)
      at async AuthHandler (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.24.5_next@14.0.2_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/core/index.js:202:38)
      at async NextAuthRouteHandler (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.24.5_next@14.0.2_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/next/index.js:50:30)
      at async NextAuth._args$ (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.24.5_next@14.0.2_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/next/index.js:85:24)
      at async /home/matt/scratch/platforms-issue/node_modules/.pnpm/next@14.0.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:62591 {
    name: 'OAuthCallbackError',
    code: undefined
  },
  providerId: 'github',
  message: 'State cookie was missing.'
}
msywulak commented 10 months ago

I was slightly wrong about the overarching issue because I forgot to update my Github App Redirect URI but still hit a similar issue relating to the PR noted.

If you have the right Callback URL in your GitHub App you'll get the below error in 14.0.2 but downgrading to 14.0.1 still fixes it.

[next-auth][error][OAUTH_CALLBACK_HANDLER_ERROR]
https://next-auth.js.org/errors#oauth_callback_handler_error redirect_uri_mismatch {
  error: {
    message: 'redirect_uri_mismatch',
    stack: 'Error: redirect_uri_mismatch\n' +
      '    at oAuthCallback (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.24.5_next@14.0.2_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/core/lib/oauth/callback.js:56:23)\n' +
      '    at Object.callback (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.24.5_next@14.0.2_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/core/routes/callback.js:18:107)\n' +
      '    at AuthHandler (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.24.5_next@14.0.2_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/core/index.js:202:51)\n' +
      '    at async NextAuthRouteHandler (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.24.5_next@14.0.2_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/next/index.js:50:30)\n' +
      '    at async NextAuth._args$ (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.24.5_next@14.0.2_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/next/index.js:85:24)\n' +
      '    at async /home/matt/scratch/platforms-issue/node_modules/.pnpm/next@14.0.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:62591',
    name: 'Error'
  },
  error_description: 'The redirect_uri MUST match the registered callback URL for this application.',
  providerId: 'github',
  message: 'redirect_uri_mismatch'
}
msywulak commented 10 months ago

Fixed in Next 14.0.3