Reputation: 34248
I have an SSO app (Lets say apps A and B) using Azure AD B2C each with react SPAs using @azure/msal-react
to manage the authentication. In the Azure console, I have both A and B configured with a sign out url (see below)
However when I logout from app A it doesn't automatically log out from app B as expected. Instead app B remains signed in for the current tab, but if I open app B in a second tab its logged out as expected. When I dug deeper I found that some state is left behind in session state for app B. This makes perfect sense as what I believe happens is that the signout link from app B is opened in an iframe in the background. An iframe is a new session so the session storage cant be cleared.
Is there a way of clearing the data or getting b2c not to use session storage so that logout will work across multiple sites? I realise I could probably solve this by closing the current tab on logout but it seems like a last resort to me.
Upvotes: 3
Views: 1308
Reputation: 34248
I dont at all like this solution but given that single sign out doesnt work properly otherwise here we go:
I solved this by abusing the ssoSilent method, which returns an exception if the user is not logged in. By calling ssoSilent when the user is logged in locally and then checking for that exception we can detect that the user should be signed out.
However ssoSilent puts the site into interaction mode when you initiate an ssoSilent call when the user is logged in locally but out globally. This mode is stored in the mdal.interactions.status cookie, which I delete in order to allow a local sign out.
instance.ssoSilent({...})
.catch((err)=>{
if(accounts[0] && err instanceof InteractionRequiredAuthError){
//this is a particularly dirty hack but doing this does give single sign out behavior that closes all sessions.
document.cookie = 'msal.interaction.status=; Max-Age=0';
instance.logout();
}
});
Upvotes: 1