.NET 8 Blazor🔥Authentication & Authorization with Identity

hey friends Patrick here and today is the day net a will be released or it already has been released depending on when you're watching this video right and today also the doet Web Academy opens its doors for enrollment but as always only for 2 weeks and after this enrollment period doors are closed for at least 3 months so check out the link in the video description if you're interested because this time it is huge you get access to the already existing 2023 edition of the do and Web Academy meaning a 20h hour program where you pretty much learn everything related net web development web apis SQL server and of course Blazer web assembly for the client meaning we used Net 7 to build that but of course I already added chapters and lectures regarding net 8 so you will already be able to start using net 8 to build your web assembly fullstack application using net and also with enrolling to theet Web Academy 2024 Edition you get early access to a complete new program using all the new blazer capabilities all the random modes the new identity what we're also doing in this tutorial here right so lots and lots of stuff to learn I hope you like it I would love to see you in the academy again for all the information check out the link in the video description and in this tutorial now we will have a look at the new well it's not that new but the new authentication and authorization yes we will use rols possibilities capabilities of Blazer and identity meaning we will have a look at how well identity in essence Works how is this done with Entity framework and SQL Server yes we're using a persistent database there with SQL Server Express in this tutorial we will have a look at all the new pages that will be generated for us maybe you already know it when you used identity before you had to scff the pages you were able to change them but these weren't really razor components right or Blazer Pages you name it and now you have real razor components available beautiful stuff we will have a look at that we will have a look at how they work and then additionally what we will do is we will add properties to the application user so how can you well extend your user work with the data then and at the end we will also add roles so how not only uh does authentication work I also want to show you how authorization works right and then we see the authentication State providers how do they work you've got an authentication State provider in the well let's say server universe and also one in the web assembly universe so they have to communicate how does this look like and in the end how do you use any component page or a single component the authorized view if you already know that for instance how can you use this thing to well enable access to a user with a specific role so this is what we're going to do long intro this time I know I hope you like this tutorial and you learn something if you do you know the drill guys hit the like button please subscribe to my channel it does make a difference means the world to me and thank you so much already to all my patrons for supporting me I love every single one of you if you want to support me to check out the link in the video description lots of links today in the video description and now let's start with the tutorial all right so by the time of recording here I'm using the preview edition of Visual Studio 2022 because this is net8 release candidate 2 but I'm pretty sure that it will work pretty much the same way with the release of net8 the final release version so please bear with me here if there are any tiny things that look different I don't think there will be but keep in mind this is the release candidate feel free to add in the comments if there's something different in the final release anyways I want to start with the Blazer web app template here and let's call this now Blazer app identity. net8 because that's what it is right a Blazer application using iidentity for authentication with net 8 and in The Next Step you see it here this still the preview in your case this is probably different authentication type this is important now we choose individual accounts because we get lots of stuff with that automatically out of the box and then regarding the interactivity type one thing I have to tell you already it already works with no interactivity whatsoever because the net team uses the new static server side rendering let's say it's new with the8 for the Reg registration logging in all that stuff all right so it already works but if you want to use an account with interactive components no matter if it's server web assembly whatever then of course you can check interactivity here and I will show you how this works in this tutorial so you can again if you don't want to use any interactivity whatsoever only a form for instance using static server side rendering then you can just choose nonone and you're good to go but otherwise if you need interactivity I don't know for instance you've got a chart or anything a data grid something that just needs that interactivity bonus let's say then you can of course choose server web assembly or Auto let me just use Auto here because with that we get both worlds out of the box so I can show you everything in essence and then let's just hit create all right there we are and as you can see we have the Blazer server project here on top and also the client project if you watched my other tutorial videos then you know what this new architecture is all about in essence the client project is only necessary if you want to use components using web assembly so just the client no websocket stuff whatsoever and here now the Blazer server project also is a net web API or has web API capability you can add controllers here and of course your services database stuff and so on and as you can see with individual accounts we already have something using databases or one database for instance here the application DB context which uses well Entity framework all right you see it here there's the reference and when you also have a look at the dependencies here then we see regarding the packages we've got Microsoft Entity framework core SQL Server so SQL server is used as a provider here just one little hint maybe you want to use SQL Server Express available for free and also the SQL Server management Studio this is what I'm going to use in this tutorial and then with entity framewor core tools this is important if you want to use the migrations and as you can see here there already is a migrations file called create identity schema this means that here all the identity tables will be created the roles the user users rooll claims many many stuff and throughout this tutorial we will also make changes there meaning we will add a property to the application user and I will show you how you can then get this information in your application and also I want to add a role to the user and then show you how you can well build a component that can only be accessed then by a specific role an admin for instance right so this is what we're going to do and now the next step already before I dive into all these uh components here because when you have a look here components identity Pages account lots of stuff right great thing is this is really Blazer stuff right razor components here no MBC some nothing like that before we can actually use all that well we have to do something because again when we have a look at the program CS here we see that the DB context here is used with a specific connection string all right and you see also here SQL Server is used so to make this work what we can do is we can well already run a migration but I don't want this connection string here I want another one and again I'm using SQL Server Express here so what I can do is simply change that to SQL Express database name is also well I don't like it so let's just change this thing to something like Blazer identity DB for instance trusted connection is set to true and then we also have to trust the server certificate let me just change that so trust server certificate is also true and then hopefully this should work all right because when we run this let me just show you what will happen you see it here typical Blazer design right off required means okay we uh have to be authenticated to access this page but first we have to register an account right so maybe Tony at star.com we enter a password and another one to confirm this we hit register and then this happens all right so it says database operation failed while processing the request well in essence this means we have have to apply the migrations and we can do it here but it doesn't work at least in my case and then here you can see what you can do since we have the tools package in our dependencies we can really just uh Run update database in the package manager console or as it says here this side alternatively if you have the netf tools installed you can also just run this command and this is pretty much the same thing so let's go back to visual studio open the package manager console and now really we can uh stay here at this folder the solution folder and then update Dash database all right let's see if the connection string is correct build already succeeded this is nice and you can see all the stuff that is happening here all the tables that are created and now let's just open uh visual uh no Microsoft T server management Studio ignore the time tracker database here this is from theet Web Academy when we now refresh then open the databases you see Blazer identity DB we can open the tables and there they are this is all identity stuff all right and here now this thing will be interesting aspnet users for now there's nobody here well that's not 100% correct Tony Stark is already here and this is really interesting because this means that the site the form well it was submitted again after the the migration or the database has been updated so I wasn't aware of that to be honest so maybe there is something going on here in the app that uh just reloaded this thing maybe hot is it hot re well hot reload is actually off turned off in my case well magic I have no idea why this worked but this is great you see Tony star but again to show you this uh one more time first what we have to do is we have to confirm this account yeah you see it here normally you would send a confirmation email for instance to the user after registration and then tell this user hey please click this link to confirm your email address your account because then uh here you see it you have this property here email confirmed is set to false and let me now say click here to confirm your account beautiful thank you for confirming your email we execute the SQL again and now it is set to true all right so this is how this stuff works now we able to log in all right so here now we can uh well go to the weather page and then for instance Au required and then when I just go to Tony at star.com enter my top secret password I hit login I come back to the uh return URL this is already working out of the box I can access the off required page isn't that great and the authentication that is used here is Cookie authentication all right so no Jason web token you can opt in for a barer token which is not a Json rep token this is something special that Microsoft built here but they recommend using cookies all right the whole world the whole web World used Json web tokens and now everybody is saying again well Json web tokens are not that secure please use cookies if you able to all right then well let's just use cookies here so here you see it the actual cookie is this thing here all right and you can send it with an HTTP only flag and so on so uh yeah and I said it's much more secure anyways logging out does not work in my version here get this error here so let's just remove all the cookies and then we can again go to Au requir and as you can see it is redirecting us to log in with the return URL and we can for instance also again register with another account let's do this one more time as I promised for instance Peter parker.com and this is the password all right again we click here to confirm our account back to SQL Server management Studio execute n wec Peter Parker here isn't that nice so this is the email address and we're confirmed and again we can now login for instance Peter parker.com and the password hit login yep and now we can go to auth required for instance and we see our email address which comes as a claim all right and now I will show you how this stuff works behind the scenes in essence so here again the uh the token let's just remove this thing and we're not authenticated again so back to visual studio now first of all in the server part here we go to the program Cs and this is now typical identity stuff all right in Ence nothing that new really if you wanted to use aut core identity before meaning with 17 for instance then you had to do similar stuff so I'm only getting to the important points here all right so not want to dive deep into everything here except maybe this thing and that's one reason why I chose um the uh intera Ive interactivity mode alsoo because with that we already get these little lines here well it's not much to just add that but we get interactive server components and web assembly components and when you by creating the new project when you just choose web assembly or only server then you have to do this then add these lines manually if you're changing your mind and you want to use then the other uh rendom mode but with that then you just already have everything available same down here here add interactive server render Mode web assembly render mode and this is also necessary for the uh web assembly render mode if you delete the example component here the the counter component then make sure to change that all right so that the app knows what which assembly you want to use one component is enough you don't have to do this for every web assembly component just one component and then you're good to go all right now what else do we see here well well cascading authentication State this is important for our components to know the authentication State all right what does the tool tip say add cascading authentication state to the service collection this is equivalent to having a cascading authentication State component at the root of your component hierarchy yeah again necessary so that the authentication State well is known throughout the whole application then you got the user access up now this is interesting because when we have a look here the application user all right again let's start here we have DB context which uses or inherits from the identity DB context you could also just leave it like that the identity DB context then you would use the default identity user entity or the identity user class but if you want to use your own custom user class then you do it like that and add the application user here it's called application user inherits from Identity user and now here and we will do that in a couple of minutes you can add your own properties all right maybe you want to know the date of birth or the pl date of place of birth or maybe the team of this person Avengers or the Justice League something like that all right so you can add this here to the user add another migration again we will do this in a minute and then uh this still works with identity great stuff so this is the DB context then and now you know what the application us is we already saw that and then there might be situations right where you want to access that data well it's not default identity user data so we have uh so-called user manager with identity for instance that can then access the default properties like the email address or the username or the phone number which is also default but for the other stuff we need the user accessor for instance there are different ways of course million ways to access the data but here you already have it you have the get required user async method with that thing you get the currently authenticated user all right returns that thing here you see it it's the application user could be n of course but in essence it is accessing the current HTTP context and from that getting the user and or the principle the claims principle to be more exact and then it uses the user manager from Identity from the identity framework and gets the user then that you want to use and then you're able to well check the properties there so this is that magic again other stuff identity redirect manager well let's forget about that not that important for this tutorial the authentication say provider is very important all right I think this is a big question mark for lots of you how does that now work with the Blazer web app before for instance with blazer web assembly we had the authentication State provider and we still have it of course and as you can see here in the web assembly part we also have still the method get authentication state async which well provides the authentication State and also adds the claims to the user all right and here what we will do later is we will also add a role all right right because the I don't know the date of birth for instance if you want to use a custom property this is not a claim that you would add here one more claim you would add is probably a rooll though so let's do that later as well and then you've got another authentication step provider which is this thing here and this comes from the server and again I don't want to overwhelm you with all that stuff I think it's not that important for this tutorial but the most important thing to know is that this authentication State provider persists the authentication State and let's just say it forwards the information of the current user to the client and as you can see here this is the crucial part and again we will make a change here where we will also add the role to the claims and then the role will be available on the client so this these are the places to look at and then let's continue add authentication well register Services required by authentication Services specifies the name of the scheme to use by default when a specific scheme isn't requested important for authentication let's just leave it at that now this I think you know now adding the database contacts it first gets the connection string from the app settings Json um we use the SQL Server provider and all right we have database developer page exception filters yeah good for development I guess and now very important block add identity core all right so with that we add asp.net identity and here again you can see that we want to use our application user that inherits from the identity user so this is important and as you can see here require confirmed account this is the email stuff right we did a couple of minutes before that uh you usually would have to send an email confirm that thing or you just Chang the value in the database or you set this to to false and then it also works here we say that we want to use Entity framework right with our application DB context this is great and we also add the signin manager this is a service of identity and default token providers not 100% sure but I think this is for the bar token functionality if you want to use that we have an email sender here did not use it again I think not important for now but what is very important and this is new with. net a really is this little line here map additional identity and points because this now gives you the option and I created another video about that uh this gives you the option to adds well let's say authentication end points like register login uh two Factor authentication manage your account and so on lots and lots of stuff and this then is here used in this application and how is this used well again let's have a look here at the components then we've got identity all right but even better pages and here you already see lots of stuff and also the manage Pages all right so here all that stuff is used and again I told you that at the beginning of this tutorial this uses SSR static server side rendering it's actually only server side rendering but uh well in one of the community standups the aspet core team said maybe we can call it static server side rendering to well to differentiate between really using serers side rendering without websockets and Blazer server then is the server side rendering with websockets all right I know maybe still a bit confusing but again if you just play around with that you will get the hang of it and then maybe a couple of days you will begin to love the new Blazer with.net 8 anyways so this is now the login form that you've already seen a couple of minutes ago and here also the register uh form and the great thing is this is really uh a stretch goal as they said in the on the net block this was not planned for net 8 actually for net 9 but we still have it here this is great thank you so much and congrats to the aspet core team this is amazing because now we don't have MVC pages here we have razor components all right so this is the edit form you know and love and again with static server side rendering the big difference is here we give this form a name register for instance and then down here in the code block we use this new attribute Supply parameter from form and with that we know that this uh this property here is used in that form if you have more forms than just one on one side then you would have to define the name here as well but we only have one form so this should work all right and this is then again the input model and I think the input model well it's not here but in the login page there we have it model is input and when we go there yeah here we see the uh input again Supply parameter from form this is our model and here it's uh this is actually the class for the login all right and the same I also saw here at the index of course I'm not going through every I I did not I haven't yet looked at all the pages but I think for this tutorial here these are the most important ones login register and then maybe here manage your account and here it's the same thing you have the input model here and uh there you see this little small thing and now let's add I'd say a custom property all right date of birth maybe and then what I would like to do is well implement the whole logic how to change this thing then on that manage page all right so again what we have to do is first let's have a look for our application user and here now let's just add another property so prop we can use date only which is not a bill and say this is date of birth all right so this would be the first step and then we first or the next step would then be to add a new migration all right so what we can do is simply add migration and say date of birth edits we hit return everything is saved build is started the app is still running so I'm not sure if this will work when the app is running let's just see oh this looked great and you already see the new migration file here it was opened for us I think this is new isn't it date of birth yep and we've got two methods if you're not familiar with code for migration one for while applying this migration and another one for rolling it back and here you see it would just add another column to the aspet users table type as date it is nullable and again if you want to roll back this it would simply drop that column date of birth looks great to me so again let's just say update data base this looks good so let's go back to here and refresh this thing tables ASP net users and the columns and you can now see date of birth this is our beautiful new column we can of course have a look at the data here and now here we see the date of birth now we don't want to change it here in the database of course you want to do that in our applic application all right so now what we can do is again we go to our manage index page and I want to add the date of birth so here now let's just add this property date only and call this date of birth now how do we get the current value well we've got the UN initialized async I'm again sure you're familiar with that just real quick for information if if you're not familiar we have a couple of life cycle methods in Blazer three are the most important ones uninitialized on parameter set and on after render now let's just say we've got the uninitialized async here that we want to use meaning when this component is initialized we do some stuff right and as you can see here we have our input model we're using this beautiful Co LS sing I'm not sure how to pronounce that uh operator and this just means if if this thing is null then we will just initialize or create a new instance of the input model but if it already has a value then we don't all right we just use that value here and after that we're using you see it here right you paid attention so you know the user accessi with that thing we get the current user and with the help of the identity user manager we get the user name and the phone number and now we also want to set the date of birth to our model well we already have the user thanks to our user manager so what we can do is we can simply say input date of birth again this beautiful operator so we have the user with date of birth great this is how we get the current value now again let's have a look at the form we have on valid submit asnc this is the method that you want to use on a valid submits so what we then do or real quick what does a valid submit mean well we have have the data annotations validator here meaning that some values well are for instance required or they have to have a speci specific format like the email address right and this can be checked here automatically and if well something is not correct then we will see an error message that's why unid submit we could also do it like that unsubmit and then it doesn't really matter if the form is valid or not it would call the onv valid submit async but here now we're using validation which is nice so now here you can see on valid submit async what you want to do is we want to set the new phone number but now we also want to set the new date of birth all right and what we can do here instead of this block well we can simply change the value all the values we want to change for our user and then call the update async method of the user manager from Identity and then we see if the result or the update succeeded or not so how would we do that well we can simply say user phone number is now the input phone number then user date of birth is now the input date of birth right then we can say update result is now wait user manager and then simply update async and we want to update the complete user here and now we can use actually this thing here we already have and just check if update result succeeded and if not we redirect to a page with a status unexpected error when trying to set well let's say update the the user almost the user all right then sign in manager refresh sign in async all right and redirect to current page with status your profile has been updated one more thing is necessary we of course need a component to change the date so what we can do is we can simply copy this block here since we're using uh date only type now instead of input text we use input date let's say the ID is date of birth copy that thing paste it here as well again date of birth it is placeholder well let's just remove the placeholder then here we have date of birth and here validation message also date of birth now and I hope that's it let's just restart the application and try that rebuilding we have an error right that's why it took so long okay somewhere the semicolon is missing of course why didn't you tell me guys now we should be good to go hopefully yep it's rebuilding nice okay so now who should it be Tony Stark maybe Tony star.com logging in all right now drum roll we go to yeah so now here we have the phone number and the date what happens if I just click save okay so here you see the validation in action right we have to enter phone number and a date of birth now for the phone number I don't know the phone number but regarding the date pretty sure this is the one all right so you see we also have a date time no a date picker here what happens now if we hit save well it's saved your profile has been updated well you read that before right that thing that is the message isn't that nice and we can now refresh this thing and we have our data here and again just double check here in the database and now we have the date of birth and also the phone number isn't that nice and with that you have lots of power because now you can just build the user you want the user object you want and do anything anything you want with that thing all right but this is not all I've got one more thing and this shall be the rol because I'm really really sure that you guys want to know okay authentication is nice but what about authorization not authentication authorization so what if I want to say this page here should only be accessed by an administrator well let's just do that it's not that hard but you just have to know how it works and after the next couple of minutes you know how it works but the first thing we have to do is we go to the uh program CS again so here on the server we have to add one little line after add identity core real quick the dotnet Web Academy opens its doors for enrollment today but only for 2 weeks and after this enrollment period the doors will be closed for at least 3 months so check out the link in the video description if if you're interested this time it's getting huge you get access to the already existing 2023 edition of The Dot and Web Academy where we built a full-fledged full stack time tracking application with Net 7 and bler web assembly and now there are updated lectures and chapters regarding net 8 so you will know how to do all that already with net8 but additionally to that you get also early access to the 2024 Edition a complete new program that will use of course don8 and all its new blazer capabilities all the rendom mode the identity stuff lots and lots of stuff to learn brand new program brand new application that we're going to build Early Access meaning well donate is available since today so I need some time to build this thing but with that you also get access to the community where you can of course also well have the option and the power to change the stuff that I will create right so if you have certain ideas you want to see in the application just tell me that in the community and then I'm more than happy to create the videos and well adapt the lectures the chapters the whole application that we're going to build so this is what you get with the do Web Academy two big big programs that will make you a net web developer front end backend database stuff everything there deployment to Azure and also the community please check out the link in the video description looking forward to seeing you in the academy and and now let's continue with the tutorial we now want to tell the identity framework that we also want to use rols they're not there by default this is important guys so add Rolos and again you can use your own class or you just use the default identity role all right and of course at the parenthesis and here let's have a look yeah there it is identity roll string right with an ID name and so on and this is then represented in the table so what we can now do first here in the database we have here the the beautiful ID for Tony let's just say Tony okay we are using Tony here for this example and now we go to aset roads so here we Define the rools if you want to use code for that there is a roads manager comes with uh the identity framework out of the box and then you can use this manager to add rols remove roles and so on but you know let's just do that a bit quicker and we do it here in the database so here what we have to do is we have to also add an ID I want to add that uh another goid but of course not exactly the same something like that maybe and now let's just say this is an admin normalize is also this thing so this is now the admin role and to use that role for a user well here's the P net user roles table so this is just the connection with foreign Keys you can also see it here right two foreign keys and the user ID and the role ID together is also a primary key so here now we just put the uh user ID and also the RO ID I just added here for this little example and now Tony Stark should be an administrator all right this is everything you have to do at the database or in the database and now again back to the code here we have another class which is important for us and this is the user info all right and here in the user info we have the user ID and the email but we also want to add the role now so another property required string is it really required well let's let's just test that all right here's the roll save that and now again I know you paid attention right we have the authentication State provider the persisting revalidating authentication State provider and here now we have to add this role as well you can already see here there's something missing right we have to set the role so first how do we get it well we just say V roll is now the principle that we have from our HTTP context or also here the authentication State then and we want to find the role that one the the role claim type all right so here you can see email claim type username user ID and the role and I think that's pretty much it okay security stamp is also there but I think the one that you want and need is the rooll claim type and then down here we can just say roll is roll so many rolls okay that's that and now we go to the client and here now the persistent of indication State provider again if you're used to web assembly Blazer web assembly then you know what's going on here so let me just copy that line paste it here and we have again couple of claim types of course but the role is the one that we want to use here and also set it like that and now it's getting interesting I haven't told you that actually if you want to secure a page so that only authorized user users can access this thing syntax highlighting not working here have preview five by the way I know that this update is telling me or this notification is telling me that there is a preview six but I'm a bit afraid don't not not sure if this would be the right decision after that tutorial I will update promise now here we can also say only admins should have access to the whole page or what we can also do is we can just say uh specific authorized view should only be accessed by administrators all right let's just try that first so here now we just say rols and then admin see that syntax highlighting no intelligence I don't know what's going on there but let's just try that and it is rebuilding all right exess denied not available we have to look out see that this little bug not working in rc2 but I'm pretty sure they fix it with the final release so let me just remove move the uh the cookie there now we're not logged in all right okay so now we said that we have to be administrator of course we also have to this is important if you're developing this and testing that and you're playing around with rols and I don't know any kind of authorization and you already are authenticated you logged in a user but you change something about that user the cookie is still the same all right so it could be the case that you're wondering hey I set the admin role to that user but I'm still not able to access that page why is that well let's try to just log out log in the equivalent of have you tried turning it off and on again and uh then it might work so let's try that Tony star.com with that password here and uh maybe we can make this a bit smaller so now we are at the manage page we can go to off required and we able to access this page okay because we have the admin R now let's change that and maybe just say only admin 2 is allowed to access the page let me first go back to the weather page for instance and we restart the application it is rebuilding and now what we expect is when we go to off required that it would well not work go here and yep access denied looks a bit buggy here account access denied not available it seems for for not found but this says well this user is not allowed to access that page of course we could do that bit well more beautiful let's say restart it again weather and now auth required we can go there isn't that nice all right so that's that this is the complete page but what now about the authorized view well let's just copy this and paste it down here now here we can do something similar we just say Rolos and then also admin and here know we say you are an admin isn't that great so now let's restart the application you are an admin works just like that again admin 2 save that restart the application not working or you're not able to see this all right so this is how you can now also use rols with Identity or individual accounts with the Blazer web app template it works out of the box lots and lots of possibilities here also with two Factor authentication for instance again you can change your manage page it is Blazer all right so you can you know it you can do anything here change the password you can change the design for instance with table and CSS we use table and CSS by the way in the do and Web Academy so lots and lots of stuff that is already there there for for you for us you can download the personal data and so on so again lots and lots of stuff that just works I love that tell me what you think about all that do you have questions of course I didn't build this so I have to dig deep as well when you have questions and I try to answer your questions and yeah again would be really interesting to know what you think about the new blazer in8 and now here the identity uh option for us as the developers using Blazer now with. net8 thank you very much for watching don't forget to again hit the like button subscribe to my Channel please guys would mean the world to me if you want to support me even further then check out the link in the video description for my patreon page and don't forget the do and Web Academy maybe you're interested would love to see you there really looking forward to and uh the link also in the video description again thank you so much for watching and I hope I see you next time take care

Channel: Patrick God

Views: 28,685

Keywords:

Id: tNzSuwV62Lw

Length: 45min 57sec (2757 seconds)

Published: Tue Nov 14 2023