microsoft-authentication-library-for-js: @azure/msal-angular does not prompt for Microsoft Graph Profile consent on login (even though MSALAngularConfigFactory is configured as such)

Library

• msal@1.3.2
• @azure/msal-angular@1.0.0

Framework

Angular

Description

App is configured according to the Angular 9 sample code which requests consent for “user.read”, Microsoft Graph “Sign in and read user profile”. However, upon login, the user is not prompted to consent for this permissions (it does however prompt for “View you basic profile” and “Maintain access to data…”).

Error Message

None. Just doesn’t prompt for consent. Issue 1401 proposes a workaround but not an actual fix and that issue has been closed.

Security

• Is this issue security related? No

Regression

• Did this behavior work before? Not sure but the docs seem to indicate that you can prompt the user for MS Graph “User.Read” consent during login.

Version:

MSAL Configuration

export const protectedResourceMap: [string, string[]][] = [
  ['https://graph.microsoft.com/v1.0/me', ['user.read']]
];

const isIE = window.navigator.userAgent.indexOf("MSIE ") > -1 || window.navigator.userAgent.indexOf("Trident/") > -1;

function MSALConfigFactory(): Configuration {
  return {
    auth: {
      clientId: '6226576d-37e9-49eb-b201-ec1eeb0029b6',
      authority: "https://login.microsoftonline.com/common/",
      validateAuthority: true,
      redirectUri: "http://localhost:4200/",
      postLogoutRedirectUri: "http://localhost:4200/",
      navigateToLoginRequestUrl: true,
    },
    cache: {
      cacheLocation: "localStorage",
      storeAuthStateInCookie: isIE, // set to true for IE 11
    },
  };
}

function MSALAngularConfigFactory(): MsalAngularConfiguration {
  return {
    popUp: !isIE,
    consentScopes: [
      "user.read",
      "openid",
      "profile"
    ],
    unprotectedResources: ["https://www.microsoft.com/en-us/"],
    protectedResourceMap,
    extraQueryParameters: {}
  };
}

Reproduction steps

1. clone the msal repo/Angular 9 sample https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/angular9-sample-app
2. npm install
3. configure app.module to point to an existing SPA Azure AD app or a newly created app
4. ng serve
5. login as regular user or tenant admin and observe that “user.read” permission is not in the consent list.

Expected behavior

The “user.read”, Microsoft Graph “Sign in and read user profile” consent should be in the list of permissions that the user needs to consent to.

Browsers/Environment

• Chrome
• Firefox
• Edge
• Safari
• IE
• Other (Please add browser name here)