Using MSAL (Microsoft Authentication Library) with REDUX - reactjs

Question

I am trying to use the MSAL library within REDUX for auth but having some trouble. When I make a react only app and do the same thing, I get the access token successfully but trying to use it in REDUX, I always get a timeout when trying to fetch the access token.
function Auth() {
var userAgentApplication = new Msal.UserAgentApplication(*my app id*, null, function (errorDes, token, error, tokenType) {
// this callback is called after loginRedirect OR acquireTokenRedirect (not used for loginPopup/aquireTokenPopup)
});
return new Promise((resolve, reject) => {
console.log('inside the promise');
userAgentApplication.loginPopup(["user.read"]).then((token) => {
console.log("Successfully got id token");
console.log("first token: ", token);
console.log(userAgentApplication.getUser().name);
userAgentApplication.acquireTokenSilent(["user.read"]).then((token) => {
resolve(token);
}, function(error) {
reject(error);
});
}, function (error) {
reject(error);
});
});
}
This is the code I have but I always get the following error Token renewal operation failed due to timeout: null
When I try to do this in plain HTML or react only app, it works perfectly. Any sort of help would be highly appreciated.

Answer 1

see if adding a 'catch' and if condition helps to identify the problem.
function Auth() {
return new Promise((resolve, reject) => {
const userAgentApplication = new Msal.UserAgentApplication(*my app id*, null, function (errorDes, token, error, tokenType) {
// this callback is called after loginRedirect OR acquireTokenRedirect (not used for loginPopup/aquireTokenPopup)
});
console.log('inside the promise');
userAgentApplication.loginPopup(["user.read"])
.then((token) => {
console.log("Successfully got id token");
console.log("first token: ", token);
console.log(userAgentApplication.getUser().name);
if (userAgentApplication.getUser()) {
userAgentApplication.acquireTokenSilent(["user.read"])
.then((token) => {
resolve(token);
})
.catch((error) => {
reject(error);
});
} else {
reject("User not logged in");
}
})
.catch((error) => {
reject(error);
});
});
}