Console error "Bad Request" with Axios and Laravel - reactjs

Question

I'm using laravel 5.8 with react and axios. I built a login page and i get a console "bad request" error after login failed. I get the correct response from the server, but i keep getting the a console error of the post request.
Here is the request :
export const getProfile = () => {
return axios
.get('api/profile', {
headers: { Authorization: `Bearer ${localStorage.usertoken}` }
})
.then(response => {
return response.data
})
.catch(err => {
console.log(err)
})
}
And here is the login function from the UserController
public function login(Request $request)
{
$credentials = $request->json()->all();
try {
if (!$token = JWTAuth::attempt($credentials)) {
$loginsCount = 0; //init counter
if ($request->session()->has('userLoginsCount')) {
//get session value
$loginsCount = $request->session()->get('userLoginsCount');
//check login attempts count
if ($loginsCount == 5) {
$current_timestamp = now()->timestamp;
Log::info($current_timestamp.' User exceeded alowed
login attempts : '.$request->ip());
$request->session()->put('userLoginsCount', 0);
return;
} else {
//increment it
$loginsCount++;
// set the new value
$request->session()->put('userLoginsCount',
$loginsCount);
}
} else {
$request->session()->put('userLoginsCount', $loginsCount);
}
//Store session
Session::save();
return response()->json(['error' => 'invalid credentials'],
400);
}
} catch (JWTExecption $e) {
return response()->json(['error' => 'could not create token'], 500);
}
return response()->json(compact('token'));
}
Api Routes:
Route::post('register', 'UserController#register');
Route::post('login', 'UserController#login');
Route::get('profile', 'UserController#getAuthenticatedUser');
Route::middleware('auth:api')->get('/user', function (Request $request) {
return $request->user();
});
Web Routes:
Auth::routes();
Route::get( '/{path?}', function(){
return view( 'layouts/app' );
} )->where('path', '.*');
Here pictures of the error

Answer 1

I believe these are the steps to fix everything.
1. Change error response to 401 (not authorized).
return response()->json(['error' => 'invalid credentials'], 401);
2. Retrieve the error message from the axios error response before use.
export const getProfile = () => {
return axios
.get('api/profile', {
headers: { Authorization: `Bearer ${localStorage.usertoken}` }
})
.then(response => {
return response.data
})
.catch(err => {
// retrieve the error message
let message = err.response.data.error;
console.log(message);
// now you can do something with 'message'
// ...
})
You were dumping the whole error to the console, not pulling out the actual message. I'm sorry I overlooked this.