Blazor WASM Hosted on Azure 401 Unauthorized - Issuer Invalid

Question

I have a Blazor WASM Hosted Solution that I am hosting on AZURE. I have the site running on SSL and have 3 Certs. One for HTTPS://siteName.com one for HTTPS://www.sitename.com and one for the IdentityServerSigning as recommended by Microsofts documentation.

I can log into the application without any issues, however, i am getting 401 Unauthorized with the Error of Invalid_Token - The issuer https://www.siteName.com is invalid when making API calls to restricted endpoints

Now if i navigate to the Azure domain name https://siteName.azurewebsites.net i do NOT get the 401 Unauthorized.

Can someone point me in the right direction of fixing this to where ANY of the 3, www.sitename.com, sitename.com and sitename.azurewebsite.net can all access without a 401 unauthorized?

Answer 1

1. When an user wants to access a protected (Authorize attribute annotated) page on the client, he must first login or register.
2. To register, user should be led to an Account Controller, where you should create a new user and add it to the database. Your account controller should also generate a Jwt Token, which should be sent to the client app and saved in the local storage.
3. Now, anytime a user attempts to access protected resources through your Web Api endpoints, the Jwt Token should be retrieved from local storage and added to the request header. If you do this, the Unauthorized answer would become obsolete.
4. A good place to manage storing the Jwt Token in local storage and retrieving it for outbound HTTP request calls is Custom AuthenticationStateProvider

Here's some code to help you understand what you should do:

@code {
    userDetails[] udetails;

    protected override async Task OnInitializedAsync()
    {
        var atoken = await TokenProvider.GetTokenAsync();
        udetails = await Http.GetJsonAsync<userDetails[]>(
            "api/userDetails",
            new AuthenticationHeaderValue("Bearer", atoken));
    }
}

TokenProvider is a custom AuthenticationStateProvider that implements a GetTokenAsync method that gives the Jwt Token (by reading it from local storage and sending it to the caller code).

References:
Blazor WebAssembly 401 Unauthorized even when I am authorized
.net 5 hosted blazor app gets 401 error