Blazor client/server app with AAD auth errors on Fetch Data api request

Question

I've just started a Blazor app.
I'm trying to get AAD auth working with it and have followed these instructions. I am trying this all locally and haven't deployed to any external server yet. I'm using the default address that comes out of the box for a new aspnet core app: https://localhost:5001 (running without IIS Express).

I have followed this MS article (https://docs.microsoft.com/en-us/aspnet/core/security/blazor/webassembly/hosted-with-azure-active-directory?view=aspnetcore-3.1 ), pretty much word for word (except my IDs and application name are different of course).

Everything works well for the login part and i can login.

However, when I try and select the Fetch Data link on the left hand side of the Blazor client side app - I get an error. When i look at the requests in Fiddler, i see the error below. I have also tried going directly to the WeatherForecast api endpoint (on localhost still) and i get a 401 response (even though i have just logged in successfully).

Bearer error="invalid_token", error_description="The audience 'https://app.com/d8302c4f-7ef1-49ac-92a0-a9c46b875313' is invalid"

What could the problem be?

It looks like the audience is wrong.

I have this in the client side Program.cs

            builder.Services.AddMsalAuthentication(options =>
            {
                builder.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication);
                options.ProviderOptions.DefaultAccessTokenScopes.Add("https://app.com/d8302c4f-7ef1-49ac-92a0-a9c46b875313/App.Writers");
            });

App.Writers is the scope for the client side app reg. I have tried also putting scopes on the server side app reg, but that doesn't appear to work either.

thanks

ossentoo ossentoo · Accepted Answer · 2020-06-15T05:26:19

I managed to resolve this issue.

Pay particular attention to the client app setup in this document, i.e. here: https://docs.microsoft.com/en-us/aspnet/core/security/blazor/webassembly/hosted-with-azure-active-directory?view=aspnetcore-3.1#client-app-configuration

This section:

As it says here, ensure you use your api client id for the DefaultAccessTokenScopes.

So in our case, i changed from:

'https://app.com/d8302c4f-7ef1-49ac-92a0-a9c46b875313/App.Writers'

to

'd8302c4f-7ef1-49ac-92a0-a9c46b875313/App.Writers'

Blazor client/server app with AAD auth errors on Fetch Data api request

1 Answers