Graph API - Update existing User - Insufficient privileges to complete the operation

Question

I am currently developing an app that communicates with the Graph API. I don't have any Backend, only a SPA. I use the npm package @microsoft/microsoft-graph-client.

The app should be able to change givenName, surname of an AD user.

At the beginning i create a new AuthCodeMSALBrowserAuthenticationProvider instance and use it with the graph client, i'm not sure if the used scope is correct:

 const authProvider = new AuthCodeMSALBrowserAuthenticationProvider(
        this.msalService.instance as PublicClientApplication,
        {
          account: this.msalService.instance.getActiveAccount()!,
          scopes: ['User.ReadWrite.All'],
          interactionType: InteractionType.Redirect,
        }
      );

 this.graphClient = Client.initWithMiddleware({
        authProvider: authProvider,
        defaultVersion: 'beta',
      });

My call looks like this

 const result = await this.authService.graphClient
        .api(`/users/${userId}`)
        .patch({
          givenName: firstname,
          surname: lastname
        });

However, I get an "Insufficient privileges" error message.

Could not update user with id 8639e42f-de7f-485a-9b18-ccd67d7b0146 {
  "statusCode": 403,
  "code": "Authorization_RequestDenied",
  "requestId": "xy",
  "date": "2022-02-03T11:45:48.000Z",
  "body": "{\"code\":\"Authorization_RequestDenied\",\"message\":\"Insufficient privileges to complete the operation.\",\"innerError\":{\"date\":\"2022-02-03T12:45:48\",\"request-id\":\"xy\",\"client-request-id\":\"xy\"}}"
}

I have set the following permissions (under "Enterprise applications"):

API Permissions (under "App registrations"):

Answer 1

Please make sure you have granted the Delegated Permission Admin Consent .

I tested the same using implicit flow where I created a Azure AD application and provided the Delegated Permission like below without granting admin consent :

After granting the Admin Consent the problem was fixed like below :