Add a JWT to an Axios Request
Ryan Chenkie: [0:00] We've got a small node server here which is serving up some user data. If we make a request to users/all, we get a list of three users. This endpoint is set up to look for a JSON Web Token in the request that is made to it. Only if that JWT is valid, is it going to send back this data.
[0:19] We're plugging the token into the token input here. For example, if we take that out and try to make the request again, we get a 401 unauthorized. If we want to make request to this endpoint from our application, we're going to need a way to send that JWT along with the requests that we make from our React app.
[0:39] There's a good chance that you're either using axios. The HTTP library axios or the native fetch API to do your requests in your application. We're going to focus on axios right now. That seems to be a very popular choice for HTTP requests, but the same concepts are going to apply to the fetch API as well.
[0:58] One thing to note here is that our access token is just hard-coded into the application right now. This is not how we would ever store our JSON Web Tokens. This totally ignores how we got this JSON Web Token in the first place.
[1:09] All of that is covered in other lessons. For now, we just want to focus on how to attach this JWT to a request.
[1:18] Let's start by installing axios. We can do npm install axios. Once we've got that, let's come up here and import it. We can import axios from axios.
[1:33] Why don't we start by just making the request and we can watch it fail because it won't have the proper authorization information. Down here, we can say let's give ourselves a const results = await axios.get and we want to make a request to our API url/users/all.
[1:50] We're using useState to set up our users list and we're also using useState for our request error display as well. The second item that we're de-structuring out of each in those arrays will be how we set that information.
[2:08] We can come down here and say set users. We'll set that to result data, the actual data that we want is going to be found on this data key. That's how axios provides its responses.
[2:20] Then if we get an error, which we will in this first case, we will do set request error and that's equal to error.message. We'll get a message back on this message key, which is on the error object. If we run this and we say get users, we get our message request failed with a status code 401.
[2:39] That's what we expect because the JSON Web Token has not gone to the backend with this request. There are two ways that we would generally do this. We can do a global setup where axios will always look for a JSON Web Token and send it with our request or we can have a more fine-grained approach where we have a specific instance of axios that we use for our API.
[3:01] That's useful if you are making requests to multiple different APIs or if you're hitting some public APIs and you don't want to send your access token to those public APIs. We'll take a look at how to do both of them.
[3:12] Let's start with our global setup. For that, we want to set up an interceptor. We can say axios interceptors request use and then we need a config callback. In config, let's set up config headers authorization.
[3:32] That's going to be equal to bearer. That's because bearer is this scheme that's going to precede our token that is expected on the backend and then we'll put in our access token.
[3:43] After that, we return config and then we have a second callback which is for error handling. In this case, we can return a promise rejects and will reject with the error. If this is set up correctly when we make our request now, we should be able to get our users and sure enough we do.
[4:02] If we dig into the requests that we made, if we come down here to the request headers, we can see that we send our JSON Web Token as an authorization header. This is the information that has to be present on the request for this to make it passed that endpoint.
[4:18] This is one way of handling it but this is a bit of a clunky way of doing it because this access token will now go on any axios request that goes from our application to any server. We really don't want to be sending access tokens of our own to other servers that we don't control because who knows what those servers might be doing with them.
[4:39] In this case, one good practice is to set up a specific axios instance that you can use for your API specifically. Let's set up our own instance. We can set up something maybe called authAxios = axiosCreate.
[4:55] We can give us a base URL that can be equal to our API URL. Then here we will set up our headers and headers will be an object. We can pass authorization in here as a key. Then just like before, we will want it to be bearer and then our token.
[5:14] The only change that needs to be made in our request itself is that instead of going to axios.get, we would say authAxios.get. This will use this new instance that we've created.
[5:25] Since we have a base URL setup, let's just get rid of API URL here. We'll go directly to users/all. If we run this, we should expect to get the same result. If we click get users, we get our list of users.
[0:19] We're plugging the token into the token input here. For example, if we take that out and try to make the request again, we get a 401 unauthorized. If we want to make request to this endpoint from our application, we're going to need a way to send that JWT along with the requests that we make from our React app.
[0:39] There's a good chance that you're either using axios. The HTTP library axios or the native fetch API to do your requests in your application. We're going to focus on axios right now. That seems to be a very popular choice for HTTP requests, but the same concepts are going to apply to the fetch API as well.
[0:58] One thing to note here is that our access token is just hard-coded into the application right now. This is not how we would ever store our JSON Web Tokens. This totally ignores how we got this JSON Web Token in the first place.
[1:09] All of that is covered in other lessons. For now, we just want to focus on how to attach this JWT to a request.
[1:18] Let's start by installing axios. We can do npm install axios. Once we've got that, let's come up here and import it. We can import axios from axios.
[1:33] Why don't we start by just making the request and we can watch it fail because it won't have the proper authorization information. Down here, we can say let's give ourselves a const results = await axios.get and we want to make a request to our API url/users/all.
[1:50] We're using useState to set up our users list and we're also using useState for our request error display as well. The second item that we're de-structuring out of each in those arrays will be how we set that information.
[2:08] We can come down here and say set users. We'll set that to result data, the actual data that we want is going to be found on this data key. That's how axios provides its responses.
[2:20] Then if we get an error, which we will in this first case, we will do set request error and that's equal to error.message. We'll get a message back on this message key, which is on the error object. If we run this and we say get users, we get our message request failed with a status code 401.
[2:39] That's what we expect because the JSON Web Token has not gone to the backend with this request. There are two ways that we would generally do this. We can do a global setup where axios will always look for a JSON Web Token and send it with our request or we can have a more fine-grained approach where we have a specific instance of axios that we use for our API.
[3:01] That's useful if you are making requests to multiple different APIs or if you're hitting some public APIs and you don't want to send your access token to those public APIs. We'll take a look at how to do both of them.
[3:12] Let's start with our global setup. For that, we want to set up an interceptor. We can say axios interceptors request use and then we need a config callback. In config, let's set up config headers authorization.
[3:32] That's going to be equal to bearer. That's because bearer is this scheme that's going to precede our token that is expected on the backend and then we'll put in our access token.
[3:43] After that, we return config and then we have a second callback which is for error handling. In this case, we can return a promise rejects and will reject with the error. If this is set up correctly when we make our request now, we should be able to get our users and sure enough we do.
[4:02] If we dig into the requests that we made, if we come down here to the request headers, we can see that we send our JSON Web Token as an authorization header. This is the information that has to be present on the request for this to make it passed that endpoint.
[4:18] This is one way of handling it but this is a bit of a clunky way of doing it because this access token will now go on any axios request that goes from our application to any server. We really don't want to be sending access tokens of our own to other servers that we don't control because who knows what those servers might be doing with them.
[4:39] In this case, one good practice is to set up a specific axios instance that you can use for your API specifically. Let's set up our own instance. We can set up something maybe called authAxios = axiosCreate.
[4:55] We can give us a base URL that can be equal to our API URL. Then here we will set up our headers and headers will be an object. We can pass authorization in here as a key. Then just like before, we will want it to be bearer and then our token.
[5:14] The only change that needs to be made in our request itself is that instead of going to axios.get, we would say authAxios.get. This will use this new instance that we've created.
[5:25] Since we have a base URL setup, let's just get rid of API URL here. We'll go directly to users/all. If we run this, we should expect to get the same result. If we click get users, we get our list of users.