microsoft-authentication-library-for-js: Calling two backend APIs not possible with interceptor => "The cache contains multiple tokens satisfying the requirements"

Library

• [x ] msal@1.4.1
• [ x] @azure/msal-angular@1.1.1

Framework

Angular 10.1.4

Description

If I try to call two different APIs from my Angular application, msal throws an error that the token cache contains multiple tokens satisfying the requirements. In both cases I have the same client id and authority. Only the scopes are different as you can see in my configuration. If I delete the token cache and reload my page, it works for a single time. After reloading the page the error message appears again. I am using the http interceptor to protect my API calls.

Error Message

ClientAuthError: Cache error for scope openid,profile: The cache contains multiple tokens satisfying the requirements. Call AcquireToken again providing more requirements like authority… ClientAuthError: Cache error for scope openid,profile: The cache contains multiple tokens satisfying the requirements. Call AcquireToken again providing more requirements like authority…

MSAL Configuration

MsalModule.forRoot({
      auth: {
        clientId: 'd51ec65d-21a3-4859-ac1c-dd833e524d85',
        authority: 'https://login.microsoftonline.com/organizations/',
        redirectUri: 'http://localhost:4200',     
        validateAuthority: true,
        postLogoutRedirectUri: "http://localhost:4200/",
        navigateToLoginRequestUrl: true,           
      },
      cache: {
        cacheLocation: 'localStorage',
        storeAuthStateInCookie: isIE, // set to true for IE 11
      },
    },
    {
      popUp: isIE,
      consentScopes: [
        'user.read',
        'openid',
        'profile',
        'api://d51ec65d-21a3-4859-ac1c-dd833e524d85/areas.read.all'
      ],
      unprotectedResources: [],
      protectedResourceMap: [
        ['https://graph.microsoft.com/v1.0', ['user.read', 'user.read.all', 'openid']],
        ['https://localhost:5001', ['api://d51ec65d-21a3-4859-ac1c-dd833e524d85/areas.read.all']],
      ],
      extraQueryParameters: {}
    })
```js
// Provide configuration values here.
// For Azure B2C issues, please include your policies.

Reproduction steps

Try to call graph API and your own API within one angular project with msal configured.

Expected behavior

The token for my own API is used for calls to localhast… the graph token for calling the graph. This should work OOTB.

Browsers/Environment

• [x ] Chrome