401 Error accessing Azure AD protected API with react-adal

Question

I am trying to set up an app with a react front end + a .NET Core back end in Azure with Azure AD Auth. The back end will call other APIs and hold some logic. I set up the .NET Core app and hosted it in an Azure app service, then added authentication using the connected services wizard in visual studio, which generated code similar to what is on this tutorial (back end section):

public void ConfigureServices(IServiceCollection services)
{
    services.AddAuthentication(sharedOptions =>
    {
        sharedOptions.DefaultScheme = JwtBearerDefaults.AuthenticationScheme;
    })
    .AddAzureAdBearer(options => Configuration.Bind("AzureAd", options));
...
}
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseAuthentication();
...
}

appsettings.json (fake IDs):

"AzureAd": {
    "ClientId": "1fff1098-3bc0-40d9-8cd0-e47b065085b6",
    "Domain": "mytenant.onmicrosoft.com",
    "Instance": "https://login.microsoftonline.com/",
    "TenantId": "mytenantid",
    "AppIDURL": "https://my-api.azurewebsites.net/",
    "ConfigView": "API"
}

Then I set up react-adal on my front end with:

{
  tenant: "mytenant.onmicrosoft.com",
  clientId: "1fff1098-3bc0-40d9-8cd0-e47b065085b6",
  endpoints: {
    api: "1fff1098-3bc0-40d9-8cd0-e47b065085b6"
  },
  cacheLocation: "localStorage"
};

Which I set up according to the github instructions to set up react-adal. The sign in works as expected but when I run adalApiFetch against my back end, I get a 401 error with description = the signature is invalid. I can see on the debugger that the authorization header (Bearer + token) is sent. Any ideas on what I might be doing wrong here? Thanks in advance!

The endpoint I'm testing with is a simple test controller (with [Authorize]) that simply returns "Authentication Tested".

Could you inspect the token at e.g. https://jwt.ms? You'll want to check the token contains the things you expect. — juunas
I did, I inspected it in jwt.io originally but it does look like a normal valid token for me. — YuriW

YuriW YuriW · Accepted Answer · 2019-09-12T17:33:40

I was able to find my mistake after a while and came back to post the solution. The problem was that I was using the incorrect method/settings (not matching). From the question's code: If using sharedOptions.DefaultScheme = JwtBearerDefaults.AuthenticationScheme; then you should also use AddJwtBearer with the appropriate configuration options (found here: JwtBearerOptions) and not AddAzureAdBearer. In my case, the final corrected startup code was

public void ConfigureServices(IServiceCollection services)
{
    services.AddAuthentication(AzureADDefaults.BearerAuthenticationScheme)
        .AddAzureADBearer(options => Configuration.Bind("AzureAd",options));
....

With corresponding settings (found here: AzureADOptions)

401 Error accessing Azure AD protected API with react-adal

1 Answers