TLDR

Why doesn't Microsoft's grant consent page display the custom API scope that I include in the extraScopesToConsent parameter to MSAL's loginRedirect() method?

Details

I have a Microsoft Teams HTML task module for a multi-tenant bot that uses @azure/msal-browser v2.14.1 to authenticate the user. This happens in a pop-up window opened via the authentication.authenticate() function from @microsoft/teams-js. The login Javascript in the pop-up boils down to this:

import * as msal from '@azure/msal-browser'

const msalConfig = {
  auth: {
    clientId: '43f91f57-0c80-40a1-bdbb-79c2f2100ef3',
    authority: 'https://login.microsoftonline.com/common',
    redirectUri: 'https://redacted.ngrok.io/sign-in',
  },
  cache: {
    cacheLocation: 'localStorage',
    storeAuthStateInCookie: false,
  },
}
const msalClient = new msal.PublicClientApplication(msalConfig)

const request = {
  scopes: ['openid', 'profile', 'offline_access'],
  extraScopesToConsent: [
    'api://43f91f57-0c80-40a1-bdbb-79c2f2100ef3/access_as_user',
  ],
}
msalClient.loginRedirect(request)

The consent page looks like this:

Why does the consent page not include the user consent display name that I configured on the custom API scope in the app registration in Azure Portal?

Extra info

When Microsoft redirects after a successful sign in, the response from handleRedirectPromise() contains scopes: ['api://43f91f57-0c80-40a1-bdbb-79c2f2100ef3/access_as_user']. That surprises me, I expected openid and profile.

If I then call acquireTokenSilent() with scopes: ['api://43f91f57-0c80-40a1-bdbb-79c2f2100ef3/access_as_user'], I successfully get a token with my custom API scope. This token is used to authenticate with the bot's backend webserver.

My question seems similar to this unresolved Github issue: https://github.com/MicrosoftDocs/azure-docs/issues/52167