When you have to logout of all devices through an application using msal-react, then you can surely configure the required application for signing out of all instances of logged in application as below:
MSAL.js v2 provides a logoutpopup method that clears the cache in browser storage and opens a pop-up window to the Azure Active Directory (Azure AD) sign-out page. After sign-out, Azure AD redirects the pop-up back to your application and MSAL.js will close the pop-up.
In this way, you can ensure that your react application has logged out of Azure Active Directory and all devices reciprocate the information that the user has logged out.
Signing out with a pop-up window:
import { useMsal, AuthenticatedTemplate, UnauthenticatedTemplate } from "@azure/msal-react";
function signOutClickHandler(instance) {
const logoutRequest = {
account: instance.getAccountByHomeId(homeAccountId),
mainWindowRedirectUri: "your_app_main_window_redirect_uri",
postLogoutRedirectUri: "your_app_logout_redirect_uri"
}
instance.logoutPopup(logoutRequest);
}
// SignOutButton Component returns a button that invokes a popup logout when clicked
function SignOutButton() {
// useMsal hook will return the PublicClientApplication instance you provided to MsalProvider
const { instance } = useMsal();
return <button onClick={() => signOutClickHandler(instance)}>Sign Out</button>
};
// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
return (
<>
<AuthenticatedTemplate>
<p>This will only render if a user is signed-in.</p>
<SignOutButton />
</AuthenticatedTemplate>
<UnauthenticatedTemplate>
<p>This will only render if a user is not signed-in.</p>
</UnauthenticatedTemplate>
</>
)
}
Similarly, if you refer to the method for signing out of the application using the redirect method, you will have to configure the URI to which it should redirect after sign-out by setting postLogoutRedirectUri. This URI should be registered as a redirect URI in your application registration.
For more information, kindly refer to the documentation link below:
https://learn.microsoft.com/en-us/azure/active-directory/develop/scenario-spa-sign-in?tabs=react#sign-out-with-a-pop-up-window
