Question

0

20

Views

Logout popup not working. How can I make one in MSAL

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!

about 1 month ago ·

Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Loading

Answer 1 · 2022-07-10T11:31:59.895Z

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.

Clear the MSAL cache.
Clear the session on the identity server.

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.