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

Blog Discussions
, , , ,
103

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
104

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

4 Likes
105

Thanks for the headsup Andrea!

2 Likes
106

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.

107

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
108

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

109

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

110

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

111

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; }
    }
113

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.

114

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
115

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

116

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

1 Like
117

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

3 Likes
118

Thanks for sharing your feedback @erlend !

119

Hey @erlend, Happy to hear you solved it!
I’d like to take a look at your solution. Do you have a repo to share?

2 Likes
120

Hi, I read this comment and share my repo. In that I did the tutorial on Blazor server side with authentication and authorizathion with roles. Then add a api audience to get user’s permissions and with this add user’s claims (i don´t know if the best practice but work). With this claims, I validate policies and pass access token to a other api with need the user´s permissions to do a get request.

https://github.com/CarlosLopezSoto/BlazorAuth0/tree/main/BalzorAuth0

I think is important to add in the tutorial how to add audience because is difficult to search how to use that on server side blazor and based-policy authorization too.

1 Like
121

Hi @CarlosLopezSoto, thank you so much for joining the Auth0 Community and sharing your contribution! I will take a look at it as soon as possible.

P.S. Sorry for the delay. I was on vacation :grinning:

2 Likes
122

Hi,

Thanks for the excellent article.

I’m on a Blazor Server app and trying to persist login state, i.e. user once logged in will stay logged in for 30 days. How can i implement that?

Thanks

123

Hey @naveedhuq,
Welcome to the Auth0 Community and thanks for appreciating my article :slight_smile:

To achieve your goal, you should work on the Auth0 Session Lifetime through your dashboard. However, extending the session duration conflicts with the ID and access token duration. You could also update the ID and access token lifetime, but it is not recommended for security reasons.

So, the recommended approach is to use refresh tokens to change your current tokens when they expire.
You can simply get a refresh token by adding the offline_access scope to your authorization request (see here).
Then, when you detect that your current token is expired, you can request a new one by using your refresh token.
Here are some code examples in different languages on how to use a request token to get new ID and access tokens.

We have a new ASP.NET Core SDK that simplifies the way you can manage refresh tokens (and much more), but it is currently in beta.
Stay tuned to learn more about it.

I hope I have given you some helpful directions to solve your problem.

2 Likes