Add logoutPopup API to MSAL Browser

[jonstelly]

Library

• msal@1.x.x or @azure/msal@1.x.x
• @azure/msal-browser@2.x.x
• @azure/msal-angular@0.x.x
• @azure/msal-angular@1.x.x
• @azure/msal-angularjs@1.x.x

Description

The loginPopup() call behaves in a SPA-friendly way, allowing us to stay on our page and authenticate without having to re-load our page. I don't see a way right now to have similar behavior for logout().

The logout() method navigates to https://login.microsoftonline.com/common/oauth2/v2.0/logout?post_logout_redirect_uri=...&client-request-id=... and there isn't a way to prevent this, allowing a SPA to stay loaded and simply clear out the MSAL credentials/session.

Is it possible to make a logout call without navigating to login.microsoftonline.com? Or can we get a logoutPopup() added that shows the Microsoft UI prompting for which account to log out inside a popup window instead of the main window?

abacritt/angularx-social-login#306 is an issue where I'm trying to add MSAL authentication to an Angular login library and the MSAL library/provider is the only one that doesn't seem to support a logout without navigating away from the Angular app.

[jasonnutter]

@jonstelly Thanks for the request, we've heard this request from a few customers, we'll certainly take it under consideration, thanks!

[javila35]

I'm also interested in this sort of functionality. Glad to see it was brought up recently. Thank you! 🙏🏼

[fq-selbach]

This is an absolute must have! Since we work in an Iframe and the logout page cannot be called from within we cannot properly logout atm :-( (or am I missing something here?).

In the meantime would it be possible to get the logout URL and client-request-id somehow to create our own popup via window.open(...)?

[jasonnutter]

See linked PR for proposed design. If you would like this functionality today, you can use the onRedirectNavigate callback to get the url and open the popup yourself. See this sample for an example of how to do that: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/samples/msal-browser-samples/ChromiumExtensionSample/auth.js#L100-L105

[fq-selbach]

you can use the onRedirectNavigate callback to get the url and open the popup yourself

Oh wait, this is happening BEFORE the logout URL is called? I was assuming this is the redirect AFTER logout. This is actually perfect then 👍
... thinking about it again it actually makes much more sense 😅

[fq-selbach]

@jasonnutter
It is worth noting that the official example (related tutorial) is using an outdated version of the library by default (2.7.0)!
I had to change the version to latest (2.11.2) AND remove the second CDN since this one was always overwriting my first entry.

Now I actually get the URL :-)

One general comment: The whole structure of the MSAL project is highly confusing. There are dozens of pages with different versions and tutorials for this library and half of them (at least) are outdated and have been replaced later. Maybe someone can clean up a bit before you release v3.0.0 ;-)

[pkanher617]

@fq-selbach Thanks for calling this out. We need to make sure we are updating the sample repos with the latest versions of the release. Glad to hear you were able to resolve your issues!

There are dozens of pages with different versions and tutorials for this library and half of them (at least) are outdated and have been replaced later

Is the tutorial that you linked the only one that is outdated, or are you seeing other areas that need to be updated?

[jasonnutter]

@jasonnutter
It is worth noting that the official example (related tutorial) is using an outdated version of the library by default (2.7.0)!
I had to change the version to latest (2.11.2) AND remove the second CDN since this one was always overwriting my first entry.

Now I actually get the URL :-)

One general comment: The whole structure of the MSAL project is highly confusing. There are dozens of pages with different versions and tutorials for this library and half of them (at least) are outdated and have been replaced later. Maybe someone can clean up a bit before you release v3.0.0 ;-)

Thanks for the feedback, we'll make sure to get those updated. cc @derisen

[fq-selbach]

Is the tutorial that you linked the only one that is outdated, or are you seeing other areas that need to be updated?

Its hard to say because the very first thing I've tried was based on an outdated YouTube Video (I can't recall the link, but as far as I remember it was on one of Microsofts channels) that used examples of v1 of the library which lead me down a very dark path of failed authentication attempts sometimes mixing v1 and v2 docs 😓. After a few weeks I've tried again and my web-search led me to all kinds of new github.com/AzureAD/, GitHub Wiki, azuread.github.io and Microsoft Docs pages that all had the same topic but different approaches mostly related to all the platform and authentication-flow flavors 🙈 . Sometimes links in the issues would even refer to the "dev" branch of a repository showing new versions of the same stuff ... at some point I just got lost.

Glad to hear you were able to resolve your issues!

I'm able to create my own popup window now using var logoutWin = window.open(url, "_blank", "top=5,left=5,width=480,height=640");
Obviously my original page doesn't know when this window has completed its work. Is there any chance to catch some event related to the logout? The login popup seems to be able to communicate with the original page (how is this working btw??).

Another hint for people trying to use the logout inside an iframe. You need to set the allowRedirectInIframe: true config option as well:

const msalConfig = {
    auth: {
        ...
    },
    cache: {
        ...
    },
    system: {	
        ...
	allowRedirectInIframe: true
    }
}

[jasonnutter]

Obviously my original page doesn't know when this window has completed its work. Is there any chance to catch some event related to the logout? The login popup seems to be able to communicate with the original page (how is this working btw??).

The main window will not know logout has completed until the popup has been redirectd to the post logout redirect uri (assuming that uri is the same domain as the app, which it should be). The linked PR demonstrates how we will do this.

Another hint for people trying to use the logout inside an iframe. You need to set the allowRedirectInIframe: true config option as well:

While this will remove the restriction in MSAL, the logout page itself will not render in the iframe, as AAD sets X-FRAME-OPTIONS to DENY, preventing the logout page from being rendered in an iframe.

[tnorling]

All, please see the design proposal for this feature: #3123. We would love to get your feedback even if it's just "looks great". After we've given ample time to review and provide thoughts we'll finalize the linked PR and get this released!

[jonstelly]

Looks good to me!

I'd also like to say thanks for posting that design proposal for public review before the feature is finished/released. You mention that it's an attempt to improve transparency and improving public visibility into your development process isn't always easy, but I appreciate you guys spending the effort and I'm sure I'm not alone. Thanks.

[fq-selbach]

While this will remove the restriction in MSAL, the logout page itself will not render in the iframe, as AAD sets X-FRAME-OPTIONS to DENY, preventing the logout page from being rendered in an iframe.

Yes, I just needed it to get the URL and then call logoutWin = window.open(url, "_blank", "top=5,left=5,width=480,height=640") ;-)

All, please see the design proposal for this feature: #3123. We would love to get your feedback even if it's just "looks great". After we've given ample time to review and provide thoughts we'll finalize the linked PR and get this released!

Looks good so far, I was just wondering if the option to submit an account is deprecated? I'd prefer to have a logout where the user doesn't really have to interact with the popup at all, especially since his locally stored credentials will be deleted in any case.

[tnorling]

Looks good so far, I was just wondering if the option to submit an account is deprecated? I'd prefer to have a logout where the user doesn't really have to interact with the popup at all, especially since his locally stored credentials will be deleted in any case.

@fq-selbach The account parameter will not be deprecated and will be used the same way it is today. However, if and until changes are made server-side, ending the server session requires interaction regardless of whether you use the existing logout API or the new logoutPopup API. If you don't care about ending the server session and only want local logout you can use the existing logout API and provide the onRedirectNavigate callback and have it return false, which will skip the redirect to the logout endpoint. Please be aware though, that doing this means that the next login attempt will automatically log the user back in without asking for credentials, as the server session is still active.