'Why I'm getting an empty access token from azure b2c using vuejs 3

I'm using the last version of MSAL.js (@azure/msal-browser": "^2.23.0"),I can successfully authnenticat but the access token is empty I dont know why. I'm posting the code here I hope anyone could help please ?

export const useAuthUserStore = defineStore("auth_user", {
state: () => ({
msalConfig: {
  auth: {
    clientId: "xxx",
    authority: xxxxxxxx,
    knownAuthorities: [xxxxxxx.onmicrosoft.com],
    redirectUri: http://localhost:8080/
  },
  cache: {
    cacheLocation: 'localStorage',
  },
},
accessToken: "",

isAuthenticated:false,
}),

get the accesstoken method :

   async getAccessToken(){
  let request = {
    scopes: [https://graph.microsoft.com/offline_access,https://graph.microsoft.com/openid],
   // scopes: ['openid',  'offline_access' ],
   extraScopesToConsent:['<tenant>.onmicrosoft.com/api/read']
  };
  const msalInstance = new PublicClientApplication(
   this.authStore.$state.msalConfig
  );
  try {
    let tokenResponse = await msalInstance.acquireTokenSilent({
      account: this.account ,
        scopes: [https://graph.microsoft.com/offline_access,https://graph.microsoft.com/openid]

    });
     console.log('tokenResponse :',tokenResponse)
    return tokenResponse
  } catch (error) {
      console.error( 'Silent token acquisition failed. Using interactive mode',error );
      let tokenResponse = await msalInstance.acquireTokenPopup(request);
      console.log(`Access token acquired via interactive auth ${tokenResponse.accessToken}`)
  }

},

handleResponse(response) {

  console.log('handleResponse.......')

  let accountId = "";

  const loginRequest = {

   scopes: [https://graph.microsoft.com/offline_access,https://graph.microsoft.com/openid],
     }

  console.log('handleResponse.......',response)

    if (response !== null) {
        accountId = response.account.homeAccountId;
        console.log(accountId)
        // Display signed-in user content, call API, etc.

    } else {

        // In case multiple accounts exist, you can select

        const currentAccounts = this.$msalInstance.getAllAccounts();
        if (currentAccounts.length === 0) {
            // no accounts signed-in, attempt to sign a user in
            this.$msalInstance.loginRedirect(loginRequest);
        } else if (currentAccounts.length > 1) {
         // console.log('handleResponse.......96')

            // Add choose account code here

        } else if (currentAccounts.length === 1) {

         // console.log('handleResponse.......23')

            accountId = currentAccounts[0].homeAccountId;

           // console.log('handleResponse 111.......',accountId)

        }

    }

}

the result : enter image description here

could you help please ? is there any missing code that I have to add ?



Solution 1:[1]

Using the acquireToken methods supplied by MSAL, you can receive access tokens for the APIs your app needs to call.

Source Code:- GitHub Sample

For more information please refer the below links:-

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 AjayKumarGhose-MT