AzureMaps authentication with subscriptionKey

Question

Hi, I use Azure Maps in a React app, and for authentication, I use the react-azure-maps npm module. However, in a production environment, it throws this error:

  "error": {
    "code": "Unauthorized",
    "message": "Bearer realm=\"https://atlas.microsoft.com/\", SharedKey realm=\"https://atlas.microsoft.com/\"",
    "target": "WWW-Authenticate",
    "details": [ ]
  }
}

I understand that it is asking for a token, which is why I think I am passing my subscription key incorrectly. The methos i use to declare the subscriptionKey is :

const option: IAzureMapOptions = {
  authOptions: {
    authType: AuthenticationType.subscriptionKey,
    subscriptionKey:"<My subscriptionKey>" //</> Your subscription key
  },
};

Is this method correct?

Answer 1

You code looks correct. Make sure that the options are being passed into the map object. For example: <AzureMap options={option}>

Verify your subscription key is correct, it's pretty easy to miss a character when copy/pasting, or accidentally add a space or additional character. Also make sure you are passing in your primary or secondary key and not your client ID.

Take a look at the network tab of the browser dev tools and look at some of the requests to https://atlas.microsoft.com and take a look at the URL's and headers to see if there is a subscription-key property. This should usually be in the request URL but could be a query parameter on the URL itself. If you don't see one of these, then it's likely the map isn't getting your options and is using its defaults.