Blazor Tutorial : Authentication | Custom AuthenticationStateProvider - EP12

hey guys today I'm gonna talk about custom authentication state provider in my last episode I talked about the authentication which comes out of the box for pleaser application but it had some disadvantages like you have to go with ghost code first approach there is no API design and then you have to use all the razor pages it's difficult to migrate your user into database tables which are provided when you add authentication support and then we discussed how we can follow these steps to create your own custom authentication state provider and then you know manage the state of your user across the application across all the blazer page application and we do not have to rely on razor pages for this alright so for that I have given myself a head start here and I've created this login component it's very simple component where I'm taking email address of the user and then password when I click on it it should go to no it's not doing it but it should go to the index page and show show welcome email address of the user who has logged in so yeah let's look at the code I have added this login razor here login page it's very simple I'm taking email address and password I have bound this user model here which has just has two fields it just has two fields email address and password and then I'm calling validate user when when I click on login I'm now going to validate my user using my API I'm going to concentrate on how we can have custom state provider custom authentication state provider and application today and then maybe in future videos I'll talk about that alright so a very first step that we have to follow is we'll have to enable authentication and authorization to our user application to do that I'm gonna go to my startup page and here I'm gonna say use authentication and say use authorization nice now that and this is all you have to do to enable authentication or authorization to your blazer app now we'll have to add our custom authentication state provider which will give a state of our home state offer authenticated user so I'm going to call it custom authentication authentication state provider custom authentication state program provider thanks and to make this class as authentication state provider I'm going to inherit authentication state provider here nice let's bring in some namespaces and this is going to draw an error because we'll have to all right a function will have to implement this get authentication state aceing see this is a very important question because this gets called when you load the application for the first time and this provides this provides the state of the authentication either from the sequel server or local storage or dependence injection however you want you are maintaining our you however your managing state of your user in your application so this is not this you know it's not implemented right now if this will throw an exception so what I'm going to do here I'm going to send I'm going to return a hard-coded user here his name is John Smith and she no come let's bring in some namespaces here so what's gonna happen the reason why I added this code I wanted to return authentication state of a hard-coded user because I do not have an user right now when I load my application all right so the next thing that we have to do now we have our authentication state border we'll have to add this auto nation state provider in our starter picture you have to we have to initialize this provider when services are up so I'm gonna say add a scoped instance a scoped instance instance of our authentication state provider say North injection state border and we'll use our custom authentication for the implementation all right nice now that we now we added authentication support now we have our own custom authentication state project we will have to tell our application route that now we are expecting this as parameter we expecting authentication state as cascading parameter which could be passed across application and we could use it to to do that I'm going to go to my app dot razor here and I'm gonna say authorized out to you so if you say authorized out you this component takes state provider or in the Asian state as cascading parameter and if we need that parameter across our application we could use it and you can say that we need cascading authentication state these are the two components which take authentication state as ask a scaling parameter so we can have access and both of our layout nice so once we do that we can go to our index page because that's the page which gets loaded and here we'll have to show welcome message to the person who has logged and into the system so right now when the application Lord John Smith will be authenticated by default so we wanna show his name you want to show his name here so now that I have I'm passing cascading parameter and passing authentication state as cascading parameters I can use authorized view authorized and not authorized components in my UI which is the last step register which is the last step here so if I if I want to show the message what I'm gonna do I'm gonna say welcome this is when it will this paragraph it will be shown when the user is authorized I'm gonna say context or user identity new so basically I'm trying to show John Smith at gmail.com which will be populated here thanks but if the user is not validated if the user is not on dated I'm gonna say you are signed signed off nice they even get this signed off message let's let's run with and see how this looks so when I go to my index page here you can see that chance met at gmail.com it's coming by default and if I go to my custom state provider and here I tell my stay provider to not return or to not return to not return the identity just write on an empty claims identity then it should show the user is not the user is not validated users not authenticated let's see how this runs so when I go to my index page you can see that it says use you are signed out right now all right but this is not how normal applications work great you normally go to your login page you enter email address and password and when you click on and then it goes to then it goes to the index page and then it shows the person who has logged in right so how do we achieve that let's let's look at our login page you'll see the login page we will have to inject our state provider here and we'll have to tell us they provided it needs to it needs to change at state when user is validated when the user is valid you need to change to your state and say that you are authenticated so how do we do that for that I'm going to create create a function I'm going to call it mark user as authenticated and this will take spring as a parameter and I'm gonna see that this is the user which will get which will get returned or so what I'm planning to do is I'm planning to call this function when user clicks on login button so and I'm gonna pass the email address of the person who is valid and this is what will get returned when this is really well it will get returned when user is authenticated but what we need to do is the authentication state will have to send it to notify we have to send it to not notify authentication has authentication changed event so if we send it to this this will tell this will tell our authentication state provider that you know you have this has been changed this has been changed that a state of the application has changed you need to tell your whole application that our user is authenticated now and I'm gonna get rid of this and come into this so that we have identity and in some John Smith I'm gonna pass here the email address of the person yes and like I said this is the function which will tell application that user is authenticated now and this should be called when we click on that validate button when we click on the login button here so to call this function I'm gonna do I'm gonna say I'm gonna inject authentication state provider alternate you know straight boiler and now this is very important line here and I am going to convert my authentication state provider to custom authentication state provider and then I'm gonna call that mark I'm gonna call that mark user is authenticated and then pass user email address so what's happening here now I'm calling mark users authenticated when user clicks on login and then I'm passing the email address of the person which will be returned as authenticated user to whole application all right another thing that we need to do we'll have to we'll have to navigate to our index page so we'll have to bring our old friend navigation manager here navigation manager and navigation manager and I'm gonna say in navigation manager now we get to our home page navigate to our home page cool let's so let's run this and see how this works so when I load the application for the first time you can see that it's signed out because it goes to get authentication state facing and then it's not returning any authenticated user now I'm going to go to login screen and here I'm gonna say it John Smith at gmail.com G welcome and enter any password and I click on login it goes to my page here and says John Smith has been locked in if I go to another component come back it's still there if I log in by the locate and chino welcome and i click on login' it shows been decades has been logged in but there is a huge problem here if i refresh my page it says user has signed up the reason why it says user you're signed out is because now it's calling this get authentication state acing when we clicked on login it said ok the user is locked and this is though this is the user not notify our state authentication state that the state has been changed but when we refresh our page this is what gets called and that's it's returning the user is not authenticated so what we need we need a we need to maintain state of the user cross an application and there are different methods that you can do it but today I'm going to follow I'm going to maintain store my state in session storage and there is a package that we can there's a package that we can installed it's called as blizzard you all should it's very cool package you can store your state in local storage which will keep the state even if you close the browser even if you go to a different tab you have session storage which will keep keep the state even if you refresh the page but if you go to a different tab or if you close your browser you will lose the session and I believe session storage is the best way to go if you don't like it you can go with local storage but if you're making a line of business application session store is the best way to go because if you are making a banking application if you want to go to a different tab you don't want to have the same state so today I'm gonna use session storage because I want my user to login every time they open their the looter application when they load unless they want to save and save it and the cookies or something but today I'm gonna use session storage so let's click on it and see what at all what are the steps that we have to follow our first thing we'll have to install the session storage so I'm going to go and look in my in my packages here I'm gonna go to manage new bit packages and say we would like please hood and here I'm gonna use the session storage this package and I'm going to install cool the next thing that I will have to do is I will have to add the blizzard support the session storage for my application so I'm gonna go to my side page here and after singleton after my single thing here I'm gonna add it here we'll have to bring in some namespaces do that nice oh one more thing to notice about the session storage is because this if you want to use it you will have to go to your host and don't see HTML and tell your render mode a server would because you know this session storage they make JavaScript calls and you cannot you cannot make JavaScript calls unless and until your page is fully rendered so make sure you change in your underscore whole host CSS HTML to tell the user to tell the application to render the full application before it you know it gets passed to the browser all right we can talk more about it and some other episode but right now I'm just gonna add this session storage and change or change the rendering to server all right so now we have this blazer session so let's use it I'm gonna go to my login page here and you know so here that we need to inject we can copy it from here I'm gonna copy this lame tube inject to inject in our in a login page and here I'm going to add a key which will be the email address of the user so that even if i refresh the page it will be stored in this session storage and it won't it won't pick up an unauthenticated user from get get authentication state so we'll have to set the user in login page and get the user from our get authentication state acing so on login page what I'm gonna do here I'm gonna say that I would like to set an item and here I'm gonna say email address of the authenticated user which is user to our email address and this is an async function so let's put a weight keyword here yes now if you want to use the session storage the injected session storage in our authentication state provided what I'm going to do I'm gonna write a constructor here let's see constructor which takes I section session storage servers so word service and I will have to pull in some namespaces here nice and then I'm gonna have a private variable of the same type the same time which will be assigned to and OH service gets injected so I'm gonna say underscore session storage service should be assigned to session sort of service nice so now we have access to the session storage in our boat in our login page and in our provider here in our authentication state provider so this is where I'm going to change the code I'm going to tell when the foe when the application is afresh if the user has value in the session storage that time you should return the user if it doesn't have the value that time you should return the author user is not authenticated all right so first let's get the user let's get the value in when saver in the address as equal to UM underscore session storage service and I'm gonna get item anything here and this is a string Oh so I'm gonna get a string here and say email email actress so we want even address from our session storage service they will have to add an await keyword here and we'll have to tell our function as it's easing function it's an async function nice so now we have that of activity returned now we have the email address of the person which we are storing which we are storing in our login page and now we'll have to pull this email address when when we refresh the page so that we doesn't lose the state of the user so I'm gonna tell I'm gonna say here if email address is not know and then call this piece of code where we are assigning we are assigning the identity and identity or else you can assign an empty identity that means the user is not authenticated in the storage here no storage will have to initialize this identity so let's so let's do that initialize and get rid of the survivor so that it doesn't have multiple multiple media puts you alright so what what are we trying to do here now we're pulling a user from our session storage if the user is there than we are telling that even if the page is refreshed tell the application that user is the application is authenticated and that we are setting that in our mark user authenticated in our login page here all right let's run this and see how this works so right now it's oh you're signed up and I click on login' you're gonna see John Smith at gmail.com and chinko my go to click on login it navigates and it says John Smith at gmail.com let's try refreshing the page when i refresh the page it still has John Smith in my application you can do multiple times and if you go to a different tab if you go to a different tab then it's going to tell you that you are signed out and that's the best that's the most secure way to move about it all right so now we managed to go to our login page and you know enter in nitrous and password and now and then we're sewing showing John Smith at similar come now what I want to do I want to you know make this login click as log out click when the user is authenticated and when they click on log out I want to clear out the session storage and tell my application that the user is not authenticated so how do we do that to do that I'm gonna go to my main layout menu out in here I'm gonna say that I'm gonna use authorize view here and if the user is authorized and if the user is not authorized if the user is not authorized and we would like to see login to link and if the user is not authorized if the user is authorized and we would like to see logout button here logout button here nice so what I want to do though I want to call my logout clicks oh right just like how we call this mark as authenticated function I would like to call mark user as locked out so the tota I am going to say public public void mark user has logged out logged out and this will this will do the same thing except it will tell the user is not authenticated except initializing any identity you know tell that there is nothing that is we are emptying emptying out although identity here nice we will have to do one more thing here though we will have to just like we are you know checking and log and click here and not in click we are adding a item here and telling the you know email address is added and the user users authenticate will have to empty out our session store so let's go ahead and do that I'm gonna say before we even before we even initialize our identity I'm gonna say remove item missing and I would like to know email address nice alright so let's go to our main layout now as this is a component to we can inject our inject our authorization state provider of authentication state for all the divisions deployed and then we can have cold Oh like public void required log out and when you click on logout I would like to call this function which will call which are called mark mark user as worked out so that user gets kicked out of the system so I'm gonna call it mark user has logged out and when user click on this log out I wanna see on click I want to call a function want to call a function which is going to call log out log out sweet awesome let's run this and see how this works so user is signed out right now I'm gonna go to login button here I'm gonna see it John ing a lot calm and password anything doesn't matter click on login you can see John Smith is logged in even if i refresh the page John Smith stays there if and if I go to a different component John Smith stays dead and win and you can see now join logout that when I click on logout it goes to the login page and if I go to index which you are signed out so this is how you can use custom state provider custom state provider authentication state provider to call your own validation code and use automation state provider across your application using session storage you can you can use any method to do state management so yeah hope you liked the video and if you have any questions you can reach out to me on Twitter or Facebook and yeah don't forget to subscribe the channel thanks for watching bye

Channel: CuriousDrive: Solve Coding Challenges & Win Prizes

Views: 60,894

Keywords: .net, vsual studio, programming, c#, blazor, visual studio code, .net core, msbuild, web, ui, asp.net, developer, code, librararies, .netstandard, javascript interop, windows, linux, macOS, open source, free, app, interative, ecosystem, HTML, CSS, performance, reliability, security, classes, assemblies, razor, components, MVC, server side, server, dotnetconf

Id: BmAnSNfFGsc

Length: 29min 46sec (1786 seconds)

Published: Fri Dec 13 2019