Protected API Endpoints 400 error

React
1

I’ve implemented the protected API endpoints, and also fixed the bi-directional dependencies noted in the next lecture. When I attempt to update a movie I’m running into a 400 error that I can’t seem to resolve.

I’ve gone back into Node and set requiresAuth to false and the Movie updates as it should. But, when I have requiresAuth set to true I get a 400 error.

If I comment out axios.defaults.headers.common["x-auth-token"] = jwt; I get a 401 error, which is expected. But, when it’s enabled I get a 400 error.

I get the same issue with any of the api requests (besides GET).

2

After some testing I figured out the issue. The 400 error was an “unauthorized” error, which stemmed from me not actually being logged in. I wasn’t being logged in when submitting the login form because I had forgotten to put the await keyword in the login function:

export async function login(email, password) {
  const { data: jwt } = await http.post(apiEndpoint, { email, password });
  localStorage.setItem(tokenKey, jwt);
}

Now that I’ve added await, everything is working as it should.

2 Likes