[OAUTH_CALLBACK_HANDLER_ERROR] for Google: "payload must be an object" #3640

wanglophile · 2022-01-15T22:22:57Z

wanglophile
Jan 15, 2022

Trying to setup Google auth with Next-Auth.

Everything works locally - Google accounts are able to register and login.

But once I deploy on Vercel, Google accounts are not able to register or login.

On the frontend, I get a "Try signing in with a different account." error message.

In the backend logs, it starts off correctly:

[next-auth][debug][CREATE_PKCE_CHALLENGE_VERIFIER] {
  pkce: {
    code_challenge: 'XXX',
    code_verifier: 'XXX'
  },
  pkceLength: 64,
  method: 'S256'
}
[next-auth][debug][OAUTH_CALLBACK_PROTECTION] {
  state: 'XXX',
  csrfToken: 'XXX'
}
[next-auth][debug][GET_AUTHORIZATION_URL] {
  url: 'https://accounts.google.com/o/oauth2/v2/auth?client_id=XXX&scope=openid%20email%20profile&response_type=code&redirect_uri=XXX&code_challenge=XXX&code_challenge_method=XXX'
}

But then I get this error:

UVhJVVEiLCJuYW1lIjoiQ2hyaXN0b3BoZXIgV2FuZyIsInBpY3R1cmUiOiJodHRwczovL2xoMy5nb29nbGV1c2VyY29udGVudC5jb20vYS0vQU9oMTRHaDF4aWRQbkVPTU9yNml0bmFnN25MdWp3QjkycFpOQlNfME5Jd2w9czk2LWMiLCJnaXZlbl9uYW1lIjoiQ2hyaXN0b3BoZXIiLCJmYW1pbHlfbmFtZSI6IldhbmciLCJsb2NhbGUiOiJlbiIsImlhdCI6MTY0MjI4NDk3NywiZXhwIjoxNjQyMjg4NTc3fQ.L149NS9l51rguxYd0Q7AQNEVPnlVEyOTW4E4IujPxgJL5aColGUvkDovvY9gE649h2MSoAqYBQ5yWX4W7J7PyzqFDqtgBdjKfbjX5fyzHG6ymG-BoMQod0VG--NMSXBzVHc2vg2NKRnAWgUKK6TgmSqGMrO_U9HR13UUWHn901QhiY9Xkc_eu3yKIb0H-55ikp5XKxBDdBJoU-PmlMJubTJHqQKs7_FGRK_BccbxAgmD6sSIh9cqz51WmoeiZhcPAS0o086_P5nH_UBpAFXFO3F_o4pYipsIsZe4dIicrfit3vu9ZsbPd0M3sW9-kVf5nvY5CLTeio0fcrndLeVhTg"}'
    },
    request: <ref *1> ClientRequest {
      _events: [Object: null prototype],
      _eventsCount: 7,
      _maxListeners: undefined,
      outputData: [],
      outputSize: 0,
      writable: true,
      destroyed: false,
      _last: true,
      chunkedEncoding: false,
      shouldKeepAlive: false,
      _defaultKeepAlive: true,
      useChunkedEncodingByDefault: true,
      sendDate: false,
      _removedConnection: false,
      _removedContLen: false,
      _removedTE: false,
      _contentLength: null,
      _hasBody: true,
      _trailer: '',
      finished: true,
      _headerSent: true,
      socket: [TLSSocket],
      _header: 'POST /api/v1/auth/google/ HTTP/1.1\r\n' +
        'Accept: application/json, text/plain, */*\r\n' +
        'Content-Type: application/json\r\n' +
        'User-Agent: axios/0.22.0\r\n' +
        'Content-Length: 1366\r\n' +
        'Host: api.26reads.com\r\n' +
        'Connection: close\r\n' +
        '\r\n',
      _keepAliveTimeout: 0,
      _onPendingData: [Function: noopPendingOutput],
      agent: [Agent],
      socketPath: undefined,
      method: 'POST',
      maxHeaderSize: undefined,
      insecureHTTPParser: undefined,
      path: '/api/v1/auth/google/',
      _ended: true,
      res: [IncomingMessage],
      aborted: false,
      timeoutCb: null,
      upgradeOrConnect: false,
      parser: null,
      maxHeadersCount: null,
      reusedSocket: false,
      host: 'api.example.com',
      protocol: 'https:',
      _redirectable: [Writable],
      [Symbol(kCapture)]: false,
      [Symbol(kNeedDrain)]: false,
      [Symbol(corked)]: 0,
      [Symbol(kOutHeaders)]: [Object: null prototype]
    },
    data: '\n' +
      '<!doctype html>\n' +
      '<html lang="en">\n' +
      '<head>\n' +
      '  <title>Server Error (500)</title>\n' +
      '</head>\n' +
      '<body>\n' +
      '  <h1>Server Error (500)</h1><p></p>\n' +
      '</body>\n' +
      '</html>\n'
  },
  isAxiosError: true,
  toJSON: [Function: toJSON]
}

ERROR	[next-auth][error][OAUTH_CALLBACK_HANDLER_ERROR] 
https://next-auth.js.org/errors#oauth_callback_handler_error payload must be an object {
  message: 'payload must be an object',
  stack: 'TypeError: payload must be an object\n' +
    '    at Object.module.exports [as sign] (/var/task/node_modules/jose/lib/jwt/sign.js:61:11)\n' +
    '    at Object.encode (/var/task/.next/server/chunks/318.js:148:41)\n' +
    '    at Object.callback (/var/task/.next/server/chunks/318.js:2556:43)\n' +
    '    at processTicksAndRejections (internal/process/task_queues.js:95:5)\n' +
    '    at async NextAuthHandler (/var/task/.next/server/chunks/318.js:823:18)\n' +
    '    at async Object.apiResolver (/var/task/node_modules/next/dist/server/api-utils.js:102:9)\n' +
    '    at async Server.handleApiRequest (/var/task/node_modules/next/dist/server/next-server.js:1064:9)\n' +
    '    at async Object.fn (/var/task/node_modules/next/dist/server/next-server.js:951:37)\n' +
    '    at async Router.execute (/var/task/node_modules/next/dist/server/router.js:222:32)\n' +
    '    at async Server.run (/var/task/node_modules/next/dist/server/next-server.js:1135:29)',
  name: 'TypeError'
}

Which is very confusing for a few reasons:

It looks like I'm missing the {s for the first half of the error
My backend URL api.example.com/api/v1/auth/google/ is functional and should not be returning a 500
None of my callbacks run and none of my events log - so I'm not even sure what payload the payload must be an object error message refers to

Answered by wanglophile

Jan 16, 2022

The error was on my backend API side (as the Next-Auth error message suggested).

More specifically, I was jusing django-allauth. This thread solved it for me: https://stackoverflow.com/a/58696288/

View full answer

wanglophile · 2022-01-16T01:53:47Z

wanglophile
Jan 16, 2022
Author

The error was on my backend API side (as the Next-Auth error message suggested).

More specifically, I was jusing django-allauth. This thread solved it for me: https://stackoverflow.com/a/58696288/

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

[OAUTH_CALLBACK_HANDLER_ERROR] for Google: "payload must be an object" #3640

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

[OAUTH_CALLBACK_HANDLER_ERROR] for Google: "payload must be an object" #3640

Uh oh!

wanglophile Jan 15, 2022

Replies: 1 comment

Uh oh!

wanglophile Jan 16, 2022 Author

wanglophile
Jan 15, 2022

wanglophile
Jan 16, 2022
Author