Securing Blazor WebAssembly Apps

I did download the full project from hithub, and then I setup an Auth0 application to test it.

Sorry, I misspoke when I said “add the [Authorize] attribute to a page”. Let me try to do a better job of explaining the problem…

QuizManager works fine for me with @attribute [Authorize] on the QuizViewer page and without the [Authorize] attribute on the QuizController, but with the @attribute [Authorize] on the QuizViewer page and the [Authorize] attribute on QuizController, I get a 401-UnAuthorized error.

1 Like

Thequiz request returns "www.Authenticate: Bearer error=‘invalid_token’ in the response header.

1 Like

Thanks for providing that context @mjones!

Hi @mjones,
Thank you for providing more detailed information.
At first look, it seems like you missed to define the default audience on the Auth0 side. Have you defined it?
The article explains what to do and why in Calling the Protected API.
Be sure that the audience you define in your Auth0 Dashboard is exactly the same you are using in your appsettings.json.
If you already defined your default audience, please, take a look at the logs in your Auth0 Dashboard to get any other information that can help us to investigate.

Please, let me know.

WASM Auth Problem.pdf (283.4 KB)

1 Like

Hey @mjones, your code looks ok.
My only concern is about this:

image

Did you define the API identifier only in the API section of your Auth0 Dashboard?
Did you also assign it as the Default Audience in your tenant settings?

The error message you get leads me to think you didn’t.
Please, confirm me if you defined https://quizmgr_api as the Default Audience for your tenant.
Otherwise, I’m afraid I need all the HTTP requests exchanged with Auth0 at the login step to see which parameters are passed.

That was the problem - setting the tenant’s Default Audience got it working. I appreciate your assistance. Thanks for hanging in there with me.

So this means one Api per tenant, yes?

2 Likes

Happy to hear it solved your problem!

So this means one Api per tenant, yes?

Unfortunately, yes! This is the current limitation for Blazor WASM applications.
As said before, the Calling the Protected API section explains the details behind this workaround.

Do you have a .Net Core 5 example for securing a WASM client with Auth0?

1 Like

Unfortunately, not yet, @mjones.

Once we have that eventually we’ll let you know @mjones!

Ok, thanks. I’m looking forward to it…

1 Like

Has anybody using Auth0 and Blazor webassembly figured out what could be the issue with logout? It still seems to be broken. I looked around and i didnt find anybody else having any issues with logging out, what makes me think its more of Auth0 issue.
Any regarding to this is help welcome.

1 Like

I think i figured it out why the logout doesnt work every time. It seems to be important to call the Auth0 logout endpoint before i navigate to authentication/logout in blazor app.

So i changed the BeginSignOut function in AccessControl.razor to look like this:

private async Task BeginSignOut(MouseEventArgs args)
{
await SignOutManager.SetSignOutState();

var authority = (string)Configuration["Auth0:Authority"];
var clientId = (string)Configuration["Auth0:ClientId"];

Navigation.NavigateTo($"{authority}/v2/logout?client_id={clientId}");

}

And also removed the <LogOut> block from Authentication.razor. So it looks now like this:
@page “/authentication/{action}”
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication

<RemoteAuthenticatorView Action="@Action" />

@code{
    [Parameter] public string Action { get; set; }
}

And the last thing was to set https://localhost:5001/authentication/logout as the Allowed Logout URLs in the Auth0 Applications settings.

1 Like

Hi @soend,
Thank you so much for joining the Auth0 Community and sharing your thoughts on the logout issue.
I tried the solution you suggested, but I’m not sure those changes are enough to solve the issue.
First, I think that the code for Authentication.razor should still contain the RemoteAuthenticatorView component, as follows:

@page "/authentication/{action}"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication

<RemoteAuthenticatorView Action="@Action">
</RemoteAuthenticatorView>

@code{
    [Parameter] public string Action { get; set; }
}

Otherwise, you will be able neither to log in.

Second, by moving the navigation to the Auth0 logout endpoint within the BeginSignOut method, I’m not able to logout at all. If it works on your side, are there chances you made some other change?

Hello, @andrea.chiarelli
Yeah sorry my copy paste went wrong. I still have the <RemoteAuthenticatorView Action="@Action"> in the Authentication.razor. Sorry about that, i fixed it.

These are the only changes i made.
Here’s the repo: https://github.com/soend/QuizManagerClientHosted

1 Like

Hi @andrea.chiarelli ,

Fascinatingly, I am now running in to an issue.
I followed this tutorial: How to Secure Blazor WASM Applications with Auth0

I reached the stage where I was getting the 401 errors when trying to connect to my API, which required adding a Default Audience in my Tenant Settings.

Unfortunately, as soon as I add a Default Audience, my Blazor client breaks. I can click login, and it logs in successfully (as per the Auth0 logs), however when it redirects back to my app, I get a 401 unauthorized error on the “https://.auth0.com/userinfo” call that Blazor seems to make. Removing the Default Audience on my tenant fixes it, but obviously I still then have the same 401 issue with my IP due to the token issue.

The 401 Response headers contain this under www-authenticate:
Bearer realm="Users", error="invalid_token", error_description="The access token signature could not be validated. A common cause of this is requesting multiple audiences for an access token signed with HS256, as that signature scheme requires only a single recipient for its security. Please change your API to employ RS256 if you wish to have multiple audiences for your access tokens"

I’m really struggling to understand what’s going wrong and where, bar the obvious where I’m currently using HS256 to ensure I have access to the issuer signing key. Could this be the cause of the problem?

Logging in as far as I can tell is all on the client, so I’m confused as to where the issue could lie. Once I can actually log in with a Default Audience set, I should then be able to test the API (and assumingly, only then does the authentication set up in the API become relevant).

Any ideas?

Thanks

1 Like

Hey @karam94 , thank you for joining the Auth0 Community!
The issue you are experiencing seems to depend on using HS256 to sign Auth0’s access token. This answer should explain why.
Let me know if it solves your problem.

1 Like

I’ve followed the blog post How to Secure Blazor WASM Applications with Auth0 in a new blazor WASM core hosted app, and the front-end authorization works fine, however I get the following error when trying to call an API with the “Authorize” attribute applied (with obfuscated data);

www-authenticate: Bearer error="invalid_token", error_description="The audience 'https://**{API ID}**, https://**{MY AUTH0 DOMAIN}**/userinfo' is invalid"

I’ve run the github solution you provide here GitHub - auth0-blog/secure-blazor-wasm-quiz-manager fine and this works without issue, but I can’t find any (relevant) differences in my project to the repo.

When using a token decoder, I can see both projects include the same audiences, so i’m not sure why my project rejects these audiences!

1 Like

Transfering your questions here as this is the thread related with that blog article issues.

1 Like