.NET 6 Blazor 🔥 Authentication & Role-Based Authorization (using JWT & AuthenticationStateProvider)

Table of Contents:
00:00:00 Intro
00:02:42 Create a Blazor WebAssembly ASP.NET Core Hosted Project
00:04:47 Add the NuGet Package
00:08:28 Create the AuthenticationStateProvider
00:09:58 Register the AuthenticationStateProvider & add Middleware
00:11:55 Implement the GetAuthenticationStateAsync() Method
00:16:54 Add the AuthorizeView Component
00:19:27 Parse the JSON Web Token (JWT)
00:22:31 Use the [Authorize] Attribute
00:25:22 Check the Roles
00:29:08 GitHub Repo
00:29:24 Outro

🙏MANY THANKS TO THESE LOVELY PEOPLE:
Marco Otilli
Mark
FastTrak
l33ter
alibux
@mgrainger231
Luke Vincent
mrcl
Alain Legrand
Thomas Werner
István Csibor
Grant Burdon
@gianluigiconti
Gerrit Esmeijer
Illia
Németh-Pók István
Michael Mel
Marko Zdilar
GerryB
@DADA_universe
Domen Hren
@heroesch
Carey
Peter De Tender
Baris Keskin
Someone
@Big_Bear_27390
Mathias
walter e watkins
Günther Dassel
Axel
Josh
Daniel Huber
Fredric Adell
Juan Carlos
Manolis
Pajani
P.
Jonas Granlund
Someone
Bobby
Kristina
@xamarin007

#DotNet #Blazor #PatrickGod

[RzR]

Acutally there is built in way to read token from string, no need for custom parser

var tokenHandler = new JwtSecurityTokenHandler();
var parsedJwt =

also with this you can other things from token not just claims, like exp date whick is important so you dont put expired token in your header

[alainl]

For everyone out there, there are plenty of videos showing you how to implement JWT server-side -- and Patrick covers that too in another video -- but this is the first time I see a video that shows you how to apply it in a Blazor client app. In this video Patrick shows you how to use CustomAuthenticationProvider and the <AuthorizeView> component to apply role-based authentication in a Blazor client app. Great stuff. Well done.

[talkathiriify]

Thank you very much Patrick for sharing this with us.
It would be very kind of you if you make part 2 of this, and show the whole picture of it.

[MichaelBond]

I too would like to see a part 2 and put the whole thing together.

[Mimi-qdvu]

Thank you Patrick! Hope you have a wonderful day!

[neeftgamer]

Thank for the clear explanation! One of the few I found with .net 6 example. Keep up the good work!

[GergiH]

Thank you so much! I was looking for such a tutorial everywhere. Very clean and understandable and covers most part of the auth process. Now I only need to understand how to handle JWTs on an enterprise level.

[moritzfesseler]

I have one question to the token: Where does this specific token originally come from ? And why does it work ? if i changr the letters in it, it does not work anymore, but why is that ? I hope you can answer my question :) .

[hieribu]

Excellent video, I had previous experience with Razor and I am trying to learn Blazor, your videos it is helping a lot, thank you very much!

[ndy]

hello there, i've same problem @ 13:22 'string token ="" ' how can have it?

[way_no]

Can I see this from the server side of things. Thanks for simplifying this feature.

[MgMG-igqg]

What I'm missing is how the jwt token can be parsed if it does not have the secret key. Or does it and did i miss something?

[hunterwebapps]

JWT usually should not be handled on client. Most people use it for authenticating with their 1:1 API. Then it should be HttpOnly Cookies.

Thanks for sharing how to enforce on the client!

[mrasoft]

Well done 👍🏻 I would like to see how the client will use the JWT web token on making requests to the Web API. Part of a part 2 ? 😉

I think the client will send the JWT web token with each request towards a Web API and the Web API doing all kinds of checks with the JWT web token it receives to make sure the token is not tampered with and the client authorized to make the request.

[HoussamAsaad]

Where can I find tokens on the app? thanks

[baltazarramirez]

First of all, great video!
Can you show us how to use this custom AuthenticationStateProvider and Azure MSAL authentication in a single Blazor WebAssembly? Or do you have any reference where i can take a look? Thank you!

[zhaltys]

Hi Patrick! Thanks for great content! Sorry for stupid question but how does the app know that given jwt is valid? I know in this example it's just to show proof of concept, but in real life scenario, where would this validation occur? Is there a video related to that?

[lisnmgu]

Thank You So much brother !! I was trying to do role management programmatically, but it was not working. You save my lots of time. Thank You Very Much !!!

[adabsaidmirzoev]

Hello! Thank you so much for your effort and for this video — it was very clear and informative! If it's not too much trouble, could you create a tutorial on this topic using .NET 8, focusing on JWT authentication? I appreciate it in advance and look forward to your new videos!

[fleedum]

Great video! I already started just storing jwt token in local storage, using that to get the current user on the MainLayout, if null -> redirect to /Login, else -> /Index. Simple, custom implementation with a force reload hack since I don't have a way to subscribe to the auth state. The built-in solution is a bit too magical for me at this moment.