While using a frontend client like React you often find yourself calling the backend and using the same code to give axios a JsonWebToken or an Api Key to authorize the client and fulfill the request in the backend code. Instead of passing the authorization token you can handle and instruct axios to save you from that boilerplate code.

Axios is a very usefull http client library that can make a lot for us. Used in a lot of frameworks either backend or frontend as long as it is JavaScript powered. In this post i will show you how i handle the authorization injection in axios. I will show you how to use it in react but you can use it in any JavaScript framework like react, react-native, next.js, nodejs or plain JavaScript. Authorization is just an example too you can use it for an APi key that you need, or for that matter any custom header that you like;

Practical example with react and Axios

To start you'll have to install axios, if you've not done so.

yarn add axios

So when you want to call an authorization required api you will find yourself doing a method like the bellow one.

const callCoolApiEndpoint = (jwtToken) => {
    return axios.get({
        url: process.env.REACT_APP_API_BASE_URL + "/api/v1/coolEndpoint",
        headers: {
            "Authorization": "Bearer " + jwtToken
        }
    })
}

This code is fine if you just calling it few times and have very few endpoints to call. But if you have a lot of endpoints and variations of those to call across your app your code will be full of repetitions. if you join that to the fact that you will have to use a state manager or do some prop drilling to pass the value of the current token / header. that will be a problem.

The solution

Axios have a very cool things exposed for you to customize. One of them can resolve our problem.

const onReceivedNewToken = ( newToken ) => {
    axios.defaults.headers.common['Authorization'] = " your fresh authorization token available for all requests";
}

If you use react and lets see a component that handles that. i will omit the Authorization part because it can vary a lot if you using firebase, okta, keycloak or any autorization/ authentication library. If you have a jwt token to make http requests you know how to do it by now. If you need more help on that just leave a comment.

export default function App( props ){
    useEffect(()=>{
        axios.defaults.headers.common['Authorization'] = "Bearer " + jwtToken;
        // now every time your token changes you'll have axios aware of that and using that header field
    },[ jwtToken ] );

    return (
        <div>
            My react app
        </div>
    );
}

Conlusion and toughs on setting authorization as a default header for axios.

Axios documentation is pretty complete you should look at that to give you more insights on the capabilities. One thing that i have to mention is that ALL requests that your users make with axios will now leave the browser with that header, that can be a problem if you call another service on another host that doesnt need that header. Seeing the problem here? your jwt is leaking now to another services. If you only call that especific api this is just your fit. Otherwise you should take a look at axios instances and create one to make those authorization required requests. Just check the custom axios instances here https://axios-http.com/docs/instance.

Hope it helps you, be safe and have fun coding with your new default headers.