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

I just converted my Azure ASP.Net Web App that uses Auth0 to razor page 3.0 and I’m having troubles with login in. The error I’m getting after I get the Auth0 dialog log is that it can’t find the signin-auth0 url (this used to work). I think my problem is with the end point (I know things have changed in the startup class regarding this). Is there an example that deals with Razor Pages using core 3.0 or 3.1? I definitely want to get to Blazor Server side but want to get the Razor Pages web app working correctly with Auth0 first.
Thanks
John

The OpenID configuration in the Startup class is basically the one you find in the article. There shouldn’t be any relevant changes for Razor.
Maybe you have double-checked it, but this seems the typical case when the Allowed Callback URL doesn’t exactly match the callbackPath you defined in the OpenID configuration options.
Please, ensure that the signin-auth0 URL in the Auth0 dashboard matches the configured URL, including the protocol scheme and the trailing slash.

Hello Andrea,

I would like to suggest that you integrate the adjustmens to the Logout method into this blog post as well. Just by following this discussion I found out the reason why the Logout does not work as expected.

Could you please eloborate how the current Auth0 User can be accessed in blazor pages? Currently the object @context.User.Identity.Name seems to be empty. I would like to show the Name of the user or I would like to add additional claims / roles to the current user object from within my application (roles with finer granularity than Auth0 can provide).

Hey there @steamonimo I’m sure @andrea.chiarelli will followup on this once he’s online!

1 Like

Hi @steamonimo,
We’ve just updated the blog post with the logout fixes.

Regarding your request about user data, unfortunately, User.Identity is not automatically populated with the user profile’s data. To enable it, you should apply some changes to OpenID Connect settings in the Startup.cs file.
You have to add using Microsoft.IdentityModel.Tokens; in the using section. Then, you need to adjust the OpenID connect options as follows:

  .AddOpenIdConnect("Auth0", options =>
  {
    //... other options

    // Configure the scope
    options.Scope.Clear();
    options.Scope.Add("openid");
    // new stuff
    options.Scope.Add("profile");

    options.TokenValidationParameters = new TokenValidationParameters
      {
          NameClaimType = "name"
      };
    // end new stuff

    //... other options
  };

The newly added options are the profile scope, which requests the server for the user’s profile’s data, and the TokenValidationParameters, which indicates how to map the OpenID claims to User.Identity properties.
There are historical reasons behind this. If you want to know more, read this.

1 Like

Thanks for your reply! Now the user can be retrieved via “context.User.Identity.Name”.

2 Likes

Glad it’s working for you now!

We’re looking to move our app development from C#/WPF to Blazor. So I’m new to Blazor and Auth0. This seemed like a good tutorial to try, because authentication is obviously important.
I downloaded the project from GitHub. I created an Auth0 account and updated the field in appsettings.json accordingly. When I click the login button I get this error:
image

The output log from VS is:

Microsoft.AspNetCore.Hosting.Diagnostics: Information: Request starting HTTP/2.0 GET https://localhost:44363/login?redirectUri=/  
Microsoft.AspNetCore.Routing.EndpointMiddleware: Information: Executing endpoint '/Login'

Microsoft.AspNetCore.Mvc.RazorPages.Infrastructure.PageActionInvoker: Information: Route matched with {page = “/Login”}. Executing page /Login
Microsoft.AspNetCore.Mvc.RazorPages.Infrastructure.PageActionInvoker: Information: Executing handler method QuizManager.Pages.LoginModel.OnGet - ModelState is Valid
Microsoft.AspNetCore.Authentication.OpenIdConnect.OpenIdConnectHandler: Information: AuthenticationScheme: Auth0 was challenged.
Microsoft.AspNetCore.Mvc.RazorPages.Infrastructure.PageActionInvoker: Information: Executed handler method OnGet, returned result .
Microsoft.AspNetCore.Mvc.RazorPages.Infrastructure.PageActionInvoker: Information: Executing an implicit handler method - ModelState is Valid
Microsoft.AspNetCore.Mvc.RazorPages.Infrastructure.PageActionInvoker: Information: Executed an implicit handler method, returned result Microsoft.AspNetCore.Mvc.RazorPages.PageResult.
Microsoft.AspNetCore.Mvc.RazorPages.Infrastructure.PageActionInvoker: Information: Executed page /Login in 1164.6662ms
Microsoft.AspNetCore.Routing.EndpointMiddleware: Information: Executed endpoint ‘/Login’
Microsoft.AspNetCore.Hosting.Diagnostics: Information: Request finished in 1193.562ms 302 text/html; charset=utf-8
Microsoft.AspNetCore.Hosting.Diagnostics: Information: Request starting HTTP/2.0 POST https://localhost:44363/_blazor/disconnect multipart/form-data; boundary=----WebKitFormBoundary30cUVlzBJhzlwgTE 359
Microsoft.AspNetCore.Routing.EndpointMiddleware: Information: Executing endpoint ‘Blazor disconnect’
Microsoft.AspNetCore.Routing.EndpointMiddleware: Information: Executed endpoint ‘/_blazor’
Microsoft.AspNetCore.Hosting.Diagnostics: Information: Request finished in 10583.7001ms 101

I also verified in the dashboard that
Allowed callback URL is: https://localhost:5001/callback
Allowed logout URL is: https://localhost:5001/

This is my first adventure with authorization, so any help is appreciated.

Mitch

Hi @mitch.barker,
Thank you for joining Auth0 Community!
At a very first look, it seems that you are running your application at this base URL https://localhost:44363 but you registered the allowed callbacks and logout URLs with https://localhost:5001
They should match.

Could you provide an example of securing an ASP.Net Core hosted WebAssembly app with Auth0?

Hey there @mjones let’s wait for Andrea to be online to share more on that front :slight_smile:

Hi @mjones,
Currently, Blazor WebAssembly is in beta/preview release and a few issues affect it also on the authentication and authorization side. The official release should be delivered on May.
Until then, we are not planning to publish any examples based on a non-stable version of the product.
Thanks anyway for your interest. I will let you know when we will publish an accurate and stable Blazor WASM example with Auth0 integration.

This is going to sound super silly and I apologize but, this did fix the “name” issue for me, however, how do I access the rest of the profile information?

I see that we added the “profile” scope, but I’m unable to access any of it using the @context modifier.

If this is a MS thing and not an Auth0 thing, please point me in the right direction to unscramble my mind :smiley:

Hi @Dmo16,
This is definitely a Microsoft issue. It is documented in this blog post.
In a nutshell, you should map claims manually by using TokenValidationParameters and/or ClaimActions.
I hope that this document may give you some directions to solve this problem.

If you have any further questions feel free to reach out!

Thanks Andrea!

Both of those bits of information helped greatly.

I was able to sort out my issue.

2 Likes

Happy to hear this! :slight_smile:

1 Like

Hi.

I’m trying role-based access on the blazor front-end. I’m using attribute to show content only to an admin.

This is the code I use. Im signed in with an account with the admin role. But it doesn’t show anything. Am i supposed to add roles in the startup where openID is configured?

Thanks in advance!

Hi @arren.vandosselaer,
To leverage role-based access you need to configure roles on the Auth0 side and configure OpenId accordingly. I provide you with a few links to Microsoft and Auth0 documentation:

I hope this can be useful as a starting point.

Thanks for the answer. I found out what the issue was. I had to create an auth0 rule with javascript that added the roles to the identity claims!

I am adding an image down below incase it might help someone else stuck on this.

3 Likes