Axios Interceptors to refresh the token

Question

im trying to make multiple api calls with Axios, I'm creating a Service class to make it, I'm getting a 400 code status, with 'invalid_client' header. This is how I'm building my Service class (i'm trying to make api calls to spotify api)

 import axios from "axios"; import { Credentials } from './config'; export default class SpotifyService { constructor() { const spotify = Credentials(); this.service = axios.create({ baseUrl: "https://api.spotify.com/v1/browse", }); this.service.interceptors.request.use(async (config) => { const auth = await authentication(); config.headers.Authorization = `Bearer ${auth.data.access_token}`; }); } getCategories = () => { return this.service.get("/categories?limit=6"); }; } async function authentication() { const response = await axios.post( "https://accounts.spotify.com/api/token", "grant_type=client_credentials", { "Content-Type": "application/x-www-form-urlencoded", Authorization: "Basic " + btoa('clientId:clientSecret'), } ); }

Answer 1

The issue seems to be that you are not adding the Authorization header value properly due to a typo in your line:

      config.header.Authorization = `Bearer ${auth.data.access_token}`;

It should be headers , ie:

      config.headers.Authorization = `Bearer ${auth.data.access_token}`;