Blazor WebAssembly Login/Logout Forms - A TimCo Retail Manager Video

welcome back to the timco retail manager course this course focuses on real-world application development in this video we're going to be adding a login page and a log out page to our blazer web assembly project this will allow us to test the app the authentication system and ensure it's working from there we'll create a small status page that will give us the details about who is logged in and what permissions they have now if you're a patreon subscriber at the five dollar per month level or higher head over to get the source code for today's video that will help you follow along and ensure that the code that you have matches what i do okay let's jump into visual studio now we're going to rough this in we've we've talked about it before with our portal we've been working on it um the authentication system it kind of roughed it in meaning we have some stuff in here that's hard-coded that i'm not real thrilled with but it's the the basics we need to get going well it's the same things get true today with the pages we're going to create a very basic login page and log out page nothing complicated nothing that is um really flashy and in fact i want to redo these after we create them but this allows us to very quickly get something working and then from there we can go to the next level of making something better but always start with something working first otherwise what happens is you concentrate so much on better you miss out on whether or not it can be done that way and then often you end up throwing out a lot of the work you did that wouldn't have been necessary if you had just tried to get the the base thing working first so we're gonna create a page called login now again eventually what i want to do probably is i want to have let's just start this up by the way let's start this up that way you can see what's going on so let's hit um f5 here once we've set the startup project as portal and what we want to see eventually is that i want to see in the in this bar up here i want to see who's logged in all right now right now it's not not in um a long to get in because it's saying hey we're trying to authorize but that's just not working we got it we're broken no worries but i want to see up here where it says hey you know you're logged in as tim i am tim cory or you're not logged in and maybe even have the login name and password box right in this bar we just filled out hit submit right in the bar and then it logs us in that seemed like a a good system to have really really small unobtrusive not a whole page but for right now we'll create the whole page because it's simpler so let's do that now and hopefully we'll take care of this problem if we have f12 here and go to the console it does hit a problem on a halo exception object not set to an instance of an object so we've got an instantiation issue in here which can be a little tricky to track down with assembly um but it's i'm gonna show you how to debug if we need to with webassembly because there are tricks to getting into your c sharp code itself to find out where that instance is but for now not to worry we'll dive into it when we need to okay so let's create our login page so add new razer components not razer page razer component make sure you know the difference razor page is a different type of web page it's a server side only page that is very very fast but it's different from a razer component which is a blazer page so just the other difference the dot razor should be the extension and let's call this log in and there's our login page so let's start building this out the first thing i want to do is under models we have the authenticated user model and the authentication user model the authentication user model is that email address and password we're going to want to use that model and fill it in on this page therefore let's create a private authentication model i'm sorry authentication user model which gives me the whole path let's go ahead and cut that out and go to our imports and say using portal oops not portal.portal.models portal.models there we go and we will probably also have to add one for authentication as well so let's just do it now using portal.authentic and that's all the stuff to do with our authentication system so with that in place in the import statement now we don't have to have the full path we can just have the name itself and let's call this model and equals to new and we can use the new syntax here since we're in net five the new syntax of just new instead of new user authentic or application user model and the reason why is because it's kind of redundant to say private authentication user model equals new authentication user model we know it's an authentication user model unless it's not unless you were instantiating a different way the child class or parent class or something like that but um since we're basically duplicating this word instead of making this really long we're going to say new and that does the same thing so the only way we can do it is say private var model equals new authentication user model but i like this way better because when you're scanning down the page on the left hand side that's a type and you don't have to see the type again to know that you're instantiating that type all right and we're going to have a private um bool that is show authentication error and we'll say false and we'll capture the private string let's call this i just call it error or error text ah authentication error text there we go and since these are these are actually uh local variables let's make sure you have the right casing for it it often gets mixed inside of blades webassembly and blazer server because the fact that you would have public property sometimes but since this is a private variable we're going to make it lower case and then let's have one method here it'll be a private a sync task of type or called execute login this is where we actually do the work of logging in and that messed up my credit braces there we go and we'll say um show authentication error equals false to begin with that way if you log in we have a problem so it shows the authentication error then you go to log in again it's going to clear that authentication error and start over so var result equals and we need the authentication service here so let's bring that in let's go to the top here and say inject i authentication service let's call authentication let's call auth service that way it's name slightly different but we're going to inject this from the interface so we'll say off service dot log in and we're going to pass in that user to log in with which is our model so i say go ahead and log in and pass in that user we hopefully have just populated and then if result is null then we're going to show uh actually let's go do is not null well we'll start with the the assumption that it is working so if it's working then we're going to we're going to redirect back to the main page i think it's probably the best thing to do so inject navigation manager i'll just call it nav manager this is built into blazer both webassembly and server and this is the way to navigate between different pages or different views so we're going to say nav manager dot navigate to and we'll navigate just to the root for now eventually what i want to do is i want to um if this was a full page i would want to navigate to the page that you came from that way if you go to a page where you're not authorized it'll say something like um you're not authorized and then we can either have a timed redirect or we can do is have a button that says click here to log in and it will take you to the login page and then you log in and it comes back to the page you are trying to get to so that might be something we do um but if we have this in the the bar at the top then there's no reason to navigate anywhere but this is a pretty standard for a full page login box all right else so this is the failure so it the result is null so we want to say our authentication error text equals there was an error when trying to log in now we don't have a specific error to show that's just the error we're going to show for now and then i have our show authentication error equals true not build render tree true there we go much better and that's all the code we're gonna need for this page so let's talk about the um the view portion of it so let's start with the very top we have our login and that's fine let's put a space there log in as two words and then we'll have our error message at the very top if show authentication error if show authentication error is true or just show authentication error then we'll do is we'll put a div here with a class of alert alert danger which is that red usually and we'll say um oops and we'll say the role equals alert okay and then in here we'll put our a paragraph that has just our authentication error text so it's gonna pop up a bar at the top that says hey there's a problem and tell you what the problem is okay that's only going to show if the authentication system has an error or throws an error now let's create our edit form so we're going to say edit form i have found it best to close out the edit form and then go back and put the details otherwise it seems to have problems so this is the model the model is being called model and then on valid submit we're going to execute the login so we'll only execute this method if it's a valid submit remember we have on our authentication user model we have that's required with error messages if you fail to put it in properly well if they don't fill something out then it's not going to be valid submit therefore even if they hit the submit button it's not going to try to submit that invalid information and then let's put some styling here from bootstrap class equals card card body and um the background should be light and we'll say mt of five that's just a little bit of styling you don't have to do that but i'm just trying a little bit better than nothing all right uh data annotation validator and let's also put the validation summary okay this is just give us the information about why the the form is not submitting if it doesn't submit then we'll do a div class equals form group and we'll say row to make the whole page hole size in here we'll have a label we'll say for equals email this associates with the email field class equals call md2 medium two column and call form label and we'll just say this is email like so and then from there we'll do is we'll have a div with a class equal to uh call md10 using the rest of the space for our columns we'll have input text id equals email class equals form control and the important part here is the bind value equals model dot email so what's this doing well it's creating a a text field input that binds to our email address of our model that's basically it the rest of this stuff is kind of nice needs in formatting that make it a little nicer to look at and and view and they also want to have let's put our specific validation message and we'll say the validation message four i'm just going to include this here so you know how to do it uh model dot email like so so what this will do is it will put the validation for just the email address below our input box if we have a problem okay so if you don't put information about your email address it's going to yell at you and tell you why now let's do this exact same thing again let's copy this paste it again and this time we're going to say the label is for password and we'll say the name is password the id is password and we also need to make sure that we specify that the the type equals password this is a html thing and what that's going to do is ensure that we see just the dots instead of your actual typed out password but um let's unpin this the form control we're going to bind this to password and the authentication message for password that's it so now that's our completed second entry whoops not password email just password there we go and then from there we need to have an entry for our button so div class equal to row again let's just take up the entire width of the screen and then in here div class equal to call md12 takes up all the columns in that row and let's also say that the tax is on the right and we'll say button type equals submit this is a special type of button that's an html thing class equals btn vtn-success and the text is going to say log in all right so there's our entire form so we have our form that's going to execute the login when you hit submit and it's a valid submit we have our checking for data annotation and we have our validation summary at the top and also validation messages for each entry here we could probably get rid of the validation summary since we have it for each message but let's keep both on so you can see both and we can decide if you want one or the other again this is just to rough it in and see how it works but at the same time i want to teach you how to build these forms out because this is something you're going to be doing in the real world now there's one more thing we have to do and that is the very top here we have to say at page equal oops not equals just a quotes and slash login because we want to call this the login page if you don't give it this page directive then the user can't say slash login and go to the login page instead what happened is we need to use this as a control a different page which we could do all right so let's just run this as it is we don't have the api running right now so we can't log in but um we'll probably get that error message actually so let's see if we can track that down first yep um error message okay so here's the tricky bit so just so you know in blazer server or but sorry blazer web assembly now we do have under properties launch settings we do have this inspect uri line you have to make sure this is here this allows inspection from visual studio to our site so we can put breakpoints in however what happens is the site has to get up and running and then it will connect the debugging environment so certain things cannot be debugged so if we were to want to put a breakpoint in program.cs we can't do that because this code gets executed before the debugger can attach to the process so we have to check out this code right here to see if any problems because let's go to index.razer there is no code here but let's just say um you know there was we put a break point in here but we're probably before this because there's nothing on this page that would throw an error but yeah it's on this page that the error is thrown so it's something in here which really since we didn't change this or this or this it's something in here so let's see what's actually running and think through the processes we aren't running the jwt parser that's already that only executes when we actually get a token therefore there's no reason that causes a problem the authentication service only gets executed when you're going to log in or log out so again i don't think that's the issue the auth state provider is going to check to see if we're logged in or not right from the beginning so i think this is our place to look so let's shrink this down let's actually just unpin it and we can just string it down it's fine so the authentication state provider well we're we've got these three variables up here we're pulling two of those in from dependency injection the third one is just anonymous but i don't think we initialize this anywhere and that could be an issue because it might not no might not be an acceptable solution for this and doing a little bit of research on this yes that's the problem in fact some people asked me about that i thought that we could just return null which would indicate there were you know nothing but we can't we actually have to initialize this so anonymous equals new authentication state inside here a new claims principle new claims principle inside here new claims identity and all of that let's unpin here all of that is just empty so what that's going to do is going to have a new user with no information in there no no claims no roles no information at all in that uh claims principle and therefore the authentication state is gonna be that they're anonymous they have yes they're a user per se they're actually they're using it but um but we have no information about them so let's just start this again and see if that solved their problem at this point you may be wondering man that seems like it's an awful hard way to set up blaze or weapon or laser by assembly and it seems like that's a problem and in some ways yes yes it is that's something that the team is working on having better a better debugging process and system for but in general once you get your system up and running you're not messing with things that are pre uh pre first page okay the the setup stuff once you've tested it in your test environment and get it working you just move over to your actual code and you know test it once and then you should be good to go from then on unless you make changes to it so it's not something that comes up as off as you would think because one now that we're in here we can put break points so we go to the counter page and let's just on the increment counter put a break point and we'll come back to that page and go to counter and click and go right to the break point not a problem so that works just fine it's only the before the the index page essentially loads that's when we can't debug so can't put a breakpoint in program.cs if we did it will um let's start as again it should change this break point to be yep there you go that empty circle the exclamation point this will not be hit okay it's saying yeah i can't talk to that break point so just know that that's an issue all right so our page is now working and if we let's take the breakpoint off here i like completion um now we go to this page and go slash login and there's our login page so our login page we can fill out some information let's just put tim and no password log in it says up here the password is required and down here it says the password's required we take tim off now they all say hey you've got problems here fix them so we can either have it up here or we can have it in line down here we probably want to inline down there so we'll take this off but just know you can do either one of those so let's log in tim and test which is not a valid login and password and we don't even have an api running so it's going to time out even trying to talk to the api so we hit log in here um it should be that it goes right to let's refresh his page it's not seeming to cooperate here for somebody oh clear there we go um so we go to and fill this out hit login it shouldn't do that because the uh the website's not there um so therefore it shouldn't come back here we should be logging it i think the issue here is that we're not throwing exceptionally should be or we're not catching exception like we should be so we'll address that in a little bit that's kind of like a bug filled list but let's get this working right let's get the happy path working and make sure the happy path is going to work then we'll come back and fix the problems on the not happy path so let's go to our solution explorer and at the top on solution we're going to manage our startup project which is our set startup projects and here we're going to choose multiple startup projects we want the apis going to start without debugging normally we start the ui let's just leave that there but we're also going to start the uh without debugging the portal and we'll move that down in priority notice i put the down arrow so now the api is first so the apm will start and then the portal will start and we'll also start the ui library just we have up and make sure that the api is working in case there's an issue where blazer web assembly is not working but we want to make sure the api is working let's start this again this is going to stir up three different things there we go we've got our our login form is working our blazer page is working our api tab is open as well let's just log in first apf make sure it does in fact log in it does and if we go to user management we can look at tim and notice he has three roles admin cashier manager cool so that's working let's move it off of screen our blazer site we can go down now to the the login page and we can try that tim and test again and just see this is just informational purposes it does go right back here so that's that's odd let's put a real um log in and password in want to check out that error it does go back here as well we're not sure if it's trial log is in or not so let's do this let's go to our um our login page our login.razer and let's put a breakpoint in here and say well you know what it's it's going let's just see what happens here and it's yelling me saying that this break point will not be hit ah because we did not start with debugging an app enabled okay not a problem we can change that if we want um let's let's do that let's change that and let's track down this error and see see what the what the error is so we're going to go back to our solution explorer set startup project we'll change the portal to be start not start without debugging and we okay i have had problems with debugging multiple things at the same time so if that's a problem then what you can do is just change the wpf to not depa or not to have the debugging turned on so our wpf project works like before cool let's go to let's move this off there's our api separately let's put our break point in here on the result and in fact let's go to off service auth authentication service right here and let's capture at the result right here so right before we even grab the content we're going to capture this information and we can now go to slash login go to tim i am timcorey.com put my password in this will be the correct information and it goes right here to if result is not null which means it's not even getting to um getting to our site so something's not right here because it's not even getting to the um the authentication service this right here so we put a break point one higher i'm guessing oh wait it did get there aha okay so that's interesting it got there the first time interesting okay so we learned something i'm not sure what exactly we learned yet we learned something so if we go to login and go to our correct information we hit login it goes here first which is our authentication service where it's going to talk to our api we're awaiting this we hit continue and it immediately goes to result is not null navigate to ah-ha i think i know my problem we are not doing a weight here this login method is a an awaitable method okay so we have it's asynchronous it's a task so what we're doing is we're capturing the results of the well we say a wait it captures those results right away and so it sends those back saying okay here's the task and then you just wait until this task is complete but what's happening instead is let's go back to our login page here what's happening instead is since i'm not awaiting those results i am getting the task of type authenticated user model instead of the actual results i'm not awaiting here therefore i am saying hey it's not null because it's something it's a task therefore we're going to navigate to the main page instead of waiting for those results and then getting the the final value so let's stop this we know the problem is we're missing and await here so we need to await these results so look we don't have a task in here instead we have the result now this is where var can burn you because var was like cool no problem i can do that but if i had said authenticated user model let's just do that authenticated user model if i said like this that's not going to work and in fact he's going to yell at me and say you can't do that because i'm trying to convert that to a task so because i use var as a shortcut it's it's helpful the fact that it's shortened my code it makes my code a little more readable the bad thing is it didn't protect me against myself so that's where you know i'm not against var i i like var i use var quite a bit in the right spots but it can burn you and this is one of those places where it burned me there we go let's try this again let's take the break points um let's leave the breakpoints in let's go to here and take the breakpoints out though and we're going to start this all over again and this time hopefully the results should be null for a bad log in and password so let's just do a bad one first so tim test login result is null so we hit continue there's an error when trying to log in boom there's our problem we've got something wrong here there's something that's not correct in our login or password that's what you wanted to work so that's working now let's put in our correct information and let's see i think i actually clicked on that button oh you know what i think it's probably the break point result the result um here we can look at the locals window the result is an actual object username is tim i and tim cory and there's a token therefore we can take the breakpoint off and hit continue and it will go to our home page because it's actually working now but how we know if it's actually getting the login information we went back to the home page cool it's not null cool and we saw we had a token in there cool but how do we know that token is correct and we can read it properly well we can put breakpoints throughout the code or we can do is we can create our our authentication test page let's create a page called verify auth so razer component verify auth this is a page you may or may not want to show to users you may or may not want to keep long term but this will validate for you the information about the user let's start by doing a private override oops sorry protected one way didn't show up protected override on on initialized async so we're going to uh that really messes up that format i'm not sure why they haven't figured this out yet but it's hard trying to synchronize all these different uh codes in one file but this protected override async was doing is it's it's allowing us to to run code at the very beginning of our application right so we're going to do is in here we'll put our our code for checking the authentication state so with that we also need a cascading parameter this is a parameter that's going to be passed into this page but it's a cascading parameter meaning it gets passed in from the system not from us so public task of authentication state and spell it right authentication state off state and we'll put a get and a set so this is a public property it's important that it's public not private because parameters that get information passed in from the outside have to be public so it's a point property called auth state now notice this is a task it's not the the result it's the task because it may not be complete yet so that in here we're going to say var off state equals await our off state so we're going to await the completion of this and of course we have to mark this um async there we go um otherwise even though the your override doesn't say it you have to mark it as async if you want to do async stuff inside of it so now we have our off state we can grab our user information so let's let's get the information on the user we'll say private um user username equals well let's just leave it empty for now and we'll say that private bool is admin user equals false private bool is cashier equals false there was one other user i forget um i forget their name so let's do this let's run it real quick i'm hardcoding for now don't worry we will um bring them in the same way we do the apf application but in here we have oh manager there we go there's the three rolls those are brought in through the api we can get those in the future but again we're roughing this in so i want to make sure that we have something to verify our user's credentials so we'll say there we go private bool is measure equals false so now we're getting the state right here we can do some checks on the user and we can say um if we'll say um auth state dot user dot identity dot is authenticated we'll check this first so which problems i put in here um private bull is authenticated equals false so if they're authenticated then is authenticated equals true and then we'll do some checks on their information so we'll say is admin user equals and we'll start from you know auth state dot user there we go dot is in role and we'll say admin we'll do a couple more times only this one is going to be the cashier and this will be a manager and again these are hardcoded for now but we can change these to be from the api and not hard code in any area all right so is admin user is cashier and is manager now let's do this let's take the username out entirely we could bring that in in a similar fashion i'm gonna do it right in in line up above just to show you a different way of getting information actually no i'm not going to do that i'm going to do it separately so let's keep that in here i'm debating because there's a couple different ways of showing all this information i want to show you all the different ways of doing it but i'll do all in one way on this page and we'll show you other ways of capturing that data on another page maybe a counter page or something like that just to try out the different ways so let's capture this information by saying username equals authstate.user dot find first we're looking for claim claims type or claim type there we go claim claim types dot name dot value now you may be wondering well tim has seemed like it's an awful complicated system because you're doing a find first that that seems bad or wrong in some way because you already know what the user is right this isn't looking up the user what this is doing is on the user we're finding a claim and the claim we're looking for is name you see the user has a whole bunch of claims on their record now for us they're very simple there is the username and then the there is the the roles that are applied that's pretty much all the claims we're putting on this user but you could have a lot of claims on the user about information on their account we could have their email address their first name their last name all these could be claims but in our case we're saying just give us the name that's all we're looking for i want you to search through the claim types find the claim type that is name i want to get the value from that claim type and we'll use that as our username so now up here in our html we can say if is authenticated then we'll say let's do an h4 tag the user is authenticated and let's actually change the user to be the actual name so we'll say username is authenticated and then below that we'll say let's do an unordered list this is our bullet point list and then in here we'll say access to admin role is admin user something like that so we'll have this list of three bullet points below that will be for the admin role the cashier role and the manager role and we'll we'll grab those other two values like so and this should tell us if they're in the specific roles or not which just tells us that we're capturing that role information now we're gonna put an else here and in here we'll say h for the user is not authenticated cool let's run this oops let's stop this i jumped the gun a little bit stop stop stop okay so we can't get to this page we need to have a page directive that's going to be slash verify auth that's the name of our page now we can run this again and this time we'll be able to go to that page um pretty directly so let's oh i think it's closed my laser server page it opened up multiple of these pages because chrome remembers things which can be helpful and can be not helpful so our blazer server page does take a bit to load because it's waiting for everything else to load but now we have our blazer server page here and if we go right to verify auth check that out tim imtimcore.com is authenticated or is authentication that's awesome um i do know english is authenticated and he has access to all three roles he may say well wait tim you didn't log in yet and that no it's not a piece of camera trickery because we're using local storage i am logged in in fact we hit f12 here and we go to our our application over here and then inside here we'll have our storage so you can see local storage right here inside there we'll see auth token and if we expand this a little more you'll see that zoom in there is our auth token and there it is that's that's the token what it looks like cool so let's do this delete it now let's refresh this page the user is not authenticated so i've essentially logged out now if i go to login and i fill out my correct credentials and i hit log in and now i go back to the verify auth now i'm logged in again it's add that token back in so we know that the the login page is working and they verified that the details are correct but then we can go even a step further we can log into wpf because in here we can manage the user and let's take me out of the manager role i'm no longer in the manager role i only have the two roles so if we refresh this it still says i have the manager role and the reason why is because we stored that token and that token still says i'm in the manager role we have not refreshed it yet so if we again go back to our local storage under application we again delete this key and then we go back to the login page we log back in and then we go back to the verify auth page now access to manager role is false so there is that to consider in that it thinks that we have access to manager role we don't now don't get too panicky here because you may think oh no that's horrible sky is falling they can have access to stuff that i've taken away from them no they really can't because this is just for display purposes when you actually do any manager in calls to the api when you provide the credentials it's going to say you don't have access to the manager role right away even if the ui says yeah you do because you've taken away since they've logged in so even though you guys gonna say yeah you have access to the manager role maybe even shows the manager um you know menu options over here or something like that even though they have all of that if they could do anything with that it will say immediately no you don't have access to this so you're not losing anything here or being somehow have a security flaw in your system because you're storing this token between logins of this page so just want to point that out there okay now we've been manually logging out and that's no fun so let's change this over to an automatic or a log out page now i think you're going to like this page right click on pages add razor components log out let's make sure we have we don't forget this time the page directive log out and we don't even need this h3 tag get rid of it in fact we don't need any html at all because let's just inject the two things we need inject the navigation manager and call it nav manager and also inject the eye authentication service call it auth service and then in our code we're going to say protected override on the on initialized async and again it's gonna bork up my formatting that's okay we can fix that and don't forget to add the async take this line out we don't need it we're going to say await off auth service dot log out nav manager dot navigate to and we'll go back to the home page that's the entirety of the log out page all we have is log out and if we if we go here um whoops i hit f12 that goes the interface for it if i hit please shift f2 nope ctrl f12 and i can't find it so shift f12 will find me all the the cases where that is has been created and there's one right in this authenticationservice.cs file so um since i didn't know which one to go to it it couldn't do the control f12 sometimes you use the interface and there's only one type for it it'll go directly to it but in this case it didn't so i hit shift f12 got the list of all of them and that knows i can go right to whatever one i find here so logout says remove the auth token notify the user of logout and set the authorization in the header request no so that's essentially doing most of what i was doing with the delete the token that's what this line right here is but it's also making sure that our headers now for the api calls are also wiped out for authorization so it's a better process than just deleting a token all right so now um let's let's do this let's go to our nav menu i'm getting tired of typing these things in so what i'm going to do is i'm going to copy the counter since it's simple i'm going to paste in two more and i'm not going to worry about the um the icons for now let's just say log in and we'll have the log out and let's do one more and this one's going to be the verify authentication all right so those are the three links and they're going to go to not counter this is verify auth this is log out and this is login that makes my life a little easier when it comes to writing this application now again we're roughing this in because we would want to have not the login and log out show the same time we'd want whichever one is um applicable okay so if we're already logged in which we are then we only want log out let's click log out it went back to the home page let's verify off again not authenticated let's go log in let's put the password in log in go to verify auth i am logged in now cool so there's our login in our logout page plus our verify off page for verifying authentication i need to change this that's just jim corey is authentication yes i am authentication um no no i'm not um but let's go change that now because it's gonna bother me otherwise authenticated cool now i did say there's other ways of of getting around this type of stuff so let's play around with the pages that we're not going to keep long term but we can use as a test bed for now so let's go to counter and in here is just a standard counter page right well let's put at the very top here maybe right below the counter we'll put the user is authorized or not and put their name okay we could do it like we did with the verify off page but there's another way of doing this we could say authorize view like so and in here we have authorized and we also have another entry for not authorized we can put different code in here so not authorized we could just say let's do an h on h4 tag and say the user is not authorized now i'm still showing a page because we're just showing um information about it okay but this is just a test but this is what you put here instead of putting maybe all your page content in here as a possibility so the user um now let's put in parentheses the username so we'll say context dot user dot find first looks familiar claim types dot name dot value is authorized okay let's um let's fix this here so let's get rid of that and let's go to our import statement and let's add this to the end using claims that way we don't have to keep saying that long name we can just use the the shortened version which also means that the verify off page um we're doing this we can get rid of that as well makes a little shorter a little easier to read so the user input in parentheses what their name is which is their email address is authorized or they're not okay so let's run this again and we're already logged in so it should be we don't have to log in again but we'll we'll do both so let's go to the counter right away the user tim i am 10 corey is authorized cool let's log out go to counter the user is not authorized so it knows right away whether or not we are um authorized based upon that tag cool but there's more we can do here for example what if we didn't just want them to be authorized they had to be authorized and a member of a certain group well we can do that as well so we can say roles equals oops unauthorized view there we go roles equals let's say let's start with admin i am admin role so we'll start this again so it's not just about the fact i'm logged in now it's about the fact that i'm logged in and a part of the admin role so counter user's not authorized well but they haven't logged in yet let's log in i go to counter the user is authorized because i'm part of that admin role cool let's leave me logged in the only thing will change is we close this down we're going to change this from admin to manager which i'm not a manager so let's run this again and this time it should say that i'm not authorized let's check so counter the user is not authorized but yet if you go to verify authentication i'm authenticated i'm just not authorized at the manager role so that's why i'm not authorized it has nothing to be being logged in it has everything to do with me being logged in with the proper credentials so that's how you can verify that a user's logged in and or has specific credentials on a page but wait there's more let's go to our fetch data page we've already kind of made some changes here i don't want to step on toes there let's go with fetch data fetch data works it's just gathering um sample data for our weather forecast page okay this is all generically created data or i'm sorry even easier it's from our weather.json file so um let's do this let's say that they cannot get to this page if they're not in a certain role so i'm going to say at attribute and the attribute will be the authorize attribute and we could leave it here and if you leave it here it's going to say you can't get this page if you're not logged in so if you're logged in cool you can go to the page not a problem we're going to take a step further and say the roles equals admin so only if they're in the admin role can they get to this page which we know that i am in the admin role let's just log in we haven't logged me out so i'm still logged in i still have my admin and cashier roles but not my manager role so if we go to fetch data not a problem fetch data load is no problem because i am in fact an admin but let's close this down and change this to manager which i am not a manager let's go back let's run again i'm not going to log out i'm going to stay logged in just as i am and let's go to the the fetch data page again not authorized now that's a pretty hideous error page right you may say well where'd that even come from well if you remember back in the last lesson we had the um the navigation on our app.razer and well in here by default we are just giving information for the authorizing view and the regular view but you can also get information for the not authorized view and put in a an actual control or a whole page of data in here for what happens when you're not authorized otherwise you get the two word not authorized and that's it so with that we've implemented our login page our log out page we've implemented our verify off page and we've seen the different ways we can authorize or not authorize a user based upon their cr their ability to log into our system at all and also if they're in the correct roles that we're approving for certain pages or certain areas there's a lot we can do with this and we're going to because we're going to have pages that only show up in the navigation menu based upon if they're logged in or not and we're going to have different areas that show up or not show up based upon who you are if you're logged in or not if you have the right roles or not and then also what you can do inside those pages now like i've shown this is just user interface work even though we're storing the credentials between logins which is very convenient even though we're doing that it is not granting them permissions they should not have if we change them at the server when we change the server they change right away and you will not get access to the server side resources you may have some additional ui stuff for a while until you log out and log back in or until you get your token refreshed but that's about it so it's not the end of the world they're not going to see something that is sensitive because they are um you know taken out of a group but they still have their token so it shouldn't be a concern on that end if it really is a concern we can do is shorten your token time frames to a much shorter window and then have the refresh token work for longer so that's a possibility we could look into in the future but for right now this is just fine okay so that's the login page the log out page the the verify auth and all the details around authentication now you've kind of got it roughed in what we're going to do in the upcoming videos is really make this layout better we're going to kind of fix some of the problems or the the shortcuts we took in setting up this authentication system because it works now and since it works now is a great time to make it better and it will make it it'll refactor it to be the way you want and be able to be deployed instead of having those hard-coded api urls and all the rest okay so that's coming up but i think we'll leave it there for today i will commit this to source control don't forget if you're a patreon member at the five dollar per month level or higher um go over and get the the source code for today's video so you can have that to compare against what your application is doing alright thanks for watching as always i am tim cory

Channel: IAmTimCorey

Views: 15,229

Rating: 5 out of 5

Keywords: .net, C#, Visual Studio, code, programming, tutorial, course, training, how to, tim corey, C# course, C# training, C# tutorial, C# app start to finish, timco, timco retail manager, wpf, asp.net, .net core, dependency injection, blazor webassembly, blazor webassembly .net 5, blazor webassembly authentication, blazor webassembly authentication and authorization, blazor webassembly jwt authentication, asp.net core

Id: usl2zJLzCJk

Length: 65min 13sec (3913 seconds)

Published: Mon Mar 15 2021