Axios helper file with interceptors, how to turn it into a context provider?

I have an Axios helper file I have created to add interceptors to my Axios instance. The problem is I am making a hook call in there: const { instance } = useMsal(); and after some research, I have learned you cannot do that outside of a functional component. So now I think from digging more into this, the only way is to make a Axios provider and wrap my app in that? Is that the best way? If so, how do I do that? Here is the code in my Axios file:

import axios from 'axios';
import { useMsal} from '@azure/msal-react';

const serverURL =
    import.meta.env.MODE === 'development'
        ? 'http://localhost'
        : import.meta.env.VITE_BASE_URL;

const middlePart = import.meta.env.VITE_API_PATH;

const axiosInstance = axios.create(
    {baseURL:serverURL + middlePart + '/'}
);

const { instance } = useMsal();  // <-- here is the culprit hook
const tokenRequest = {
    account: instance.getActiveAccount(), // This is an example - Select account based on your app's requirements
    scopes: [import.meta.env.VITE_QUOTES_API_SCOPE]
};

import axios from 'axios';
import { useMsal} from '@azure/msal-react';

const serverURL =
    import.meta.env.MODE === 'development'
        ? 'http://localhost'
        : import.meta.env.VITE_BASE_URL;

const middlePart = import.meta.env.VITE_API_PATH;

const axiosInstance = axios.create(
    {baseURL:serverURL + middlePart + '/'}
);

const { instance } = useMsal();  // <-- here is the culprit hook
const tokenRequest = {
    account: instance.getActiveAccount(), // This is an example - Select account based on your app's requirements
    scopes: [import.meta.env.VITE_QUOTES_API_SCOPE]
};

Rest of the code is pasted below.

Unknown User•125d ago

dmikester1•125d ago

Here is the rest of that code from above:

let result: { accessToken: string }, msalError: string;
axiosInstance.interceptors.request.use((config) => {
    config.headers['request-startTime'] = new Date().getTime();

    instance
        .acquireTokenSilent(tokenRequest)
        .then((response) => {
            // console.log({ response });
            result = { accessToken: response.accessToken };
        })
        .catch((e) => {
            console.log({ e });
            msalError = e.message;
        });

    if(result && result.accessToken) {
        const token = result.accessToken; //store.getState().session.token;
        config.headers.Authorization = token;
    }
    return config;
});

axiosInstance.interceptors.response.use((response) => {
    const currentTime = new Date().getTime();
    const startTime = response.config.headers['request-startTime'];
    response.headers['request-duration'] = currentTime - startTime;
    return response;
});

export default axiosInstance;

let result: { accessToken: string }, msalError: string;
axiosInstance.interceptors.request.use((config) => {
    config.headers['request-startTime'] = new Date().getTime();

    instance
        .acquireTokenSilent(tokenRequest)
        .then((response) => {
            // console.log({ response });
            result = { accessToken: response.accessToken };
        })
        .catch((e) => {
            console.log({ e });
            msalError = e.message;
        });

    if(result && result.accessToken) {
        const token = result.accessToken; //store.getState().session.token;
        config.headers.Authorization = token;
    }
    return config;
});

axiosInstance.interceptors.response.use((response) => {
    const currentTime = new Date().getTime();
    const startTime = response.config.headers['request-startTime'];
    response.headers['request-duration'] = currentTime - startTime;
    return response;
});

export default axiosInstance;

dmikester1•125d ago

I did some more digging and found that there is a way to pass data into the axios interceptor when calling e.g. axios.get(...) => https://stackoverflow.com/a/70647045/571723

Stack Overflow

Pass parameter/argument to axios interceptor

How do I send custom parameters to the axios interceptor? I am using an interceptor like this: window.axios.interceptors.request.use(function (config) { if (PASSED_PARAM == true) {

Reactiflux Join

230KMembers

View on Discord

fooneyp – 12-56 Jan 12I have a node project that converts files so I set up workers to run faster and it does by a lot. Th nightskyjeff – 01-27 Jan 10``` const feed = Readable.from([ 'abc', 'def', 'ghi', 'jkl' ]).pipe(process.stdout); console.eslachance – 12-53 Jan 7Anyone know how to tell vite to use a custom rendered correctly?hoangvu12 – 20-03 Jan 5Is rust faster than javascript in I/O-intensive work? I have a JS script that doing automating (fetc Next JS Module With wasm File and Module Not Found ErrorI'm trying to run code from an npm library called `opencascade`. I installed it using `npm install o snowberb – 09-35 Jan 2What's better? `const header = isPhone ? intl.formatMessage({ id: 'testimonials.titleMobile' }) : in dmikester1 – 00-53 Jan 1I have an array of numbers that looks like this: `[36, 4, 40, -40]` I want to remove all numbers th alexnoah.dev – 11-30 Dec 30How can I make this code shorter, ```js if(formData && formData.email && formData.password && formDa