Calling Protected API End points in your React App /Authorization

Calling Protected API End points in your React App /Authorization

Protected endpoints are end points that require the user to be logged in and have certain permissions. Calling a protected end point with out authentication returns a 401 error (Unauthorized)

In this article i am going to be using axios to call APIs so protected endpoints, depending on technologies used usually require a JWT (Json Web token) from the client to the server so the server can know who and authorize the user to access the end point and give necessary permissions, with our JWT we can know if the user that logged in is an admin or a level one user and configure their permissions based on what we get.

So we basically add another level of configuration for configuring default headers in our axios, we are telling axios whenever you went to send a http request, make sure you include this header in the request.

axios.defaults.headers.common["x-auth-token"]=`Bearer ${token}`
axios.defaults.headers.common['Content-Type'] = 'application/json';
axios.defaults.headers.common['Authorization'] = `Bearer ${access_token}`;

And yeah, that's basically it, with this we can make requests after we have passed the necessary token to our headers.