Azure b2c authorization return 401 (Unauthorized) in Blazor WASM

Question

I'm using Azure AD B2C as the authentication provider for ASP.NET Blazor WASM application and API .So the problem is that I'm not able to access the API endpoints from the client which is Blazor WASM. When I make the request to the API I get 401 (Unauthorized) response.

Here is the console error

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Response status code does not indicate success: 401 (Unauthorized).
System.Net.Http.HttpRequestException: Response status code does not indicate success: 401 (Unauthorized).
   at System.Net.Http.HttpResponseMessage.EnsureSuccessStatusCode()
   at System.Net.Http.Json.HttpClientJsonExtensions.<GetFromJsonAsyncCore>d__13`1[[Organizer.Web.Shared.Models.SuccessResultModel`1[[Organizer.Web.Shared.DTOs.UserDto, Organizer.Web.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]], Organizer.Web.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
   at Organizer.Web.Pages.Authentication.AccountProfile.OnInitializedAsync() in A:\Software_Development\2022\Organizer\Organizer.Web.Pages\Authentication\AccountProfile.razor.cs:line 57
   at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

B2C Client settings

B2C API settings

Blazor Client Appsettings and Program.cs

builder.Services.AddHttpClient("Organizer.API", client => client.BaseAddress = new Uri("https://localhost:7149"))
    .AddHttpMessageHandler<BaseAddressAuthorizationMessageHandler>();

builder.Services.AddScoped(sp => sp.GetRequiredService<IHttpClientFactory>().CreateClient("Organizer.API"));

builder.Services.AddMsalAuthentication(options =>
{
    builder.Configuration.Bind("AzureAdB2C", options.ProviderOptions.Authentication);
    options.ProviderOptions.DefaultAccessTokenScopes.Add(
        "https://mydomain.onmicrosoft.com/60dbe9eb-056c-400d-a98d-c5c95b2bb000/Data.Read");
    options.ProviderOptions.LoginMode = "redirect";
});

{
  "AzureAdB2C": {
    "Authority": "https://mydomain.b2clogin.com/mydomain.onmicrosoft.com/B2C_1_susi",
    "ClientId": "f2161189-4bc6-4c26-99ae-a82b6729ab33",
    "ValidateAuthority": false
  }
}

API

builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddMicrosoftIdentityWebApi(builder.Configuration.GetSection("AzureAdB2C"));

"AzureAdB2C": {
    "Instance": "https://mydomain.b2clogin.com/",
    "ClientId": "60dbe9eb-056c-400d-a98d-c5c95b4bb176",
    "Domain": "mydomain.onmicrosoft.com",
    "TenantId": "1a5a2799-8dde-4236-901f-c37b3d2b9b39",
    "Scopes": "Data.Read",
    "SignUpSignInPolicyId": "B2C_1_susi",
    "CallbackPath": "/authentication/login-callback"
}

Note: I have changed the guids and URLs for security reasons.

Answer 1

• Please make sure scope is correct.scope not configured properly may be the reason prevent client app cannot access web API endpoints
• If appId uri is jus api:// client id, use client id or if it custom uri place that while adding scopes like below in place of clientId in Program.cs of the Client app:

 options.ProviderOptions.DefaultAccessTokenScopes.Add("https://{TENANT}.onmicrosoft.com/{ API app CLIENTID OR custom value}/{DEFAULT Scope}");

For ex:

.Add("https://contoso.onmicrosoft.com/41xxxa7xxxx-4xxx3-8fxx-6xxxxxxxfd/API.Access");

And then please try if you can set API app for a matching audience in the API app settings file (appsettings.json) which is nothing but "Audience": https://{TENANT}.onmicrosoft.com/{ API APP CLIENT ID OR CUSTOM VALUE if present}

Ex:

{
  "AzureAdb2c": {
    "Authority": " ",
    "ClientId": "xxxxxxxxxx1fdxx",
    "ValidateAuthority": true,
    "Audience": "https://contoso.onmicrosoft.com/<client/appId>"
     ...
  }
}

the end of the Audience need not be scope /{DEFAULT SCOPE}.

• Just to recheckt,please make sure Instance,Authority, Tenant ID, Tenant domain, Client ID, or Redirect URI, are all configured correct in your application and that matches the ones in azure portal
• Also please check all API permissions which are required are granted to access web API endpoints.

Reference : Secure an ASP.NET Core Blazor WebAssembly standalone app with Azure Active Directory B2C | Microsoft Docs