Azure AD B2C: The scope 'user.read' provided in the request is not supported

Question

The Angular application is a modified version of this sample application: https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/angular8-sample-app

Using MSAL, the application can login and logout using Azure AD B2C. When accessing the profile component, the following error is printed:

ERROR Error: Uncaught (in promise): ServerError: AADB2C90117: The scope 'user.read' provided in the request is not supported.

Correlation ID: fffc59f4-3c83-4d6c-b77a-c8f04939ead1
Timestamp: 2020-03-01 19:51:13Z
ServerError: AADB2C90117: The scope 'user.read' provided in the request is not supported.
Correlation ID: fffc59f4-3c83-4d6c-b77a-c8f04939ead1
Timestamp: 2020-03-01 19:51:13Z

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';

import { MatToolbarModule, MatButtonModule, MatListModule } from '@angular/material';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ProfileComponent } from './profile/profile.component';


import { MsalModule, MsalInterceptor } from '@azure/msal-angular';
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';

export const protectedResourceMap: [string, string[]][] = [
  ['https://tenantname.onmicrosoft.com/api', ['user.read']]
];

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

@NgModule({
  declarations: [
    AppComponent,
    ProfileComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    HttpClientModule,
    MatToolbarModule,
    MatButtonModule,
    MatListModule,
    AppRoutingModule,
    MsalModule.forRoot({
      auth: {
        clientId: 'first-b2c-application-id',
        authority: "https://tenantname.b2clogin.com/tenantname.onmicrosoft.com/b2c_1_signupsignin1",
        validateAuthority: false,
        redirectUri: "http://localhost:4200/",
        postLogoutRedirectUri: "http://localhost:4200/",
        navigateToLoginRequestUrl: true,
      },
      cache: {
        cacheLocation: "localStorage",
        storeAuthStateInCookie: isIE, // set to true for IE 11
      },
    },
    {
      popUp: !isIE,
      consentScopes: [
        "user.read",
        "openid",
        "profile"
      ],
      unprotectedResources: ["https://www.microsoft.com/en-us/"],
      protectedResourceMap,
      extraQueryParameters: {}
    })
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

profile.component.ts

import { Component, OnInit } from '@angular/core';
import { MsalService } from '@azure/msal-angular';
import { HttpClient } from '@angular/common/http';

const GRAPH_ENDPOINT = 'https://my-tenant.onmicrosoft.com/api';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css']
})
export class ProfileComponent implements OnInit {
  profile;

  constructor(private authService: MsalService, private http: HttpClient) { }

  ngOnInit() {
    this.getProfile();
  }

  getProfile() {
    this.http.get(GRAPH_ENDPOINT)
      .toPromise().then(profile => {
        this.profile = profile;
      });
  }

}

Web API Published Scopes (second Azure AD B2C Application)

• user.read
• user.write

Answer 1

Currently, accessing any Microsoft API isn't supported using an Azure AD B2C-issued token, i.e. using tokens that are issued as result of an Azure AD B2C built-in or custom flow.

Instead, for a single-page application to access to the Microsoft Graph API, you must bridge them using a proxy API.