Axios Interceptors to refresh the token

user_12023784 0
Viewed 68

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'),
    }
  );
}

javascript
1 Answers

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}`;
user_62793850
Related