Refresh the token in axios interceptors not working

Question

I am using react-adal library to connect to ADFS. I am using axios interceptor to aquire token which will refresh the token silently as written in the docs, But it refresh the page when token is expired, let's user is filling the form and token expire, it refresh the page and lost all the data. Please find the below code:

    axiosApi.interceptors.request.use((config) => {
return new Promise((resolve, reject) => {
let azureToken = adalInstance.getCachedToken(adalConfig.resource)
if (azureToken) {
    adalInstance.acquireToken(adalConfig.endpoints.api, (message, token, error) => {
                console.log(error);});
                config.headers.Authorization = "Bearer " + azureToken;
               
                resolve(config);}
            else {
                
                adalInstance.login();
            }
    });
});

Is there any way it can be done in the background and user doesn't have to see any interruption.

Answer 1

There is no guarantee that silent token acquisition will always succeed, so applications should include error handling that invokes an interactive method to acquire tokens (which it appears the app is doing, based on the code provided).

ADAL.js provides an acquireTokenPopup method which can be used in this situation (instead of acquireTokenRedirect) to keep the user on the same page not interrupt the flow.