Angular User Management APIs - insufficient_scop for auth0-spa-js

I have issue with role-based access control using auth0-spa-js. I am trying to consume Auth0 Management API’s for Users that needs scope access.

  scopes = "openid profile email update:users update:users_app_metadata update:current_user_metadata delete:current_user delete:users"

  this.auth0Client = await createAuth0Client({
    domain: this.domain,
    client_id: this.client_id,
    audience: this.audience,
    redirect_uri: `${window.location.origin}/callback`,
    scope:this.scopes
  });

In my service, I have created updateUser()

async updateUser(userId, data) {
  var options: GetTokenSilentlyOptions = {
    scope: this.authService.scopes,
    audience: this.authService.audience,
    ignoreCache: false
  }

  const client = await this.authService.getAuth0Client();
  const token = await client.getTokenSilently(options);

  return this.http.patch(this.authService.audience+"users/" + userId, data, {
    headers : {
      Authorization: `Bearer ${token}`
    }
  })
  .toPromise();
}

I am trying to update or delete user data. Its gives response insufficient_scope

{"statusCode":403,"error":"Forbidden","message":"You cannot update the following fields: name, nickname","errorCode":"insufficient_scope"}

Hi @gaurav,

Thanks for reaching out.

The scopes granted to a SPA for the management API are limited. This is because a token can be inspected from your SPA by a malicious party, and used to make any call within the scope to the management API. For example, a user could get a read:users scoped token and read your whole user DB. Please see the following FAQ to understand more.

http://community.auth0.com/t/how-do-i-use-the-management-api-in-my-single-page-application/24448/2

Let me know if you have any more questions about how to get around this.

Thanks,
Dan