Form not authorized?

Question

JavaScript

I send an axios.post request to the endpoint with data email, login , a response comes from the server 200 - and resultCode = 0 (i.e. everything is super you are logged in) I check that if resultCode === 0 then I request the axois.get method to endpoint auth /me the answer comes resultCode : 1 , messages['You are not authorized'], what the hell if the server just gave me a response from axios.post that everything is super .... the code is attached ... thanks for the answers!

the redux-form library is used, so the email data, login which is required according to the API, is sent via the formData method

API = https://social-network.samuraijs.com/docs (/auth branch)

in the main App.js component, the connect method is implemented and created dispatchers, if necessary, I will throw them in the comments ... because it says that the

Login.jsx code does not fit here

import React from "react";
import { NavLink, BrowserRouter, Route } from "react-router-dom";
import * as axios from "axios";
import ava from "../assets/Din.jpg";
import classTags from "./Login.module.css";
import LoginReduxForm from "./LoginForm";

class Login extends React.Component {
  componentDidMount() {
    axios
      .get(`https://social-network.samuraijs.com/api/1.0/auth/me`, {
        withCredentials: true,
      })
      .then((response) => {
        debugger;
        if (response.data.resultCode === 0) {
          this.props.auth(response.data.data, true);
        }
      });
  }
  sendLoginPhoto() {
    axios
      .get(
        `https://social-network.samuraijs.com/api/1.0/profile/` + this.props.id
      )
      .then((response) => {
        this.props.loginPhoto(response.data.photos.small);
      });
  }

  render() {
    const onSubmit = (formData) => {
      console.log(formData);
      axios
        .post(`https://social-network.samuraijs.com/api/1.0/auth/login`, {
          email: formData.login,
          password: formData.password,
        })
        .then((response) => {
          debugger;
          console.log(response);
          if (response.data.resultCode === 0) {
            axios
              .get(`https://social-network.samuraijs.com/api/1.0/auth/me`, {
                withCredentials: true,
                headers: {
                  "API-KEY": "8d9bd45d-58a9-43ac-8b78-2c71c9e79611",
                },
              })
              .then((response) => {
                debugger;
                if (response.data.resultCode === 0) {
                  this.props.auth(response.data.data, true);
                }
              });
          }
          return null;
        });
    };
    debugger;

    return (
      <BrowserRouter>
        <div className={classTags.disp}>
          <NavLink to="/Login">
            {!this.props.login ? "Login" : this.props.login}
          </NavLink>
          {this.props.login ? (
            <button onClick={() => this.sendLoginPhoto()}>Получить фото</button>
          ) : null}

          {this.props.login ? (
            <img
              className={classTags.defaultImg}
              src={!this.props.photo ? ava : this.props.photo}
              alt="avatar"
            />
          ) : null}
          {this.props.login ? (
            <form>
              {" "}
              <button>{this.props.isAuth ? "Log out" : ""}</button>
            </form>
          ) : null}
          <div>
            {!this.props.isAuth ? (
              <Route
                path="/Login"
                render={() => (
                  <LoginReduxForm
                    auth={this.props.auth}
                    login={this.props.login}
                    isAuth={this.props.isAuth}
                    id={this.props.id}
                    photo={this.props.photo}
                    loginPhoto={this.props.loginPhoto}
                    onSubmit={onSubmit}
                  />
                )}
              />
            ) : null}
          </div>
        </div>
      </BrowserRouter>
    );
  }
}

export default Login;

LoginForm.jsx code

import React from "react";
import classTags from "./LoginForm.module.css";
import { reduxForm, Field } from "redux-form";

const LoginForm = (props) => {
  const { handleSubmit } = props;
  return (
    <div className={classTags.align}>
      <form onSubmit={handleSubmit} className={classTags.block} action="">
        <div>
          <Field
            name={"login"}
            component={"input"}
            placeholder={"Введите логин"}
          />
        </div>
        <div>
          <Field
            name={"password"}
            component={"input"}
            placeholder={"Введите пароль"}
            type="password"
          />
        </div>
        <div>
          <Field
            name={"rememberMeCheckBox"}
            type="checkbox"
            component={"input"}
          />{" "}
          remember me
        </div>
        <div>
          <button>sign in</button>
        </div>
      </form>
    </div>
  );
};

const LoginReduxForm = reduxForm({
  // a unique name for the form
  form: "login",
})(LoginForm);

export default LoginReduxForm;

auth-reducer.js reducer code (combined)

let initialState = {
  id: 0,
  email: "",
  login: "",
  isAuth: false,
  isFetching: false,
  photo: "",
};

export const authReducer = (state = initialState, action) => {
  switch (action.type) {
    case "AUTHORIZE":
      return {
        ...state,
        id: action.data.id,
        email: action.data.email,
        login: action.data.login,
        isAuth: action.auth,
      };
    case "LOGIN_PHOTO":
      return {
        ...state,
        photo: action.photo,
      };

    default:
      return state;
  }
};