loginPopup doesn't properly close itself

[dfederm]

Using version 0.1.3

Code:

let microsoftApp = new UserAgentApplication("my-app-id", null, null);
microsoftApp.loginPopup(["openid", "email"])
    .then(idtoken => /* do something with the id token */)
    .catch(error => /* do something with the error */);

Expected behavior:
A login popup pops up and after the user logs in the pop up closes itself and the loginPopup promise resolves (or rejects).

Actual behavior:
A login popup pops up and after the user logs in the pop up redirects back to my site in the pop up.

[dfederm]

I think I found a workaround. If I create a UserAgentApplication on that redirected page, it closes the popup and works as I expect it to.

It seems like a weird requirement to require the redirect. This is an SPA and I only need the id token (to auth with my application). Both the Google and Facebook JS libraries can handle this scenario without requiring a redirect in the pop up.

[rohitnarula7176]

@dfederm This is by design. All the tokens we receive are in the form of a redirect response on the redirectURI page and you need an instance of userAgentApplication on that page for MSAL to process that response and close the popup. Closing this issue as this is by design.

[dfederm]

@rohitnarula7176 that's extremely inconventient. An SPA has to stand up a new endpoint simply to include the msal lib again so it can close itself?

The Google and Facebook JS libraries can do it, why can't msal?

[volosovich]

I agree with @dfederm it's extremely inconventient.
What problem do you fix with this design?
All oAuth providers sent token to promise resolve and close popup. It's default behavior for all SPA's

[eugeniymatkovskiy]

I encountered the problem to implement this library to my application because of inappropriate behaviour.
It's time consuming due to its inflexibility. I couldn't initialize the library after AJAX request - wtf???
This behaviour is inconsistence with usual flow (like in Google and Facebook), so I have to add some hacks to my application

[chetanku]

@dfederm how did you fix this problem? new to this, why do we have to create UserAgentApplication again in the redirecte URI? how do we do it?

[dfederm]

@chetanku my workaround was just to load the entire SPA in the redirect, and the SPA creates a UserAgentApplication at app startup if the hash include "id_token". It's pretty terrible and I only have to do this workaround for MSA log in support; Facebook and Google's libraries work perfectly.

    // This is weird but Microsoft login redirects back to the site and expects it to create the object before it closes the popup.
    // See https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/174
    if (location.hash.includes("id_token")) {
      new UserAgentApplication("4ecf3d26-e844-4855-9158-b8f6c0121b50", null, null);
    }

[chetanku]

@dfederm Thank you so much, this is very weird. Hope Microsoft fixes this soon.

[volosovich]

wow, it's undocumented behavior.
I need to have id_token in URL and after create UserAgentApplication I can get access token, save it and close modal.
I think, this information need to be added to MSAL wiki pages.

[neural22]

This behaviour is absolutely incomprehensible, by definition the authentication process is completed when the token is returned by the service, so why should we need to instantiate an other UserAgentApplication just to avoid cancel operation error closing the popup? It does not make sense at all...

[mrlubos]

Hi @rohitnarula7176, I am trying to understand why the popup would not get closed after authentication on its own. Is there an application that uses this kind of workflow you could reference? I cannot imagine where this design would be more convenient than the traditional implementation. Thanks!

[jcabrito]

// This is weird but Microsoft login redirects back to the site and expects it to create the object before it closes the popup.
// See #174
if (location.hash.includes("id_token")) {
new UserAgentApplication("4ecf3d26-e844-4855-9158-b8f6c0121b50", null, null);
}

Where exactly do i need to put this code in reactjs?

[Ethan-Arrowood]

@jcabrito i added it to my componentWillMount on the root react component