Roles request failing - "Bad HTTP authentication header format"

My goal: get user role info.

Problem: The call to the roles API is failing, and I’m unsure of how to resolve this issue.

Architecture: Angular 7 + Auth0-spa-js

started app from quickstarter
documentation example

Based on the return from my app’s initial call to the Auth0 Client, I’m getting a subset of user data that does not include the roles array. To get the user’s role I am making a secondary call to my app’s tenant to query the user API to retrieve the roles info.

I’ve stripped the code down to be more generic, but this is my executing logic.

error:
{"statusCode":400,"error":"Bad Request","message":"Bad HTTP authentication header format","errorCode":"Bearer"}

    const url = `https://myapp.auth0.com/api/v2//users/${userId}/roles`
    return auth0client.getTokenSilently().subscribe(token =>
      this.http
        .get(url, {
          headers: {
            Authorization: `Bearer ${token}`
          }
        })
        .subscribe(data => {
          console.log(data)
        })
    )

Hi @mr.Nigel,

You are going to be limited in what scopes you can get for the management API from a SPA and that will not include the required scopes for the call you are trying to make. This is because a malicious party can easily inspect the management API token and proceed to use it against your entire user store. I am not positive if this is related to the error you are receiving, but will block for your own security regardless.

More on that here:

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

A potential workaround would be to add the roles to the token via a custom claim (this will actually save you an external call if you are simply trying to find out what roles a user has):

Or you could call the management api from your backend.

Hope this helps!

Thanks,
Dan