What is Blazor? A Tutorial on Building Web Apps with Authentication

Hi,

Firstly, sorry if this a rookie question, I’ve never had to deal with authentication before.

I’m creating a Blazor Server Side application, and implemented Auth0 using the following blog post by Auth0:

I’ve created a user and added a property in the App_Metadata, to let me set information for the user but stuff they can’t change (CompanyId: 3).

How do I get the CompanyId from the App_Metadata in Auth0 into my application? It’s not a role, but gives me information about the user to link them to more data in my own database.

Hey there @dan6!

Migrating your post here as this is the thread for issues and questions regarding this blog article.

1 Like

Hi @dan6,
Welcome to Auth0 Community and thanks for reading this blog post.

Regarding your question, in general, you should find your user’s data in the User.Identity object. However, there are two points to point out:

  1. By default, the User.Identity object is not automatically populated. You should apply a few changes to your code in order to map user’s data to that object. Please, take a look at this to get more info.

  2. The user’s data that populate the User.Identity object comes from the ID token issued by Auth0. However, these data are just the standard OIDC claims.
    To include additional information as part of the ID token (the App_Metadata, for example), you need to add custom claims through a rule.
    Please, check out these documents to learn more:

1 Like

Can we please get a working example for Blazor .Net 5, Asp.Net Core Hosted WASM. This example does not work. A sample project would be appreciated.

Hi @ehilimire,
Welcome to the Auth0 Community!
An update to this article is under consideration. I will announce it here when it becomes available (hopefully very soon).
Thank you for your interest :pray:

2 Likes

Thanks for your attention to this. I’ve file a support request related to Blazor WASM. Reach out if you need any assistance improving this document.

2 Likes

Hey folks, this blog post has been revamped to .NET 5!

3 Likes

Thanks for the headsup Andrea!

1 Like

I don’t know if the change is in .net5 or if I’m just missing something obvious but my old Blazor WASM project would run fine with an appsettings.json in the Client/wwwroot folder and one in the Server/wwwroot folder, as one might expect. This is because in 3.x the working directory in VS2019 is set to the Server folder (makes sense). In 5.0 the working directory is set to the Client folder. Only way to get it to Debug in VS2019 seems to be to copy/move the appsettings.json from Server into Client.

Anyone else run into this while running these quickstarts? Known .net5 issue? Thanks in advance.

Hi @zgrose,
I don’t have the issue you reported :thinking:
When I create a new hosted Blazor WASM project with my VS2019 for Mac, I get the Server project as the startup project and everything works correctly. Do you use VSCode 2019 for Windows?
Anyway, I don’t think it is a .NET 5 issue. You or your IDE are the ones saying to .NET what is the startup project.

1 Like

Thanks for the sanity check, I’ll probably find the culprit setting at some point. Regular VS for Windows, not Code.

I’ve successfully been able to create a asp.net core web api (.net 5) and Blazor server app using Auth0.
It’s been quite messy as I keep having to find different bits to the whole solution in different threads and examples.

One thing that I struggled with was getting roles to work with Blazor. The first thing was to figure out that I had to create an Action to pass the roles to the JWT token. After getting the roles back, I had to jump through some hoops in order to get the Roles becoming a part of my Identity.User in Blazor.

The second thing was to pass along the access token of the user to the API. In order to do this I had to read alot of blogs and finally found a sane way of doing it.

The final part, that I have yet to solve is to pass along the permissions part of my JWT token as policies in my Identity.User. If possible, please get in touch with me @andrea.chiarelli so we can figure this out and hopefully improve the Blazor documentation

For your second item, was this sane method something other than the MessageHandler referenced in this thread?

Yes. I used a technique I found in a Microsoft example of how to get your identity access token and apply that to a named http client.

https://docs.microsoft.com/en-us/aspnet/core/blazor/security/server/additional-scenarios?view=aspnetcore-5.0

So when app gets initialized, I fetch the access token and add it to my TokenProvider which is scoped. Then the named HttpClient is set to add the TokenProvider access token for any subsequent calls.

This is the implementation of the named HttpClient.

public class APIService
    {
        public APIService(TokenProvider tokenProvider, HttpClient client)
        {
            client.BaseAddress = new Uri("https://localhost:6001");
            client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer",  tokenProvider.AccessToken);
            Client = client;
        }

        public HttpClient Client { get; }
    }

Check out the Auth0MessageHandler up thread around Oct 2020. If you’re just calling back to your own host, you don’t have to hardcode the BaseAddress into the code.

Thanks @zgrose, I’m calling an external API and thus the base address will be injected from an env variable at some stage

1 Like

Are Auth0 permissions the same as policies in asp net net ClaimsPrinciple? How can I map the permissions to my ClaimsPrinciple so that in my Blazor Server client app I can use the

<AuthorizeView Roles="Superadmin", Policy="write:chat">

Has anyone got this working? I guess the same applies to asp .net core mvc apps

Hey @erlend , unfortunately I’ve never used permissions in Blazor.
Let me check if I can find any suggestions internally.

Thanks @andrea.chiarelli. After many days I was able to find a working solution. I think it could be a good idea to include this is the Blazor blog post, since there are so many subtleties between Blazor server and Blazor wasm. Please get in touch so we can have a look at the solution and hopefully further improve the documentation for Blazor Server and Auth0

2 Likes

Thanks for sharing your feedback @erlend !