Published: February 21 2023

React + Axios - Add Bearer Token Authorization Header to HTTP Request

Below is a quick example of how to add a Bearer Token Authorization Header to an HTTP request in React using the axios HTTP client which is available on npm.

React Bearer Token with Axios

This sends an HTTP GET request to the Test JSON API with the HTTP Authorization header set to a bearer token. The Test JSON API is a fake online REST API that includes a product details route (/products/{id}), the returned product includes an id and name.

After the JSON data is returned from the API it is assigned to the product state variable and rendered in the component template.

Add Authorization Header

The auth header with bearer token is added to the request by passing a custom headers object ({ headers: { 'Authorization': 'Bearer my-token' } }) as the second parameter to the axios.get() method. The second param is the axios request config and it supports a bunch of different options for making HTTP requests including setting headers, a complete list is available at

import React, { useState, useEffect } from 'react';
import axios from 'axios';

export { App };

function App() {
    const [product, setProduct] = useState(null);

    useEffect(() => {
        const headers = { 'Authorization': 'Bearer my-token' };
        axios.get('', { headers })
            .then(response => setProduct(;
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    return (
            <h3 class="p-3 text-center">React Bearer Token with Axios</h3>
            <div className="card text-center m-3">
                <h5 className="card-header">GET Request with Bearer Token Authorization Header</h5>
                <div className="card-body">Product name: {product?.name}</div>

See the React + Axios request with bearer token on StackBlitz at

More React Axios Examples

For more React HTTP examples with Axios see React + Axios - HTTP GET Request Examples.


Need Some React Help?

Search fiverr for freelance React developers.

Follow me for updates

On Twitter or RSS.

When I'm not coding...

Me and Tina are on a motorcycle adventure around Australia.
Come along for the ride!


Supported by