Amazon Cognito + next-auth -> checks.state argument is missing

Provider type

Cognito

Environment

System:
    OS: macOS 12.3.1
    CPU: (8) x64 Intel(R) Core(TM) i7-8569U CPU @ 2.80GHz
    Memory: 2.07 GB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
    Yarn: 1.22.18 - /usr/local/bin/yarn
    npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
  Browsers:
    Chrome: 101.0.4951.64
    Firefox: 100.0
    Safari: 15.4
  npmPackages:
    next: latest => 12.1.2
    next-auth: 4.0.6 => 4.0.5
    react: ^17.0.2 => 17.0.2

Reproduction URL

https://github.com/nextauthjs/next-auth-example

Describe the issue

I’m running an issue while creating a new user with Cognito, after the verification code, the website crashed with the following error screen.

2022-05-16T20:08:28.437Z	5d144ce4-3a52-421c-80ec-89ebcc694439	ERROR	[next-auth][error][OAUTH_CALLBACK_ERROR] 
https://next-auth.js.org/errors#oauth_callback_error checks.state argument is missing {
  error: {
    message: 'checks.state argument is missing',
    stack: 'TypeError: checks.state argument is missing\n' +
      '    at Client.callback (/var/task/chunks/117.js:12099:13)\n' +
      '    at oAuthCallback (/var/task/chunks/117.js:7600:29)\n' +
      '    at processTicksAndRejections (internal/process/task_queues.js:95:5)\n' +
      '    at async Object.callback (/var/task/chunks/117.js:8562:11)\n' +
      '    at async NextAuthHandler (/var/task/chunks/117.js:6424:28)\n' +
      '    at async NextAuthNextHandler (/var/task/chunks/117.js:9841:19)\n' +
      '    at async /var/task/chunks/117.js:9877:32\n' +
      '    at async Object.apiResolver (/var/task/chunks/458.js:6620:9)\n' +
      '    at async Module.<anonymous> (/var/task/chunks/458.js:5552:13)',
    name: 'TypeError'
  },
  providerId: 'cognito',
  message: 'checks.state argument is missing'
}

2022-05-16T20:08:28.439Z	5d144ce4-3a52-421c-80ec-89ebcc694439	ERROR	[next-auth][error][CALLBACK_OAUTH_ERROR] 
https://next-auth.js.org/errors#callback_oauth_error checks.state argument is missing TypeError: checks.state argument is missing
    at Client.callback (/var/task/chunks/117.js:12099:13)
    at oAuthCallback (/var/task/chunks/117.js:7600:29)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async Object.callback (/var/task/chunks/117.js:8562:11)
    at async NextAuthHandler (/var/task/chunks/117.js:6424:28)
    at async NextAuthNextHandler (/var/task/chunks/117.js:9841:19)
    at async /var/task/chunks/117.js:9877:32
    at async Object.apiResolver (/var/task/chunks/458.js:6620:9)
    at async Module.<anonymous> (/var/task/chunks/458.js:5552:13) {
  name: 'OAuthCallbackError',
  code: undefined

Here is the pages/api/auth/[...nextauth].js file:

import NextAuth from "next-auth";
import CognitoProvider from "next-auth/providers/cognito";

export default NextAuth({
  providers: [
    CognitoProvider({
      clientId: process.env.COGNITO_CLIENT_ID,
      clientSecret: process.env.COGNITO_CLIENT_SECRET,
      issuer: process.env.COGNITO_ISSUER,
      idToken: true,
    }),
  ],
  callbacks: {
    // By default NextAuth will redirect to an url of the same hostname
    // this callback allows to change that behavior and specify a custom url
    redirect({ url }) {
      return url;
    },
    async session({ session, token }) {
      // Send properties to the client, like an access_token from a provider.
      session.customerID = token.sub
      return session
    }
  },
  secret: process.env.SECRET,
  debug: process.env.NODE_ENV === "development" ? true : false
});

How to reproduce

Sign up using Cognito and next-auth successfully.

Expected behavior

Register to Cognito without the following error message.

[lawitschka]

Yes, I have answered my own question. Changing my Cloudfront config made it work.

@ThangHuuVu Is there any place in the documentation where all Cookies used by NextAuth are listed? It’s always trial-and-error to see if it works and would be great if there just was a list of cookie names you have to whitelist.

@z0ph I set up a dedicated cache behaviour for api/* allowing all HTTP methods and the following cookies.

allowed_methods = [
  "GET",
  "HEAD",
  "OPTIONS",
  "POST",
  "DELETE",
  "PUT",
  "PATCH",
]

forwarded_cookies_allowed_names = [
  "__Host-next-auth.csrf-token",
  "__Secure-next-auth.callback-url",
  "__Secure-next-auth.session-token",
  "__Secure-next-auth.pkce.code_verifier",
  "__Secure-next-auth.state"
]

[z0ph]

I’ve tried different Cloudfront settings without success yet.

What I see so far:

1. I register using Cognito with an email confirmation code.
2. Right after the input of the confirmation code, I got the initial error message because missing state cookie.
3. If I click on the black button (sign in using Cognito), it connects right away without issue. (the state cookie is then set).
4. Now that I have an account in Cognito, every login to the application is fine. (no error message with the missing state).

You can see in the screenshot below that the cookie is set starting with the highlighted: Cognito line

---

Ok, writing these lines below makes me realize my mistake. I was not using first the app URL to allow it to set the state information, but instead directly a sign-up URL from Cognito with a false/previous state id. My mistake.

It’s now solved, thanks 👍🏼