Single Sign Out does not work using msal & Entra Front Channel Logout

Question

Hello, I've come across a problem when trying to implement single sign out.

Basically, I've created 2 identical react apps, let's call them app1 and app2. There is no back end. Both are registered in Entra. Signing in works fine, single sign in also. I used instructions from here (also looking at the provided samples inside the link). There are 3 important parts of the app:

msalConfig which is used in MsalProvider

export const msalConfig: Configuration = {
    auth: {
        clientId: "client-id-of-app-1-or-2",
        authority: "https://mytenant.ciamlogin.com/",
        redirectUri: "/",
        postLogoutRedirectUri: "/"
    },
    cache: {
        cacheLocation: "localStorage",
        storeAuthStateInCookie: false,
    },
    system: {
        allowRedirectInIframe: true
    }
};

const msalInstance = new PublicClientApplication(msalConfig);
msalInstance.initialize().then(() => {
    if (!msalInstance.getActiveAccount() && msalInstance.getAllAccounts().length > 0) {
        msalInstance.setActiveAccount(msalInstance.getAllAccounts()[0]);
    }

    msalInstance.enableAccountStorageEvents();
    msalInstance.addEventCallback((event: any) => {
        if (event.eventType === EventType.LOGIN_SUCCESS
            ||
            event.eventType === EventType.ACQUIRE_TOKEN_SUCCESS
            ||
            event.eventType === EventType.SSO_SILENT_SUCCESS
        ) {
            const account = event.payload!.account;
            msalInstance.setActiveAccount(account);
        }
    });
});

ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
        <MsalProvider instance={msalInstance}>
            <MsalAuthenticationTemplate interactionType={InteractionType.Redirect}>
                <BrowserRouter>
                    <App />
                </BrowserRouter>
            </MsalAuthenticationTemplate>
        </MsalProvider>
    </React.StrictMode>
);

Then some Home page:

function Home() {
    const { instance, accounts } = useMsal();
    const account = useAccount(accounts[0] || {});

    const handleLogout = () => {
        instance.logoutRedirect({
            account: instance.getActiveAccount(),
            postLogoutRedirectUri: "/"
        });
    };

    return (
        <>
            <h1>Hello {account?.username} </h1>
            <button onClick={handleLogout}>Logout</button>
        </>
    );
}

And then component for /logout:

function Logout() {
    const { instance } = useMsal();

    useEffect(() => {
        instance.logoutRedirect({
            account: instance.getActiveAccount(),
            onRedirectNavigate: () => false
        })

        // ALSO TRIED THIS
        // instance.clearCache();
    }, [ instance ]);

    return (
        <div>Logout</div>
    )
}

Both apps have Front-channel logout URL registered using their localhosts, e.g. https://localhost:5173/logout

When I click the "Logout" button from Home component in app1, I am successfully logged out from app1, but nothing happens in app2 (or vice versa). I have however noticed, that app1 gives this error in console:

Refused to display 'https://mytenant.ciamlogin.com/' in a frame because it set 'X-Frame-Options' to 'deny'.

What am I missing?

Thanks

Michal

Answer 1

Hello @Michal Durista ,

I understand that Single Sign-Out does not work when using MSAL and Entra Front-Channel Logout. When you click the 'Logout' button from the Home component in app1, you are successfully logged out of app1, but nothing happens in app2 (and vice versa). However, you noticed that app1 shows the following error in the console: Refused to display 'https://mytenant.ciamlogin.com/' in a frame because it set 'X-Frame-Options' to 'deny'.

You are getting this error because the X-Frame-Options and content-security-policy header is a security measurement against clickjackingthe thing is, not all browsers have an implementation that takes that header into consideration when processing a returned response.

Microsoft Entra ID does not allow the sign-in pages to render inside of an iFrame. This is not a configurable option and we do not allow any exceptions. For more information see https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/iframe-usage.md

So you have to configure the X-frame-Options to "SAMEORIGIN" or "ALLOW-FROM".

For additional Information you can follow: https://support.microsoft.com/en-US/office/mitigating-framesniffing-with-the-x-frame-options-header-1911411b-b51e-49fd-9441-e8301dcdcd79

Hope this information helps. Let us know if you have any additional queries. Happy to assist you further.