How to implement loginRedirect using vuejs and azureb2c and msal.js

Question

I'm trying to implement an SSO using Azure b2c and Vuejs and MSAL, but I'm getting some issues.

msalConfig: {
      auth: {
        clientId: "******dd03",
        authority:"https://*****",
        knownAuthorities: [
          "******hb2cdev.onmicrosoft.com",
        ],
        redirectUri:'localhost:8080/#/main'
      },
      cache: {
       cacheLocation: "localStorage",
      },
     },
    accessToken: ""

component configuration :

    async created() {
     this.$msalInstance = new PublicClientApplication(
     this.authStore.$state.msalConfig
     );
   },

mounted() {
 console.log("msqlInstance :", this.$msalInstance);
 const accounts = this.$msalInstance.getAllAccounts();
 if (accounts.length == 0) {
  console.log("empty");
  return;
 }
 this.account = accounts[0];
 console.log("test :", this.account);
 this.$emitter.emit("login", this.account);
},

methods: {
  async SignIn() {
    console.log("test");
    await this.$msalInstance
    .loginPopup({})
    .then((res) => {
      const myAccounts = this.$msalInstance.getAllAccounts();
      this.account = myAccounts[0];
      this.$emitter.emit("login", this.account);
    })
    .catch((error) => {
      console.error(`error during authentication: ${error}`);
    });
},
async SignOut() {
  await this.$msalInstance
    .logout({})
    .then((res) => {
      this.$emitter.emit("logout", "logging out");
    })
    .catch((error) => {
      console.error(error);
    });
},
},

this code is working as expected but when I replace .loginPopup({}) on the Sign in method by loginRedirect to avoid having the popup I'm getting this error :

UserAuth.vue?212c:67 error during authentication: BrowserAuthError: interaction_in_progress: Interaction is currently in progress. Please ensure that this interaction has been completed before calling an interactive API.

Answer 1

To achieve the above requirement ,

First of all there are following prequisite we need in our environment;

• An Azure Subscription

• An Azure AD B2C Tenant/instance

• Visual Studio Code

• Vue.js

• Node.js / NPM

• .NET Core 3.1 or later (if you want to build and run the API)

• TypeScript - yes, after popular demand, we used TS for this project

As you have already setup your environment , make sure that you have following in your .env file.

VUE_APP_MSAL_CLIENT_ID=<your client id>
VUE_APP_MSAL_LOGIN_AUTHORITY=https://<yourB2Cname>.b2clogin.com/<yourB2Cname>.onmicrosoft.com/<YourSignupSigninPolicyName>/
VUE_APP_MSAL_PASSWORD_RESET_AUTHORITY=https://<yourB2Cname>.b2clogin.com/<yourB2Cname>.onmicrosoft.com/<YourPasswordResetPolicy>/
VUE_APP_MSAL_KNOWN_AUTHORITY=<yourB2Cname>.b2clogin.com

For complete setup please refer this blog post.