Problem implementing front channel logout with angular 11 SPA and msal v2

Majumder, Joyeeta 11

Hi,

We have an angular 11 SPA registered with a redirect uri and front channel logout url in Azure B2C.
The front channel logout url points to our application and looks like this

https://xxxx.xx.com/logout.

This endpoint points to a component where we invoke msalService.logoutRedirect().

We have multiple applications connected to the single sign-on.

Logout from the SPA works perfectly.
But if I logout from the SPA, then user remains logged in, in the other applications.

We have followed all the documentation and made changes in the policy too.
But the front channel logout url does not seem to work.

While looking for a solution I came across a post here where the solution suggests that the logout url should look like this - https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<PolicyName>/oauth2/v2.0/logout

Is this the correct form for front-channel logout URL? because the documentation says :

In your application, create a dedicated logout page. This page should not perform any other function, such as acquiring tokens on page load (see below for details). Note, this page will be loaded in a hidden iframe.

Requirements for front-channel logout page
The page used for front-channel logout should be built as follows:

On page load, automatically invoke the MSAL logoutRedirect API.
In the PublicClientApplication configuration, set system.allowRedirectInIframe to true.
When invoking logout, we recommend preventing the redirect in the iframe to the logout page (see above).

Please suggest which is the correct solution.

Majumder, Joyeeta 11 Reputation points

2022-11-09T08:29:15.373+00:00

@Shweta Mathur can you please answer my question?
My question is currently the front channel logout url is configured as https://xxxx.xx.com/logout which is pointing to an endpoint in our application (Angular 11) which calls logoutRedirect. But this is not working. This url is not being invoked.

So is this the correct way to point the front channel logout url? Or should it be like this

https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<PolicyName>/oauth2/v2.0/logout

??
Shweta Mathur 29,681 Reputation points Microsoft Employee

2022-11-16T08:33:54.937+00:00

Hi @Majumder, Joyeeta ,

Just checking in to see if the below answer helped. If this answers your query, please don’t forget to click "Accept the answer" and Up-Vote for the same, which might be beneficial to other community members reading this thread. And, if you have any further query do let us know.

Thanks,
Shweta
Shweta Mathur 29,681 Reputation points Microsoft Employee

2022-11-23T07:22:19.783+00:00

Hi @Majumder, Joyeeta ,

Just checking in to see if the below answer helped. If this answers your query, please don’t forget to click "Accept the answer" and Up-Vote for the same, which might be beneficial to other community members reading this thread. And, if you have any further query do let us know.

Thanks,
Shweta

1 answer

Shweta Mathur 29,681 Reputation points Microsoft Employee

2022-11-09T11:23:24.23+00:00

Hi @Majumder, Joyeeta ,

Thanks for reaching out and apologies for delay in response.

When you redirect the user to the Azure AD B2C sign-out endpoint, Azure AD B2C clears the user's session from the browser.

To clear the Azure AD B2C cookie session you need to redirect the user to the https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<PolicyName>/oauth2/v2.0/logout through front channel logout URL which enables Azure AD B2C to notify your application when a single sign-out has been requested from another application.

When Azure AD B2C receives the logout request, it uses a front-channel HTML iframe to send an HTTP request to the registered logout URL of each participating application that the user is currently signed in to.

After logout, the user is redirected to the URI specified in the post_logout_redirect_uri parameter where you can specify the endpoint of your application which matches one of the application's configured redirect URIs before performing the redirect.

Reference: https://learn.microsoft.com/en-us/azure/active-directory-b2c/session-behavior?pivots=b2c-custom-policy&WT.mc_id=AZ-MVP-5003445#single-sign-out

Hope this will help you.

Thanks,
Shweta

-----------------------------------

Please remember to "Accept Answer" if answer helped you.
Please sign in to rate this answer.
Majumder, Joyeeta 11 Reputation points

2022-11-09T12:55:47.777+00:00

Hi @Shweta Mathur ,

Thank you very much for your reply. we have given the front channel logout url as https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<PolicyName>/oauth2/v2.0/logout, but still single sign out does not work.

This is maybe because the token stored in the local storage in browser cache is not getting cleared. How will the browser cache get cleared? Do we need to handle it in our application?

Shweta Mathur 29,681 Reputation points Microsoft Employee

2022-11-09T16:46:39.287+00:00

Yes, you need to manually clear the local storage or handle it using your application.

Christian Holes 15 Reputation points

2023-07-04T21:06:08.8966667+00:00

This is wildly confusing I think the reason being the registered app being a SPA doesn't allow you to set a logout URL. However, the OP's point was to reconfigure the Front-Channel logout URL to their applications logout scenario which is "handling it by the app."

however in your explanation you say, "To clear the Azure AD B2C cookie session you need to redirect the user to the https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<PolicyName>/oauth2/v2.0/logout through front channel logout URL which enables Azure AD B2C to notify your application when a single sign-out has been requested from another application." Can't you, in theory, have the Front-Channel logout URL got to the domain/.com/logout where that then redirects the user to the above main logout URL which I assume is scoped to the tenant's main SSO logout situation? Wouldn't this also work? I don't know if that will work because there is another assumptive statement that continues to rely on a non-existing SPA URL for logout. <<< Where does that come from?

Here you say, "When Azure AD B2C receives the logout request, it uses a front-channel HTML iframe to send an HTTP request to the registered logout URL of each participating application that the user is currently signed in to."

LOL do you see the confusion here? It makes no sense. Furthermore, and I know it's not your fault, when doing the SSO there is the ability to have the person logged in to all participating applications.

In the scenario where the user would either open another tab and check the other app i.e. app2 or open a browser and go to the other app i.e. app2 and or refresh the other open apps page i.e. app2. One would expect something to have been done to have the person signed out. Cookie cleared let's say.

So, is it not really SLO for SPA's? I don't know how this would work better for webapps but I am assuming there is a place where you can enter the logout endpoint for your app besides the front-channel logout URL.

The documentation is really really poor on this. If you could provide a more thorough answer I am sure it would help a lot of people.

Rakesh Kollipara 5 Reputation points

2023-08-02T12:39:27.3366667+00:00

I agree with Christian , documentation is not clear for this Implementation also I have noticed that front channel logout url should not be https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<PolicyName>/oauth2/v2.0/logout, it should be something within angular appliction itself. something like https://mydomain.com/globallogout as it will not allow any characters like # but angular application needs to have # in the Url. Due to which I am unable to achieve this. Hence used a Azure FD in between to rewrite the url but still unable to achieve.

Shanmugam Chinnappa 0 Reputation points

2023-09-09T11:25:54.4566667+00:00

@Shweta Mathur

Supporting Christian's comment and I too stuck in implementing Single Sign Out by following: https://learn.microsoft.com/en-us/azure/active-directory-b2c/session-behavior?pivots=b2c-custom-policy#single-sign-out

Tried to have a custom logout endpoint in the app side and configured the same as the "Front-channel logout URL"

Used "https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<PolicyName>/oauth2/v2.0/logout" as the "Front-channel logout URL".

Nothing working.

I am suspicious with the below statement from the documentation
"When Azure AD B2C receives the logout request, it uses a front-channel HTML iframe to send an HTTP request to the registered logout URL of each participating application"

If you configure the the logout URL with the way as stated in the point 2 above, how will you even send the iframe to the application? How can we trace such requests? At least based on the logout Request Initiator chain from the browser, nothing as such happens.

The documentation is super confusing with the configurations. Are these even tested before documenting? I saw User flows has the single sign out explanation weeks back and now removed. Is Single Sign Out also not working with custom policy and document has misleading explanation? Do you have a really working example somewhere in your examples?
Sign in to comment

Share via

Problem implementing front channel logout with angular 11 SPA and msal v2

1 answer