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

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

Read on :fire:

Brought to you by @andrea.chiarelli :man_technologist:t2:


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

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?

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

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?

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

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.

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

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.

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!

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.

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?

I’ve added another OpenIdConnectEvents handler:

      OnRedirectToIdentityProvider = (context) => 
          return Task.CompletedTask;

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

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

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?

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?



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

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


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!!!

1 Like

No worries! We’re here for you!