Blazor Authentication with JSON Web Tokens

We've seen a ASP.NET backend with an Angular frontend. What if we want C# all the way through? Here's how we do it in Blazor.
Source code available at: github.com/JasperKent/Blazor-...
Server code available at: github.com/JasperKent/WebApi-...
Topics include:
- Creating HttpClient through an HttpClientFactory
- Using appsettings.json in Blazor WASM
- Accessing Session Storage with the Blazored.SessionStorage package
- Decomposing JWTs in .NET
- Using events to update the DOM in Blazor
- Using a DelegatingHandler to augment HTTP requests
- Avoiding cyclic dependency injection

[@CodingTutorialsAreGo]

Which front end do you prefer - Angular or Blazor? Let me know. Source code available at: github.com/JasperKent/Blazor-Wasm-Authentication Server code available at: github.com/JasperKent/WebApi-Authentication Remember to subscribe at kzbin.info/door/qWQzlUDdllnLmtgfSgYTCA And if you liked the video, click the 👍.

[@hollandrisley]

Great stuff, thanks! Just moving from Angular to Blazor so this helps alot :)

[@smc_onetwo]

huge help. i'll be implementing something like this. thank you

[@syedhasnadjami6008]

Thanks for the video. I never knew that I can get the token from the class again. I always have written a custom parser for that. Thanks for showing that. Also l have a question. Instead of using DelegatingHandler for auth state, can't we use use the AuthenticationStateProvider for that as that also directly control the blazor AuthorizeView component

[@CodingTutorialsAreGo]

Yep - that's for a future video.

[@nicolasledesma1709]

Thank you very much!!

[@DimasMessias-kl4ic]

Where would you normally keep that JWT token? Keeping it in the session be easily found and decrypted to extract information from it. Is there a way to keep it only in memory completely invisible (using WASM)?

[@CodingTutorialsAreGo]

It couldn't be decrypted, because the secret to decode it is kept on the server. Even if it could be decrypted, there's no sensitive information in there. The risk of having the JWT stolen is that it could be used to gain access to a secure server. Moreover, Session and Local storage are only available to the user of the machine, so are safe for a personal, password protected machine. On a public machine, however, they shouldn't be stored in Local storage, and the user should remember to close the browser to clear session storage. Storage in memory is safest, but least convenient.

[@AthelstanEngland]

Thanks. This all makes sense to me, which in itself is a minor miracle!! Would there be a lot of difference if using Blazor Server rather than WASM?

[@CodingTutorialsAreGo]

Yes, it would be quite different for Server. I'll try to get round to doing a video on that.

[@AthelstanEngland]

@@CodingTutorialsAreGo thanks for the reply. I've just re-watched the Part 1 and Part 2 videos regarding securing the API itself. Very informative the way you added it to an existing project. If creating a new API and using one of the templates with Identity authentication/authorisation would that result in the same JWT token based system or is your approach different/enhanced/minimal compared to what MS gives you out of the box so to speak?

[@CodingTutorialsAreGo]

@@AthelstanEngland If you go for Microsoft Identity Platform for the authentication, then it uses JWTs, but they are issued by Microsoft, not by you application itself as I've done here.

[@AthelstanEngland]

@@CodingTutorialsAreGo hi and thanks for the confirmation. Yep, just this morning I decided to create a project using Identity Platform to see what happened and yep it wanted Azure login and all sorts. I deleted and went back to you videos!

[@Arcadenut1]

I am assuming that you're designing this for Client side and not Server side? If it's running server side you created your authorization service as a singleton, which from my understanding is global to ALL connected clients. Would that not mean the JWT token would be accessible to all the users since you are caching it in the Service?

[@CodingTutorialsAreGo]

Absolutely. This is Blazor WASM only.

[@PedalsizBerkay]

Thanks

[@waynehawkins654]

Yes to download the code. Is this for .net 8 or .net 7?

[@CodingTutorialsAreGo]

This one is 7.

[@jerryjeremy4038]

Is this the right way to do this?

[@cissemy]

Thanks Can you add Refresh Token ? Thanks

[@CodingTutorialsAreGo]

So many people asking for this. It's on the list

[@cissemy]

Also Maui Blazor Authentication with JSON Web Tokens

[@CodingTutorialsAreGo]

@@cissemy I'm not sure there's anything significantly different in MAUI Blazor than here.

[@waynehawkins654]

@@CodingTutorialsAreGo Yes please for refresh token.