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

hello my friends patrick god here and you keep asking me about authentication and authorization in blazer web assembly well you've read the title here you are this is now the video so if you have any issues with the blazer web assembly or you just want to know hey how do you do that stuff with authentication you heard something about an authentication state provider maybe i think now this is the right video for you what we are going to do is we will create a blazer web assembly project of course i create a asp.net core hosted project as you will see you can see in the tutorial i already recorded that so maybe i will repeat that in the tutorial as well but anyways i will create an asp.net co-hosted project or solution and why is that well i have that feeling that maybe we will build a part 2 out of this but you can totally do that with just the the client project but i think you already got your blazer web assembly project anyways and you now just want to implement the authentication stuff so either way this is the right tutorial for you if you use a json web token because what we will do is we will use a hard-coded json web token in essence for all the creation of json web tokens and all that web api authorization stuff check out this video here i've got a bunch of videos for json web tokens and authentication and so on with the web api so maybe this is something for you but now let's focus on blazer web assembly we add a custom authentication step provider we will use the authorized view component together with the authorized and not authorized components lots of stuff of course also with roles so i think lots of information and knowledge already there and if you learned something then i would really appreciate it if you click the like button maybe even subscribe to my channel it does make a difference and don't forget to click the bell icon to get a notification when i upload a new video currently this is happening every week so maybe you really want to subscribe thank you very much for that additionally if you want to get videos like this one here earlier in your inbox and also early access to upcoming courses like the ecommerce course that is coming this month i'm confident that this it's coming this month then maybe you want to subscribe to my newsletter that would be also really really nice thank you very much promise won't spam you at most i send an email once a week and last not least everybody thank you so much for all your support for all your coffees really really appreciate it i love you forever guys and if you want to do that as well please check out the video description there are all the links also to the github repository so if you don't want to watch the video and just get the code then well stop the video if you want go down to the video description and then get the code but i would really appreciate it if you just keep watching maybe it's a better way to learn i don't know long story short enjoy the tutorial all right we create a new project and this time well as almost always it's a blazer web assembly app we click next and let's call this blazer well authentication tutorial maybe hit next the framework we want to use is 0.96 of course no authentication we configured this for https no progressive web app but not really necessary but still i select asp.net core host because i have a feeling that maybe there will be a sequel to this tutorial here part two or maybe also three uh so in this tutorial now we will only use the client project let's just hit create when i talk here and um yeah we will just use the client project there it is already that was fast nice as you can see we've got the server the shared and so on because what i want to do here in this client project or in this tutorial that we will use a hard-coded adjacent web token i know i know i know i know it would be better of course to see how you create a json web token but if you want to see that check out the info card i've got a bunch of videos already here on my youtube channel about authentication with the web api role-based authorization creating json web tokens login registration and so on so please check this out and with that knowledge you can totally make this happen here but if i make this now and put it in here then there's too much i would say too much stuff on the server side and we don't really need that i want to focus on on the blazer client here so long story short only the client but maybe there will be a part two if you want to see a part two where combine this then the web api creating json web tokens with then the authentication and authorization part on the laser web sample client you know what you have to do please comments in the comment section below this video so authentication now first thing very first thing we have to do to make this happen is install and you get package so right click the client project manager packages make sure to select the browse tab i don't know why the default is the install tip i always make this make this mistake that i i'm searching here don't find the package and i don't know it takes some time to realize hey wrong tab so browse tab it is and then microsoft is it there yeah there it is already microsoft asp.net core components make sure that it's components and then authorization there's also another namespace microsoft asp.net core and then already authorization you already got this you don't have to install this and this one you have to install authentication authorization support for blazer applications so microsoft aspirant core components authorization it is install say okay accept all right and now with that make sure to also edit here to your imports razer file with using microsoft's asp.net core and here you see that there's an authorization already but we want components and then authorization all right we save this and then we change the appraiser a little you see here there's the route view and if you are you're already a bit familiar with blazer and i think you are because you wouldn't start with authentication if you're a total beginner to blazer then you know with the route view you will display your pages here and you see that the main layout this file here is used for the default layout and so on if you're not familiar with that stuff maybe have a look at my other videos here on my channel or maybe you want to check out the blazer boot camp or the still upcoming blizzard e-commerce course although this is also a bit advanced blazer boot camp great course i think people like it i hope at least they say that even got jobs thanks to this course so maybe this is for you but anyways let's continue instead of using the route view we want to use the authorize route view here with that our application knows if the user is authorized or not and additionally we use another component and this is the cascading authentication state there it is already so we need these two cascading authentication state and the authorized route view one more thing we can do for a bit better user experience we can close it here and then add a text by ourselves if the user is not authorized for instance and not allowed to see a page so what we can do now here is add another component not authorized and say sorry but you're not allowed to see this right something like that because otherwise if you would not use this not authorized component then i think the text is just not authorized and that's it so yeah not very nice and here we could add something like hey you're not allowed to see this but maybe you want to log in or register or i don't know some stuff like that and that's the appraiser file appraiser file and with that out of the way we can already create the authentication state provider very important here in blazer web assembly well the name already says it it provides the current authentication state and this is an abstract class so we have to create our custom authentication step provider and for that we right click the client project again we add a new class and then we say custom auth state provider for instance and in here now we inherit from authentication state provider we need a using directive here again this was the one we installed and since we've got c sharp 10 in here let's make something crazy we add the using here and we add a global and with that yeah we know this abstract class here and what does it say provides information about the authentication state of the current user crazy okay this is an abstract class so we have to implement it as you can see here does not implement the method get authentication state async control period on my keyword shows us this quick fix menu of course you can also click on the light bulb here and then we implement the abstract class and you see there's the method and now we have to do something with that but before we can do that we have to register the authentication state provider and we do that now with dotn6 in the program cs and this looks like that builder services add and then in angle brackets authentication state provider so whenever we want to use or need an authentication state provider we use our now custom auth state provider and that's it and additionally we need something else and that would be builder services and author there it was authorization core does it say something here yeah ads authorization services to the specified iservice collection all right so you see lots of stuff lots of boilerplate code in essence we need to make authentication and authorization happen here with blazer now thing is what we can do is we could create another page just for the authentication here but we can also just use the counter for instance so what is happening here jesus use please i do this all the time use the correct shortcut to save everything it's ctrl k and s at least it might in my case and uh when when we start this now let's see what happens i guess the page crashes nothing works there it is loading yeah you see it already now we've got our custom authentication step provided of course we're returning a not implemented exception but even if we um if we comment this out as you can see here well it wouldn't even build because we have to return something so we have to implement something otherwise it just does not work and how would we do that now the very first thing we will do here in the uh in our custom authentication step provider let me just close the app first is we need a token and as i already said i don't want to implement the server stuff here no web api i've got other videos for that but again if you want tell me and i will make a part two here with this video for this video and then we will grab the token or create the token on the server but for now let's just say of course i have a document open with a token and that would be fun because now you don't know what is inside of this token you don't know who's the user what's his role what's the expiration date and so on there's the token well you can try to read the token copy it but i think that's that's pretty hard work of course i've got the token for you to copy just look at the video description there's the github repository where i will push this code this whole tutorial code so of course you don't have to bother with this but maybe you also already have your your own code to create such a token a json web token and then you can use this one as well of course so long story short we've got our token and now the auth state provider now the thing is what we have to do here is we have to return a state and this state well this thing needs a claims principle and a claims principle needs a claims identity now you know what right it's it's simple well not really of course as always if you know it it is but first thing we need is our identity and in essence this is our uh user somehow so this is a new claims claims identity is that correct let's see yeah we need another reference here so some security claims and now with that when if this is empty then this means that the user is not authorized and i would say we start with with this situation here and then we build the app run it and then see what what is actually happening here so with that identity we create a new user which is a claims principle so var user that's it already so new claims principle and we give this claims principle the identity and then we've got our state and this state is a new authentication state with that user now but you can then do don't have to but i'd really recommend that is raise this event here notify authentication state changed raises the authentication say provider authentication state changed event and this means that you have to give this thing the the state so task from result state and when you do this and you've got components that um that want to know what is the current authentication state and they subscribe to this thing and then well they will get a notification in essence that the authentication state has been changed and maybe they have to do something so does not hurt to to raise this event and here in the end now we return the state and of course we have to add the async keyword to make this work so again we already pasted the token here but we don't use it now we just create an empty identity and this means the user is not authorized all right so this is how you tell our app okay no user or not an authorized user here and then we create a user out of that with a state return this now of course what we will do in a couple of minutes we will add the user here but maybe with a role that is not the proper one the user needs to see something but one step after another with that the app should run now so let's start it i really hope it runs um i'm not that prepared as always there it is all right nice okay refresh yep this looks good so this is the typical blazer app you know this of course and nothing changed really right so we've got our authentication stuff but the app did not really change but now what we can do is we can add something to the counter page for instance and that would be again some components like the authorized view let's just add the authorized view here not the route view now it's just the authorized view and let's add a text here do you see this okay rebuild is great let's have a quick look nothing here but you can see something is happening here in the console authorization failed we don't see the content here but now again what we can do is we can use the not authorized component let's run this by the component yep that should be it and now we see do you see this and let me add a paragraph here okay hot reload magic works we see authorization failed but of course now we see that because this is surrounded by the not authorized component so we can now say your not authorized buddy already already here sometimes i'm amazed by the hot reload feature and sometimes it just does not work at all okay so this is already really really great because you can control your content you can you can decide what you want to to display if the user is authorized or not now of course we need an authorized user to display something and for that we use the authorized component now so again short recap if you just use the authorized view then it's in essence just just that it's this would be the same we have the authorized view and also the authorized component but if you want to display something else when the user is not authorized then you need the other components you're not authorized all right so much authorized okay now with authorized let's just copy that all right paste it here you're authorized like that maybe all right and of course we don't see that now yes rebuild and apply so we have to create a valid user now in the custom auth state provider for that we have to parse the json web token as far as i know there is no built-in function in blazer yet so we have to write some stuff by ourselves and there was this great guy or still is this great guy called steve sanderson there it is and he created some code already in 2019 that parses this token and these are the methods we need for that so first we pass a base64 string string which is that token without the padding add some characters here and then here he well passes this jw this json web token and gets the claims from there as key value pairs so we can copy this and again just have a look at the github repository and copy it from there as well please so kudos to steve sanderson this is really really great stuff and um yeah i'm i'm copying this here because this is just tedious work and i don't know this would just take some time that you really don't need to use here so to make this quick just copy this at the reference here for the json serializer and then we should be good to go okay so we've got the code here and with that then we can parse our json web token of course so now in here let's just copy that so we can switch between authenticated and not authenticated users so let's comment this out and in here now we just say pars claims from jwt with our token string here and then we add jwt as authentication type as you can see here initialize a new instance of the claims identity class with the specified claims and authentication type okay so that should be it already let's have a look you're authorized hooray isn't that great so this this is it so this is how we authorize the user now but of course there's still some stuff that i want to show you for instance we we added the the not authorized here in the authorized route view and we did not see that yet so let's maybe let's add something so uh you will see what i i mean by that and after that we will also add the roads so first what about this stuff this is for complete pages so let's say we've got our counter page here and there are not just parts of the page and you you only want to say only want to show authorized or not authorized users it's about the complete page and for that you can use an attribute and similar to the web api maybe you know this already you can use the attribute authorize this thing here and for that see here we need another using directive and that would be microsoft explained called authorization now i think i talked about earlier but we can also edit here of course not with components now just asp.authorization and we go back here then this attribute works and again we now go back to our page we're still here but if you know switch to the unauthorized user here in the custom auth state provider so let's comment this out and this back in we save this and start the app again we see sorry but you're not allowed to see this and as i also mentioned when i remove this thing here like that it says okay maybe we have to restart the app again not authorized pretty boring right so i think it's better to to add some text here or what there is there's still one option that i really like what we can do of course is add an image maybe with a width here because this is a pretty big image so let's say 600 and that's the source and now what happens nice all right okay so now you see if the user is not authorized we see this little image here and if this is we don't okay that's great so this works now let's let's just use this user again stop the app for whatever reason and last thing now we have to check is the role so authentication in essence works we can use parts of a page for authentication or authorization and also a complete page here so now our user can access this page and see this cool text but what about the roles now you can access the username as well what do why do i say this the the name is a claim in the token right and the role is in essence exactly the same now let's see how we can access the name for instance when you want to say you're authorized as and then the name so you're authorized as and then we can access the context and this is now only available because of all the authorization stuff and with that context then we get the user the identity and then for instance the name right and this is this is a claim so when you're creating a json web token in your web api for instance again have a look at the other videos then at one point you add the claim with the claim type name there there's also name identifier all other stuff is there as well and also the role of course but let's let's start with the name for instance so we saved this and stopped start the app again let's see yeah this works already that's nice right so now we see the name of the user which is tony stark apparently so you're authorized as tony stark that's great this is how you get the name and now the other important thing is finally the role and to use the role you can simply add roles here and then let's say we only want spider-man to access this stuff here we reload the page ah now we see that you're not authorized buddy all right tony stark is not spider-man and what about the role iron man for instance you're authorized as tony stark great and what about the complete page let's see here now in parenthesis we can also say rolls and then for instance spider-man rebuilding you shall not pass all right and what about iron man you're authorized as tony stark great so and this is everything i wanted to show you in essence that's it already one more thing regarding the token you can always go to the page there it is jwt io and in here now of course you can also paste the token is it here still nope that wasn't correct of course this was the uh image address but let me grab the token again from our code here this thing back to the page there it is now and here you can see everything i edit so the role is iron man the name is tony stark and the expiration date is may 29 2017 and if you know why i chose this date then please write your answer in the comments okay and the very last thing let's push this to github that would be the blazer authentication tutorial this is a public repository create and push and we're done all right that's it again i think lots of stuff already you know what packages you have to install well there's only one package it's still an important package right you know what components you have to use what you have to change in the imports file the app eraser file has to be modified we also created our custom authentication step provider so lots of stuff maybe for part two we can use the web api of course we can also use the notification states has changed event i think this is a proper name with other components lots of stuff of course we can still do if you can't wait for the other videos please check out the blazer boot camp there you will learn all that so maybe this is something for you and apart from that if you learned something as always i'd really appreciate it if you click the like button maybe even subscribe to my channel hit the bell icon to get a notification for new videos and additionally maybe the newsletter is something for you would really appreciate that as well last not least again guys i love you so much for all your support all the coffees really need that as always in essence my boy is asleep again and the coffee is keeping me awake and now after recording this i'm pretty happy to edit all that stuff so i hope you enjoyed the video thank you very very much for your time i hope to see you next time take care you

Channel: Patrick God

Views: 61,069

Keywords:

Id: Yh16E2u2pio

Length: 31min 6sec (1866 seconds)

Published: Tue Jan 18 2022