I am working on a project and trying to find out how to make a logout button on my webpage. It is using Vue2 and my script looks like this right now.
import * as msal from "@azure/msal-browser";
const msalConfig = {
auth: {
clientId: "Blank for security", // THIS SHGULD BE COMING FROM AN ENVIRONMENT VARIABLE VIA vue-cli dotenv
authority: "https://login.microsoftonline.com/common/",
redirectUri: "http://localhost:8080/",
},
};
const msalInstance = new msal.PublicClientApplication(msalConfig);
export default {
data: () => ({
msalInstance,
isLoggedIn: false,
loginError: false,
drawer: null,
}),
methods: {
async login() {
try {
const loginResponse = await msalInstance.loginPopup({
redirectUri: "http://localhost:8080/",
});
console.log(loginResponse.account.username);
this.isLoggedIn = true;
} catch (error) {
console.error(error);
this.isLoggedIn = false;
this.loginError = error;
}
},
},
}
i've looked for information about making a logout, but mainly they are all login, and i searched here, and cant seem to find how to log them out.
this is all using msar-browser. It might be something simple but i'm not 100% sure, on how to use it.
Thanks for the help!
The MSAL library for JavaScript enables client-side JavaScript applications to authenticate users using Azure Active Directory accounts (AAD), Microsoft personal accounts (MSA) and social identity providers like Facebook, Google, LinkedIn, Microsoft accounts through Azure AD B2C service.
Coming back to your problem, the logout process for MSAL takes two steps.
The PublicClientApplication object exposes APIs that perform these actions.
You can solve your problem by using logoutRedirect. Using logoutRedirect will clear local cache of user tokens then redirect the window to the server signout page as shown below.
const currentAccount = msalInstance.getAccountByHomeId(homeAccountId);
await msalInstance.logoutRedirect({
account: currentAccount,
postLogoutRedirectUri: "https:/***/loggedOutPage"
});
I would suggest to read this Logging Out of MSAL document on GitHub to get more understanding on the same.
Also check the well defined example in this Vue.js User Authentication document for more information.