Microsoft-authentication-library-for-js: loginPopup and acquireTokenPopup not always working as expected (popup not closing)

[mathlesp]

We are having an intermittent issue with loginPopup and acquireTokenPopup. Sometime, the popup will not close after a successful login but will instead load the application inside the popup (unauthenticated). The opener window will have the session storage key "msal.error" with a value of "Invalid_state".

This is not always reproducible. Some scenarios will work 99 times out of 100 while other scenarios will always fail. We tried to build a project that would reproduce the issue as often as possible and this is what we came up with, using project https://github.com/Gimly/simpleAngularAzureB2C as a starting point (note that we actually connect to Azure Ad instead of AzureB2C):
https://github.com/Gimly/simpleAngularAzureB2C was created for issue #150 so it might actually be the same problem

• git clone https://github.com/Gimly/simpleAngularAzureB2C (as of commit b26bd80746fd0660948fffce6d7f263638aead5e)
• Register an application at "apps.dev.microsoft.com"
  
  
  
  • Add a Web platform with "http://localhost:4200/" as the Redirect Url
  
  
• Modify the file /src/app/authentication.service.ts of the simpleAngularAzureB2C project
  
  
  
  • replace line 8 (starting with "private authority =") with the following 3 lines:
  
  

  private authority = 'https://login.microsoftonline.com/[yourtenantname.onmicrosoft.com]';
  private clientId = '[your_client_id]';
  private scopes = [this.clientId];

• replace line 15 ("environment.clientID,") with "this.clientId,"
• replace line 21 ("this.clientApplication.loginRedirect(environment.b2cScopes);") with "this.clientApplication.loginPopup(this.scopes);"
• replace line 37 ("return this.clientApplication.acquireTokenSilent(environment.b2cScopes)") with "return this.clientApplication.acquireTokenSilent(this.scopes)"
• replace line 43 ("return this.clientApplication.acquireTokenPopup(environment.b2cScopes)") with "return this.clientApplication.acquireTokenPopup(this.scopes)"
  
  
  
  • Run the project
  
  
  • npm install
  
  
  • npm update
  
  
  • npm start
  
  
  • Reproduce the issue
  
  
  • Start fresh by closing all instances of Chrome and reopening Chrome
  
  
  • disable popup blocker
  
  
  • navigate to http://localhost:4200
  
  
  • click the Login button
  
  
  • follow the login process
  
  
  • The application should now be loaded inside the popup and the popup will remain open
  
  

We were able to reproduce the issue multiple times using the steps above.

When the issue occurs, we can see that the function UserAgentApplication.prototype.handleAuthenticationResponse (the instance inside the popup window) will get its msal configuration/state using window.opener.msal. If we look at this msal object, we see that the property _interactionMode is set to "redirect" when it should be "popUp".

[mathlesp]

This might actually be an issue with version 0.1.2.

I made a new repro using what I think is an official Microsoft sample: https://github.com/Azure-Samples/active-directory-b2c-javascript-angular2.4-spa

This sample uses version 0.1.1 of msal. By simply cloning the repo and updating msal to version 0.1.2, we get the behavior describe above when login in. However, the sample works correctly with version 0.1.1.

Note that I also changed the tenantConfig and authority to use Azure Ad instead of Azure B2C

[rohitnarula7176]

@mathlesp I was able to clone the sample and reproduce the issue using 0.1.2. https://github.com/Azure-Samples/active-directory-b2c-javascript-angular2.4-spa Interestingly, the samples in our repo written in plainJS were working fine for popup scenarios. There was a timing issue in using msal with the angular sample. I have made a fix for it in the dev branch. You can now just replace the msal.js file from the node_modules/msal/out folder in the angular sample with msal.js from the dist folder in the dev branch to resolve the issue. We will be releasing a new version of msal next week and these fixes along with support for commonjs and es-6 modules will be part of the release.

[EmandM]

I am still having this issue on version 0.1.3.

I can't log in to my application at all. Demo is here

[nileshanchan2015]

I am also facing this issue randomly. Mostly it comes for the first time. It redirects to the [redirect url]/null.

[tomaszzmuda]

This problem still occurs. Please reopen issue

[abegines]

this problem still occurs, with version 1.0.0 and 1.1.0.
please reopen issue

[abegines]

and 1.1.2 also not working

[abegines]

I've reproduced/workaround the problem by simply changing the execution scope of new Msal.UserAgentApplication...

In the code above, if the line init() is executed on page load (i think in the window scope) all works fine (show login popup, and back to app windows). But if I comment this line and execute init() inside of click event of a button, then it fails (show login popup, and reload app in popup window).

<!DOCTYPE html>
<html>
  <head>
    <title>LOGIN MICROSOFT TEST</title>
    <meta charset='utf-8' />
    <script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.1.2/js/msal.js"></script>
    <script type="text/javascript">

      let __msalInstance = undefined;
      const __msalConfig = {
        auth: { clientId: "f7d9d4ca-f66c-42b9-9181-xxxxx" }
      };

      const __loginRequest = {
        scopes: ["user.read"] ,
        prompt: 'select_account',
      }

      init(); // << this makes it work!

      function init()
      {
        __msalInstance = new Msal.UserAgentApplication(__msalConfig);
        console.log(__msalInstance);
      }

      function login()
      {
        __msalInstance.loginPopup(__loginRequest).then(logged);
      }

      function logged(loginResponse)  {
        console.log('onLoged=', loginResponse)
      }
    </script>

  </head>

  <body>
    <button onclick="init();">INIT</button><br>
    <button onclick="login();">LOGIN</button><br>
  </body>
</html>