Error trying to log in with React and Redux Saga

Question

I am trying to make a request to pick up session in an API, it is with the Oauth2 system, where I have to send a form-urlencoded with some data and it returns me a token. But I can not do the request, Ta giving error 400.

Follow my saga:

import { takeLatest, call, put, all } from 'redux-saga/effects';

import history from '../../../services/history';
import api from '../../../services/api';

import { signInSuccess } from './actions';

export function* signIn({ payload }) {
  const { email, password, grant_type } = payload;

  const client_id = 'aVgjhEBcnN-ytRrewsWJrSpoKnh';
  const client_secret = 'q4fYtRGIkmLJKtx9Y5MaUYFPPdasd2QD4hTI4Gds45tgfSAdlkj';
  const token = 'Basic ' + btoa(`${client_id}:${client_secret}`);

  const headers = {
    'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
    token,
  };

  const response = yield call(
    api.post,
    'auth/token',
    {
      email: email,
      password: password,
      grant_type: grant_type,
    },
    { headers }
  );

  console.log(response);

  history.push('/dashboard');
}

export default all([takeLatest('@auth/SIGN_IN_REQUEST', signIn)]);

Follow the Archive of the Request:

Now follow the print of the error you made when making the request on the login page:

My question is, what am I doing wrong that is returning me error 400?

Answer 1

I did a test using Postman, doing a post for the address that appears in your error print:

https://charler-node-api.herokuapp.com/auth/token

I set the header as basic Authentication, using the credentials you reported in your Saga.

The problem is the name of one of the fields. In your Insomnia, you have a field called "username", in your Saga, you have a field called "email". If you exchange email for username, the 400 error ceases to occur. Here is the feedback I received:

{
    "accessToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjoiNWUzOGJiNWY2NjI4YjYwNjRhOTU3NmMzIiwiZGF0ZSI6IjIwMjAtMDItMDRUMTI6MTc6MjguMzIzWiIsImlhdCI6MTU4MDgxODY0OH0.ZUK2a61LXAv5ADGc2Lo1CsQLEal_CYXMx5xc7_5nJ6U",
    "user": {
        "id": "5e38bb5f6628b6064a9576c3",
        "email": "[email protected]"
    }
}