MSAL JS throws multiple_matching_tokens_detected exception while renewing id token using acquireTokenSilent function

Question

I'm using MSAL for authentication in a react app. I'm using localStorage as caching storage for the UserAgentApplication instance. The loginPopup method provides an idToken which is valid for an hour. For the purpose of my application, I want to refresh this idToken silently when it is expired. As per all the documentations, acquireTokenSilent function will automatically refresh the token if it's expired otherwise the cached token will be provided if the client id is passed as scope parameter.

However, I'm getting following exception upon calling acquireTokenSilent function.

The cache contains multiple tokens satisfying the requirements. Call AcquireToken again providing more requirements like authority|multiple_matching_tokens_detected

Surprisingly this exception is thrown on chrome but not on edge browser. Is there any browser specific caching stored in file system? I've cleared the cookies and local storage data in chrome but nothing helped.

Here are some responsible code snippets:

login = () => {
return this.app.loginPopup(this.applicationConfig.graphScopes).then(
  idToken => {
    return idToken;
  },
  () => {
    return null;
  }
);

};

getToken = () => {
return this.app
  .acquireTokenSilent([this.applicationConfig.clientID], '', this.app.getUser())
  .then(
    idToken => {
      return idToken;
    },
    error => {
      console.log(
        "Error occured while loading silent token. Error - ",
        error
      );
    }
  );

};

First I try to call the getToken function and if token is not found then I'm redirecting user to the login page where the login function is used. Please note that I'm working with idToken in both cases but not accessToken.

Any help is much appreciated to make this work in chrome.

vishal pankhaniya vishal pankhaniya · Accepted Answer · 2019-08-21T09:51:10

Try this code i think It's work for you.

import { MsalService } from "@azure/msal-angular";

        msalConfig = {
            auth: {
                clientId: 'Your Client Id Here', //This is your client ID,
                authority: "https://login.microsoftonline.com/common", //This is your tenant info
            },
            cache: {
                cacheLocation: "localStorage",
                storeAuthStateInCookie: true
            }
        };
        myMSALObj = new Msal.UserAgentApplication(this.msalConfig);

        let requestObj = { scopes: ["user.read"] }
        let obj = this.myMSALObj;
        obj.loginPopup(requestObj).then(function (loginResponse) {
            obj.acquireTokenSilent(requestObj)
                .then(function (tokenResponse) {
                    console.log(tokenResponse.accessToken);
                    callmicrosoftLogin(tokenResponse.accessToken)
                }).catch(function (error) {
                    console.log(error);
                })
            obj.acquireTokenPopup(requestObj)
                .then(function (tokenResponse) {
                    console.log(tokenResponse.accessToken)
                }).catch(function (err) {
                    console.log(err);
                })
        }).catch(function (error) {
            console.log(error);
        });

MSAL JS throws multiple_matching_tokens_detected exception while renewing id token using acquireTokenSilent function

1 Answers