Failed to load resource: the server responded with a status of 400 (BAD REQUEST)-React

I am Useding Axios to for to make a request, the code work so well when testing it with postman, but when I try runing the code on the client side it will fail with the 127.0.0.1:5000/api/auth/register:1 Failed to load resource: the server responded with a status of 400 (BAD REQUEST)

import { createContext, useState } from "react";
import { useNavigate } from "react-router-dom";
import axios from "axios";
import jwtDecode from "jwt-decode";
export const AuthContext = createContext();
function setUserObject(user) {
if (!user) {
return null;
}
return {
username: user.username,
id: user.id,
first_name: user.first_name,
};
}
export const AuthProvider = ({ children }) => {
const BASE_URL = "http://127.0.0.1:5000/api/auth";
const navigate = useNavigate();
const [token, setToken] = useState(localStorage.getItem("token"));
const [user, setUser] = useState(null);
const [isServerError, setIsServerError] = useState(false);
const registerUser = async (registerData) => {
try {
const finalData = {
username: registerData.username,
password: registerData.password,
email: registerData.email,
first_name: registerData.firstName,
last_name: registerData.lastName,
address: registerData.address,
phone: registerData.phone,
};
const response = await axios.post(`${BASE_URL}/register`, finalData);
if (response.status === 201) {
console.log("Successful registration! Log in to access token");
setIsServerError(false);
navigate("/login");
} else {
setIsServerError(true);
console.log("Registration failed.");
}
} catch (error) {
setIsServerError(true);
console.error("An error occurred during registration:", error.response.data);
}
};
const loginUser = async (loginData) => {
try {
const response = await axios.post(`${BASE_URL}/login`, loginData);
if (response && response.status === 200 && response.data && response.data.access) {
const accessToken = response.data.access;
localStorage.setItem("token", accessToken);
setToken(accessToken);
const loggedInUser = jwtDecode(accessToken);
setUser(setUserObject(loggedInUser));
setIsServerError(false);
navigate("/");
} else {
navigate("/register");
}
} catch (error) {
console.log("Error logging in:", error);
setIsServerError(true);
navigate("/register");
}
};
const logoutUser = () => {
localStorage.removeItem("token");
setUser(null);
setToken(null);
navigate("/");
};
const contextData = {
user,
token,
loginUser,
logoutUser,
registerUser,
isServerError,
};
return (
<AuthContext.Provider value={contextData}>{children}</AuthContext.Provider>
);
};
export default AuthContext`
import React, { useContext, useEffect} from "react";
import { Link } from "react-router-dom";
import AuthContext from "../../context/AuthContext";
import useCustomForm from "../../hooks/useCustomForm";
const RegisterPage = () => {
const { registerUser, isServerError } = useContext(AuthContext);
const [formData, handleInputChange, handleSubmit, reset] = useCustomForm(
{
firstName: "",
lastName: "",
username: "",
email: "",
address: "",
phone_number: ""
},
registerUser
);
useEffect(() => {
if (isServerError) {
reset();
}
}, [isServerError, reset]);
return (
<div className="lo-container">
<div className="logbanner"></div>
<div className="login-form">
<form className="form" onSubmit={handleSubmit}>
<h1>New member setup an account</h1>
<div className="form-row"></div>
<label className="form-label">
<input
type="text"
name="firstName"
value={formData.firstName || ""}
onChange={handleInputChange}
placeholder="First Name"
required
/>
</label>
<label className="form-label">
<input
type="text"
name="lastName"
value={formData.lastName || ""}
onChange={handleInputChange}
placeholder="Last Name"
required
/>
</label>
<label className="form-label">
<input
type="text"
name="username"
value={formData.username || ""}
onChange={handleInputChange}
placeholder="Username"
required
/>
</label>
<label className="form-label">
<input
type="password"
name="password"
value={formData.password || ""}
onChange={handleInputChange}
placeholder="Password"
required
/>
</label>
<label className="form-label">
<input
type="email"
name="email"
value={formData.email || ""}
onChange={handleInputChange}
placeholder="Email"
required
/>
</label>
<label className="form-label">
<input
type="text"
name="address"
value={formData.address || ""}
onChange={handleInputChange}
placeholder="Address"
required
/>
</label>
<label className="form-label">
<input
type="tel"
name="phone_number"
value={formData.phone_number || ""}
onChange={handleInputChange}
maxLength="200"
placeholder="Phone Number"
required
/>
</label>
{isServerError ? (
<p className="error">Registration failed, please try again.</p>
) : null}
<button className="login-btn">Register!</button>
<div className="divider">
<span className="divider-text">or</span>
</div>
<p>Already have an account?</p>
<Link to="/login" className="sign-up-btn">
Login
</Link>
</form>
</div>
</div>
);
};
export default RegisterPage;
import React, { useContext, useEffect} from "react";
import { Link } from "react-router-dom";
import AuthContext from "../../context/AuthContext";
import useCustomForm from "../../hooks/useCustomForm";
const RegisterPage = () => {
const { registerUser, isServerError } = useContext(AuthContext);
const [formData, handleInputChange, handleSubmit, reset] = useCustomForm(
{
firstName: "",
lastName: "",
username: "",
email: "",
address: "",
phone_number: ""
},
registerUser
);
useEffect(() => {
if (isServerError) {
reset();
}
}, [isServerError, reset]);
return (
<div className="lo-container">
<div className="logbanner"></div>
<div className="login-form">
<form className="form" onSubmit={handleSubmit}>
<h1>New member setup an account</h1>
<div className="form-row"></div>
<label className="form-label">
<input
type="text"
name="firstName"
value={formData.firstName || ""}
onChange={handleInputChange}
placeholder="First Name"
required
/>
</label>
<label className="form-label">
<input
type="text"
name="lastName"
value={formData.lastName || ""}
onChange={handleInputChange}
placeholder="Last Name"
required
/>
</label>
<label className="form-label">
<input
type="text"
name="username"
value={formData.username || ""}
onChange={handleInputChange}
placeholder="Username"
required
/>
</label>
<label className="form-label">
<input
type="password"
name="password"
value={formData.password || ""}
onChange={handleInputChange}
placeholder="Password"
required
/>
</label>
<label className="form-label">
<input
type="email"
name="email"
value={formData.email || ""}
onChange={handleInputChange}
placeholder="Email"
required
/>
</label>
<label className="form-label">
<input
type="text"
name="address"
value={formData.address || ""}
onChange={handleInputChange}
placeholder="Address"
required
/>
</label>
<label className="form-label">
<input
type="tel"
name="phone_number"
value={formData.phone_number || ""}
onChange={handleInputChange}
maxLength="200"
placeholder="Phone Number"
required
/>
</label>
{isServerError ? (
<p className="error">Registration failed, please try again.</p>
) : null}
<button className="login-btn">Register!</button>
<div className="divider">
<span className="divider-text">or</span>
</div>
<p>Already have an account?</p>
<Link to="/login" className="sign-up-btn">
Login
</Link>
</form>
</div>
</div>
);
};
export default RegisterPage;

I want to be able to register and login a user, Using the postman API to the test the request it work so well

You should debug this on server side to understand exactly which field is sending unexpected data.
That being said, I see potential 2 problems which might cause 400 error here

1. In formData you have a field named phone_number but before sending it to server, you are reading it from phone which might cause bad data error if phone is undefined and is required by server.
2. You do not have a field called password declared in your formData so that might cause an issue if password is not sent to the server.