MSAL can not get access token even the refresh token still valid - reactjs

Question

Hi I am using MSAL to manage the auth part in my app, I am using ADFS, the access token duration is 5min and the refresh token is 1 hour, the problem is that after each 5min, I got a 401 from backen telling me that the access token is expired, I am using acquireTokenSilent :
import {
InteractionRequiredAuthError,
PublicClientApplication,
} from '#azure/msal-browser';
import { authorized } from './request';
const msalConfig = new PublicClientApplication({
auth: {
clientId: process.env.REACT_APP_AUTH_CLIENT_ID || '',
authority: process.env.REACT_APP_AUTH_AUTHORITY,
knownAuthorities: [process.env.REACT_APP_AUTH_KNOWN_AUTHORITIES || ''],
redirectUri: process.env.REACT_APP_AUTH_REDIRECT_URI,
postLogoutRedirectUri: process.env.REACT_APP_AUTH_REDIRECT_URI,
},
cache: {
cacheLocation: 'sessionStorage',
storeAuthStateInCookie: false,
},
telemetry: {
application: {
appName: 'SOC',
appVersion: '1.0.0',
},
},
});
export const loginRequest = {
scopes: ['User.Read', 'openid'],
};
export const getToken = (instance) =>
new Promise((resolve, reject) => {
const accounts = instance.getAllAccounts();
if (accounts.length > 0) {
const request = {
...loginRequest,
account: accounts[0],
};
instance
.acquireTokenSilent(request)
.then((response) => {
resolve(response.accessToken);
authorized(response.accessToken);
})
.catch((error) => {
if (error instanceof InteractionRequiredAuthError) {
instance.acquireTokenRedirect(request);
}
reject('Error while acquiring the token');
});
}
});
export const getIdToken = (instance) => {
const accounts = instance.getAllAccounts();
if (accounts.length > 0) {
const request = {
...loginRequest,
account: accounts[0],
};
return instance.acquireTokenSilent(request).then((response) => {
return response?.idToken;
});
}
};
export default msalConfig;
after getting the access token I pass it in headers in api calls using axios :
import axios, { AxiosInstance } from 'axios';
import { AxiosConfigs } from './Configs';
import msalInstance, { getToken } from './authProvider';
const request: AxiosInstance = axios.create({
timeout: AxiosConfigs.TIMEOUT,
baseURL: AxiosConfigs.BASE_URL,
});
request.interceptors.request.use(
async (config) => {
// Do something before request is sent
const baseURL = AxiosConfigs.BASE_URL;
const tempConf = { ...config, baseURL };
let authorization = getAuthorization();
if (!authorization) {
await getToken(msalInstance);
tempConf.headers!.Authorization = getAuthorization();
}
return tempConf;
},
(error) => Promise.reject(error),
);
const authorized = (token) => {
request.defaults.headers.common['Authorization'] = `Bearer ${token}`;
return request;
};
const getAuthorization = () => {
return request.defaults.headers.common['Authorization'];
};
export default request;
export { authorized, getAuthorization };