Securing Blazor WebAssembly Apps

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.

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"];



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" />

    [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.

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">

    [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:

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 “” 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?


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!

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

1 Like

I have less hair now, but I found it after doing a line-by-line comparison.
In server\startup.cs;
These must be in this order, otherwise you get this error. Maybe obvious to some but had me scratching my head!

1 Like

Hey @tom.bryant,
Welcome to Auth0 Community and sorry for my late comment.
I’m happy you resolved the issue by yourself. Yes, middleware order matters. See the Microsoft official documentation for more info.

1 Like

I keep getting this error when i try to login. I have followed the How to Secure Blazor WASM Applications with Auth0 and setup my Auth0 application and updated the auth0 clientId and Audience in the application.

Also the logs show its a successful login. Is there something i’m missing?

Hi @softwareengineersazu, welcome to Auth0 Community and thanks for reading my article.

Unfortunately, the error message you are getting tells very little about the possible cause. Please, take a look at your browser’s console to get the actual error. Even better, try to capture and analyze the HTTP requests and responses affected by the error.

Also, please, take a look at the previous comments, since a few readers got your same error. In particular, take a look at the threads started by this message and this one.

Thanks for the reply. I have gone through the browsers console, i don’t see any errors in there. i indeed get a 200 for a token post request and i do get my token in the browser console. but the quiz manager application shows the message “There was an error trying to log you in:‘’'” i have tried everything that has worked for readers who had the same error and no luck there.

That’s quite strange :thinking:
Did you try to run the sample application? Just to understand if it could be a coding issue or a configuration one.

Yes, I have taken the latest code of the sample application and running it. Is there a way i can help you take a look at my issue and its details in any other wya?

In this case, I’m quite sure that it is a configuration or environment (firewalls?) issue. But the strange thing is that you are not getting any error on the HTTP messages exchanged.

Can you share the HTTP requests and responses related to the login and the quiz access? Be sure to remove/anonymize any confidential data before sharing.

Thanks for helping me out on this, when you say HTTP Messages? do you mean the request in the browser developer tools?

Yes. You can take this document as a reference: Generate and Analyze HAR Files

1 Like

I have attached a screenshot of all the network calls, please take a look, please let me know if you need any more information. i have checked the HAR file and i dont see any errors in it and neither in my network calls, can you please check what am i missing?

I am trying to follow the tutorial, but I’m stuck at adding the AddOidcAuthentication method in the client app. Here’s a screenshot with the weird error.

I tried cleaning, rebuilding, deleting the dlls, but nothing helps.
Any idea what might cause this?

Edit: Nevermind, the WebAssembly.Component.dll should be version 3.*