next-auth: Failed to login with Facebook. It thrown this message `expected 200 OK, got: 400 Bad Request`

Description 🐜

Logging in with other providers like Google, or Line is working fine, but it’s not working when logging in with Facebook using developer account. It always throws this error message expected 200 OK, got: 400 Bad Request and the frontend says Try signing in with different account.

Is this a bug in your own project?

No

How to reproduce ☕️

1. Clone this official Github repo https://github.com/nextauthjs/next-auth-example
2. Follow instruction in the repo to setup the app
3. Create a new facebook app in developers.facebook.com
4. Fill up FACEBOOK_ID and FACEBOOK_SECRET in .env.local
5. Run the app and test Facebook login using your developer account used to create Facebook app

Screenshots / Logs 📽

This is the error message I got from bash console.

[next-auth][error][OAUTH_CALLBACK_ERROR] 
https://next-auth.js.org/errors#oauth_callback_error expected 200 OK, got: 400 Bad Request {
  error: {
    message: 'expected 200 OK, got: 400 Bad Request',
    stack: 'OPError: expected 200 OK, got: 400 Bad Request\n' +
      '    at processResponse (/home/user/tmp/next-auth-example/node_modules/openid-client/lib/helpers/process_response.js:41:11)\n' +
      '    at Client.grant (/home/user/tmp/next-auth-example/node_modules/openid-client/lib/client.js:1340:22)\n' +
      '    at processTicksAndRejections (node:internal/process/task_queues:96:5)\n' +
      '    at async Client.oauthCallback (/home/user/tmp/next-auth-example/node_modules/openid-client/lib/client.js:612:24)\n' +
      '    at async oAuthCallback (/home/user/tmp/next-auth-example/node_modules/next-auth/core/lib/oauth/callback.js:114:16)\n' +
      '    at async Object.callback (/home/user/tmp/next-auth-example/node_modules/next-auth/core/routes/callback.js:50:11)\n' +
      '    at async NextAuthHandler (/home/user/tmp/next-auth-example/node_modules/next-auth/core/index.js:139:28)\n' +
      '    at async NextAuthNextHandler (/home/user/tmp/next-auth-example/node_modules/next-auth/next/index.js:20:19)\n' +
      '    at async /home/user/tmp/next-auth-example/node_modules/next-auth/next/index.js:56:32\n' +
      '    at async Object.apiResolver (/home/user/tmp/next-auth-example/node_modules/next/dist/server/api-utils.js:102:9)',
    name: 'OPError'
  },
  providerId: 'facebook',
  message: 'expected 200 OK, got: 400 Bad Request'
}
[next-auth][error][CALLBACK_OAUTH_ERROR] 
https://next-auth.js.org/errors#callback_oauth_error expected 200 OK, got: 400 Bad Request OPError: expected 200 OK, got: 400 Bad Request
    at processResponse (/home/user/tmp/next-auth-example/node_modules/openid-client/lib/helpers/process_response.js:41:11)
    at Client.grant (/home/user/tmp/next-auth-example/node_modules/openid-client/lib/client.js:1340:22)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Client.oauthCallback (/home/user/tmp/next-auth-example/node_modules/openid-client/lib/client.js:612:24)
    at async oAuthCallback (/home/user/tmp/next-auth-example/node_modules/next-auth/core/lib/oauth/callback.js:114:16)
    at async Object.callback (/home/user/tmp/next-auth-example/node_modules/next-auth/core/routes/callback.js:50:11)
    at async NextAuthHandler (/home/user/tmp/next-auth-example/node_modules/next-auth/core/index.js:139:28)
    at async NextAuthNextHandler (/home/user/tmp/next-auth-example/node_modules/next-auth/next/index.js:20:19)
    at async /home/user/tmp/next-auth-example/node_modules/next-auth/next/index.js:56:32
    at async Object.apiResolver (/home/user/tmp/next-auth-example/node_modules/next/dist/server/api-utils.js:102:9) {
  name: 'OAuthCallbackError',
  code: undefined
}

This is the screenshot of frontend after logging in with Facebook

Environment 🖥

  System:
    OS: Linux 5.4 Ubuntu 18.04.6 LTS (Bionic Beaver)
    CPU: (2) x64 AMD A4-9125 RADEON R3, 4 COMPUTE CORES 2C+2G
    Memory: 205.46 MB / 3.30 GB
    Container: Yes
    Shell: 4.4.20 - /bin/bash
  Binaries:
    Node: 16.13.2 - /usr/bin/node
    npm: 8.1.2 - /usr/bin/npm
  Browsers:
    Chrome: 97.0.4692.99
    Firefox: 96.0
  npmPackages:
    next: latest => 12.0.8 
    next-auth: latest => 4.1.2 
    react: ^17.0.2 => 17.0.2 

Contributing 🙌🏽

No, I am afraid I cannot help regarding this