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

ramiro · November 11, 2019, 2:56pm

Learn how to build client-side Web apps using Blazor and how to secure them with Auth0 authentication and authorization features.

Read on

Brought to you by @andrea.chiarelli

andrea.chiarelli · November 11, 2019, 4:05pm

Your feedback is welcome! Let me know if I can help you.

Phil-Wheeler · November 19, 2019, 11:25pm

Thanks for this post! It’s a good, simple implementation to get started with.

I’m seeing some difficulty with the /callback redirect in the actual Blazor application. The error I’m seeing OpenIdConnectProtocolException: Message contains error: 'invalid_grant', error_description: 'Invalid authorization code', error_uri: 'error_uri is null'. at the /callback URL.

If I check the logs, I can see there are three events happening at the Auth0 end:

Successful login
Authorization Code for Access Token
Invalid authorization code

Each straight after the other. I can see those authorization codes do match between the “Success Exchange” and the “Failed Exchange” entries.

I can see Auth0 authentication has actually taken place, and if I browse to other pages in my app, I can see I have logged in successfully, but that initial callback to the /callback URL stops things in their tracks. Is there something missing in the middleware / Startup.cs code, or are there additional things to check for the Auth0 application settings?

konrad.sopala · November 20, 2019, 11:17am

Thanks a lot for reporting that @Phil-Wheeler! I’m sure @andrea.chiarelli will look at that once he’s online!

uwe · November 20, 2019, 11:36am

Thanks Andrea, this article helped me a lot in order to understand how to integrate authentication into my server-side hosted Blazor app.

I am new to Auth0, also don`t have that much experience in implementing oidc - authentication and authorization. What I observe is that login and logout works just fine, also my log files look OK. However, it seems that the token I get does never expire. It is set to 36000 seconds but when I logout and start the app the next day I can log in without authenticating again. I would expect to get redirected to Auth0 log-in screen again.
Did I do something wrong here or is my expectation not correct?

andrea.chiarelli · November 20, 2019, 4:31pm

Hi @Phil-Wheeler,
The code described in the article should be working fine without any extra code or settings. Do you get the same error even if you use the full code from the GitHub repository?
Ensure you have chosen the Regular Web Application type when you created your application in the Auth0 dashboard.
Also, if you can give other info about your environment (operating system, firewall presence, or similar) maybe I can try to figure out what is happening.
Let me know

Phil-Wheeler · November 20, 2019, 9:27pm

I’m baffled here. I tried the GitHub version of the code - checked that the application in Auth0 was registered as a regular web app, and it worked first time. I then stopped debugging, restarted the app and tried again after logging out of the web app first. Same issue. There is practically nothing different between the two solutions (yours and mine) other than the Auth0 application config settings.
I’m running these in VSCode on Win10, testing on Firefox and Opera under private browsing.
Signing up for the first time works fine every time. Logging out and signing in again with those same credentials causes the issue.

Phil-Wheeler · November 20, 2019, 9:45pm

This is what I see on successful authentication and Auth0 redirects to https://localhost:5001/callback

andrea.chiarelli · November 21, 2019, 10:32am

Hi @Phil-Wheeler, that’s very very strange. I’m not able to reproduce your issue. Anyway, I will try to investigate more in depth to figure out what’s going on.

uwe · November 22, 2019, 7:27am

Hi @andrea.chiarelli, can you please have quick look at this question. I really don’t get the logout issue where it seems that I never have to specify my credentials at subsequent logins again. The app cleary states that I am logged out, however clicking the login link again brings me straight to the app without specifying credentials again. Is that expected? Thanks!

andrea.chiarelli · November 22, 2019, 9:01am

Hi @uwe,
The behavior you are describing is not the expected one. It seems that actually you are not logging out.
Do you have the same behavior also with the code downloaded from the GitHub repository?
Have you checked that the code for the OnRedirectToIdentityProviderForSignOut event handler is the same as the one provided in the article?
Also, try to use a private browser window to avoid possible cookie inconsistency.

uwe · November 22, 2019, 2:40pm

Hi @andrea.chiarelli,
I’ve double-checked my code, also executed code from repository. It seems that “OnRedirectToIdentityProviderForSignOut” is not called when I try to log out (also not in your original code). When I debug my code I see the event handler registration take place but, as mentioned, not being called when I attempt to log out. I’ve double checked my Auth0 configuration and did not find anything problematic. Log files do not show a logout event at all, so it really seems that logout is running at the client but not against Auth0 endpoint.
Any idea?
Thanks,
Uwe

uwe · November 22, 2019, 3:18pm

I’ve added another OpenIdConnectEvents handler:

      OnRedirectToIdentityProvider = (context) => 
      {
          Console.WriteLine(context.HttpContext.Connection.Id);
          return Task.CompletedTask;
      },

This one gets called, so event registration seems to work in general, just the call to “OnRedirectToIdentityProvider” does not take place…

andrea.chiarelli · November 22, 2019, 3:19pm

Hi @uwe,
Honestly I’ve no idea at the moment.
Let me investigate further and ask some colleagues.

bryonbarnard · December 13, 2019, 11:04pm

Thanks for the article. I was able to authenticate my app on first try using your instructions. My question now is how do I access the User Profile?

tomfi · December 19, 2019, 9:48am

Hi @uwe,
i faced the same issue with the cloned git repo.
After “googleing” for one day, i found out that changing the “OnGet” Methode in the class “LogoutModel” helped!

   public async Task OnGet()
    {
        await HttpContext.SignOutAsync("Auth0", new AuthenticationProperties{RedirectUri = "/"}); 
        await HttpContext.SignOutAsync(CookieAuthenticationDefaults.AuthenticationScheme);
    }

Hopefully its helping you an other people, who having the same problem!

@andrea.chiarelli: Maybe consider to change this in git repo?

Cheers!
Thomas

konrad.sopala · December 19, 2019, 10:12am

Thanks a lot for sharing it with the rest of community @tomfi!

andrea.chiarelli · December 19, 2019, 1:52pm

Hi @tomfi,
Thanks for sharing this hint! Surely I’ll update the project’s code.

uwe · December 19, 2019, 4:02pm

Hi @tomfi,

I’ve just checked your approach and it worked as expected. Thank you so much.

I find the support of Microsoft in regards to Blazor and OIDC rather bad. They should provide a working sample showing how to include 3rd party OIDC systems like auth0 or identity server 4. Everything I found so far did not work - so I assume that a lot of people end up quite disappointed when it comes to Blazor and OIDC.

Thanks again for sharing!!!

konrad.sopala · December 19, 2019, 4:03pm

No worries! We’re here for you!