Using MSAL with React, acquireTokenSilent causes app refresh and fails

Viewed 2906

I am having problems getting MSAL(x) working - The login popup succeeds, but when I try to retrieve and access token from the id token using acquireTokenSilent, it causes the app to reload (all resources, per dev tools network tab), and throws an error 'Token renewal operation failed due to timeout: null'. I've searched for relevant SO questions / google, but have had no luck finding similar issues. The crazy thing is, it WORKED the other day and just stopped - even reverting to the same code does not resolve the issue.

Using acquireTokenPopup in the silent's error handler displays a popup, but won't allow login with the same user ('We don't recognize this domain name') but shows the correct MS App name. This is driving me crazy.

Relevant code (in a React component click handler):

onMSLogin() {
    const {  msLoginFailure } = this.props;
    const userAgentApplication = this.userAgentApplication;
    userAgentApplication.loginPopup(['user.read'])
      .then(function () {
        console.log('User login success');
        const scopes = ['User.Read'];
        userAgentApplication.acquireTokenSilent(scopes).then((accessToken) => {
          console.log('Access token acquired (silent): ', accessToken);
          this.getGraphData(accessToken);
        }, (error) => {
          console.error('Silent token fail: ', error);
          userAgentApplication.acquireTokenPopup(scopes).then((accessToken) => {
            console.log('Access token acquired (popup): ', accessToken);
          });
        })
      }, function (error) {
        // handle error
        console.log('MS Login Failure: ', error);
        if (msLoginFailure) msLoginFailure(error);
      });
}
1 Answers
Related