How can I configure two different sets of headers, each tailored to a distinct source API, while ensuring proper authentication for both?

by

I have an existing API that uses bearer token authorization, and I’ve recently integrated a third-party application API that also requires authorization. In my code, I’m using a single component called ‘axios config’ to set up the bearer token for my API every time a page is loaded. However, when attempting to upload a video using the Vimeo API, I’m encountering authentication issues with one or both of the APIs. How can I resolve this issue and enable the simultaneous use of both APIs?

import { useEffect } from "react";
import axios from "axios";

import { getSession } from "next-auth/react";
import { signOut } from "next-auth/react";

function AxiosConfig() {
 useEffect(() => {
  axios.interceptors.request.use(async (request) => {
  const session = await getSession();
  if (session)
    request.headers.Authorization = `Bearer ${session.accessToken}`;
  return Promise.resolve(request);
});

axios.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    if (error.response.status === 401)
      signOut({callbackUrl: "/login"});

    return Promise.reject(error);
  }
  );`enter code here`
  }, []);
 
  return "";
 }

 export default AxiosConfig;

Leave a Comment