How to correctly implement Single Log Out in Azure AD B2C for SPA's?

Question

Scenario:

We have 2 SPA's built using Angular. Both of them use OIDC. We are trying to get Single Log Out to work smoothly. Till now, we have managed to get it working partially. We have followed the steps provided here - 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

Steps

• User logs in to App A in a browser tab.
• User accesses App B in a different browser tab and is automatically logged in (expected behaviour).
• User logs out of App B.
• User comes back to the browser tab with App A open. If the user refreshes the application, the user is logged out. However, if the user does not refresh the application, the user is still logged in. We have validated that the user's session data is cleared from App A.

Is it possible to have a seamless experience here, so that the user does not have to refresh the application to be logged out?

Note - While doing the configuration for this, we came across this thread - https://learn.microsoft.com/en-us/answers/questions/1057477/how-to-implement-single-sign-out-in-azure-ad-b2c-u.html. This is a bit confusing since the answer provided here states that the Front-Channel Logout URL should be this - https://

Answer 1

Hi @Sanmoy Roy , thanks for the question. If I understand correctly, you want all tabs to log out when another a user signs out from another tab? The session for App A will still be active until you refresh the page, try to navigate away from that current page, or the user's token expires. So this seems to be the expected behavior unless I'm missing something. The answer on this thread also details this:

"If you log out from the web application with SAML Logout then user should be able to logout from the Azure portal. But note that this will not happen automatically. You have to refresh the page and then you should see that Portal will show the Azure AD login page for the user, that means user is logged out." The exact setup in that thread differs but the end result is the same. Please let me know if you have any questions and I can help you further!

If this answer helped you please mark it as "Verified" so other users can reference it.

Thank you,
James

Answer 2

@James Hamil - I have achieved what I wanted. It is possible to have a seamless logout experience. For that, we need to use the event system exposed by @azure/msal-browser. More details can be found here - https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/v2-docs/events.md#syncing-logged-in-state-across-tabs-and-windows.