Securing Blazor WebAssembly Apps

Blog Discussions
, , ,
46

I followed the steps, and can successfully sign in. But, when I add the [Authorize] attribute to a page I get a 401-UnAuthorized response.

2 Likes
47

Thanks for reporting that! Weā€™ll look into that shortly!

49

Hey @mjones,
Are you referring to the page attribute (@attribute [Authorize]) added to Client/Pages/QuizViewer.razor? If so, it really strange because this authorization attribute shouldnā€™t involve the server :thinking:
Did you try to download the full project from GitHub and run it? Just to understand if something went wrong while building your app.
Please, let me know.

50

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
51

Thequiz request returns "www.Authenticate: Bearer error=ā€˜invalid_tokenā€™ in the response header.

image
image1342Ɨ525 43.5 KB

1 Like
52

Thanks for providing that context @mjones!

53

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.

54

WASM Auth Problem.pdf (283.4 KB)

1 Like
55

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?

image
image1210Ɨ791 109 KB

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.

56

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
57

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.

58

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

1 Like
59

Unfortunately, not yet, @mjones.

60

Once we have that eventually weā€™ll let you know @mjones!

61

Ok, thanks. Iā€™m looking forward to itā€¦

1 Like
62

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
64

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
66

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?

67

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
68

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