400 Bad request with axios POST to /api/signin using Passport.JS and Next.JS

Question

I am following the example repo Next.js provides to implement Passport.JS & next connect.

I have a Form Submit Handler which sends the email and password after validation.

I am using axios:

import axios from 'axios';

export default function loginSubmit(
  email,
  password,
) {
  const loginData = {
    email,
    password,
  };
  axios
    .post(`/api/signin`, {
      params: loginData,
      withCredentials: true,
      headers: {
        'Content-Type': 'application/json'
      },

    })
    .then(response => {
    
    })
    .catch((error) => {
      if (error.response) {
        console.log("error.response ", error.response);
      } else if (error.request) {
        console.log("error.request ", error.request);
      } else if (error.message) {
        // do something other than the other two
      }
}

I've done research and a 400 Bad request means the error is on the client.

Some ideas were to check the URL, flush your DNS in terminal, clear cookies. But none of that worked.

This is the error which get returns:

error.response : {
    "data": "Bad Request",
    "status": 400,
    "statusText": "Bad Request",
    "headers": {
        "connection": "keep-alive",
        "content-length": "11",
        "date": "Sat, 16 Oct 2021 18:49:44 GMT",
        "keep-alive": "timeout=5"
    },
    "config": {
        "url": "/api/signin",
        "method": "post",
        "data": "{\"params\":{\"email\":\"xxxxxx@gmail.com\",\"password\":\"Aug8162016!\"},\"withCredentials\":true,\"headers\":{\"Content-Type\":\"application/json\"},\"credentials\":\"same-origin\"}",
        "headers": {
            "Accept": "application/json, text/plain, */*",
            "Content-Type": "application/json"
        },
        "transformRequest": [
            null
        ],
        "transformResponse": [
            null
        ],
        "timeout": 0,
        "xsrfCookieName": "XSRF-TOKEN",
        "xsrfHeaderName": "X-XSRF-TOKEN",
        "maxContentLength": -1,
        "maxBodyLength": -1,
        "transitional": {
            "silentJSONParsing": true,
            "forcedJSONParsing": true,
            "clarifyTimeoutError": false
        }
    },
    "request": {}
}

My gut is telling me it's something here.

Any ideas how I can get a more substantial error?

Answer 1

i think you generated POST request body in wrong way. Try

const data = {
    email,
    password,
  };

  axios
    .post(`/api/signin`, // url
      data, // request body
      { // options
        withCredentials: true,
        headers: {
         'Content-Type': 'application/json'
      }
    })

if it didn't work, you can try sending already stringified body:

const data = {
    email,
    password,
  };

  axios
    .post(`/api/signin`, // url
      JSON.stringify(data), // request body as string
      { // options
        withCredentials: true,
        headers: {
         'Content-Type': 'application/json'
      }
    })

it should work