How to implement authentication in Blazor Server from scratch

hey there and welcome back to the code wrinkles channel for a brand new video which i hope it will be a very very interesting one since we will talk or we will show how to add authentication to a blazer server app from scratch and what i mean by that is that will actually will not rely on the scaffolded microsoft identity part that you usually get with the template if you check the checkbox that you want to use individual user account we will want to use individual user accounts and we will still rely on microsoft asp.net core identity but we will not scale anything from the microsoft asp.net core identity ui and there are a few very important reasons why i think that this should be very very important first of all when you scaffold identity the problem is that it adds a lot of stuff for you but it also hides a lot of stuff from you so when you see that things are actually working but soon enough when you want to actually customize something about how the authentication works and what you actually need to perform while authenticating things which in most of the real application happens you cannot just use an out of the box solution for that because you need to add your custom logic to that so in those cases already we have a problem because hey where do we want to actually add our custom logic then of course probably after a few reviews of stack overflow or whatever other sites you might be using will say okay you can scaffold and actually add all the cs htmls to your project but that will result in a very ugly structure in the end that would add a lot of view imports and a lot of different layout and then maybe something will be split in a layout that is not added and something that is added by default for the blazer server application so everything gets actually very very crowded and also you will then find that probably microsoft used a certain way to actually implement that authentication but you might want to actually do this a little bit differently maybe by adding your own custom claims or i don't know doing things like different and then it will be a headache and then further more than this you will see that okay if at a certain point try to okay implement your own authentication you will find out that okay it seems that you have done everything that you have seen in scaffolding project but it's still not working because the ui of microsoft sporting core identity also adds a lot of custom middleware to that that you don't see and that actually affect the way that that authentication works so in the end if you use the scaffolded version of of authentication when it comes to blazer server applications you will end up having something that at least at an initial point works but that you actually don't understand how it's working and from my point of view and i guess you already got that if you looked or viewed other videos on this channel is that i'm all into this idea of understanding how a system works because if you understand how a system works then 99 of the things that you would need to do you will implement very very fast and even if there are problems you will find the box very fast and it will actually be an overall advantage so therefore what we'll do here in this video even if it may become a little bit longer we will implement from we will implement authentication in a blazer server application from scratch and we have here already started with this blazer server template but it's exactly the blazer server template out of the box without authentication and of course the only thing that i have done is in the app settings to json file i have already added a connection string that we will actually use throughout this entire video and probably also throughout some of the next videos that will follow directly afterwards so let's first of all do a very very small or short summary about what we will achieve today so first of all in order to implement authentication we will need to add some nuget packages of course we will need the nuget packages for microsoft asp.org sorry microsoft entity framework core and we'll need the packages for microsoft asp.net core identity because all the identity stuff and services that we might simply use to authenticate user to check if user is authenticated to check if the user's timestamp is correct and other things like that are already created there are already there so we can simply use them and that makes a total lot of sense because that's not something that you actually would want to add your custom logic to so that's what we will need to do we'll then of course have to set up uh the db context that we'll need for for this purpose and of course including what we will need for the identity part and after we have set this up like the db context and what we need for asp.net core identity we'll actually need to implement authentication in our blazer server application and when it comes to this i would also like to refer you to the videos that we or to a one video that we have previously published here which is how to actually use the http context in a blazer server application the right way and believe me if you haven't looked at video please take a moment pause this one and go to that video you can find the description right here under this one or somewhere on the screen right now on a card because in that one we explain exactly how the blazer server startup actually works and how the entire programming and hosting model for a blazer server application works and we'll understand exactly why we need to make certain decisions when it comes to implementing identity or authentication in blazer server application but i guess it's enough with the talking so let's get started with this one so first things that we need to do is let's install some new get packages here so i'll open up this nuget uh package uh oh sorry i guess i clicked here on something wrong it's managed to get packages that's actually what we want here and we want to go to browse and let me go to new get to make sure that we only get the packages that we actually need here in this case and there are a few packages i guess there there are a total of five we'll need so first of all let's install microsoft entity framework core because that's something that we will need the entire microsoft asp.net core identity systems relies on the fact that it actually needs to talk to a database to persist users to persist roles and claims and other type of things so that's why we of course need this microsoft entity framework core and we'll also use a sql server so let's install also microsoft entity framework or sql server and last but not least as at some point we might add some migrations or updating the database we'll also need to install microsoft entity framework core tools now while this installation actually gets going i just want to say that the database that i that i will use right now has already all the tables that we actually need in it so we won't actually perform right now a migration and updating the database but that's some common ef core stuff that that's fairly straightforward and if you're not familiar with that we have an entire microsoft entity framework core playlist here and you can get started with that very very very very easily so now that we have all the microsoft entity framework core packages that we need we will need to jump over to use microsoft asp.net core identity and here this package it's not version according to the net course so the latest stable version is this one so we just can install that and things should actually just work with that without any big big problem or without any problem at all for that matter but then of course the microsoft identity system will need to also talk to entity framework core so that's why we also need to install this other package which is microsoft asp.net core identity entity framework core and that one is version according to the current.net and ef core version so we have to install the latest uh stable version 4.6 because this application runs on dotnet 6 so let's just install that and we should be good to go and i guess if we take a look into the packages that we already have installed uh let's just maybe remove everything from here and do a refresh and we see that we have one two three four five packages and i guess that should be all right so we shouldn't really need anything more than that now we also have here this data folder that comes by default with the blazer server template so in this data folder we'll add here simply a class and we'll call this class um it will be called data context and as the name implies this will actually be our db context and here is a very very first important step when you want to implement authentication with microsoft asp.net core identity and this is generally not only invasive server but right now here specifically in a blazer server application your data context should actually inherit the identity db context which is part of the microsoft sp.net core identity entity framework core package so we might be just able to actually add a reference and everything should work should work okay now of course we don't have any db sets that we want to add right now from our project here because we don't really want to persist for now at least anything in our database only the identity part will persist things in the database but we still need here a constructor because we will add this actually to the dependency injection container of course because we will really need that so in this case we'll have here db context options and for that we'll need to add using to microsoft entity framework core and we'll just have to pass in these options to the base class because of course the entity the identity db context will need these options to know exactly which database it should actually talk to and that's fairly it for this db context part so here one key point to actually take into consideration is when you want to work with identity in a blizzard server application and generally in an asp.net core application and you want to persist those things of course in the same database that you might be using for your your application itself then you can create your db context like like you do usually but make sure that it inherits from identitydb context because that would add all the db sets that microsoft asp.net core identity needs in order to function correctly so that's actually very of a very very important part and and kitting here and that's why i wanted to do it while we actually uh record this video and as said with the b context i guess for now we should be ready so the next thing is or the next part that we could take a look into is what we actually need to register and read we need to register a bunch of different services here and of course some middleware and we'll take we'll start with the services first and uh yeah we look into what we actually need so first of all of course we need the database so that's why maybe after this ad i'm thinking right now i guess that after this ed server side blazer and before adding this weather forecast service we'll add our custom stuff that we need right now so first of all we'll need the connection string so we will have here this bar uh a builder dot of course i have to also type it correctly uh configuration dot get connection string and i have the property that is called here default and that should get us the connection string now adding entity framework or is actually a very very easy and straightforward because we add entity framework in this case right now as we usually do in all asp.net core application so i will have here builder dot services dot add entity and the e framework sorry it's adb context sorry for that and db context i'm thinking about a lot of stuff at the same time while white while speaking and then well sometimes things get or go wrong so our db context is the data context and the one thing that we need to provide is the db context options and here we need to say use sql server and we have to provide the connection string that we get from the configuration and then we should be good to go with this one so once again adding entity framework core here right now is very simple and straightforward but here already i want to emphasize one important thing and although for this we'll make a dedicated video in which we'll we get in the details about how this actually works uh and i would also like to maybe refer you to another video that's actually very popular here on this quad wrinkles channel which is called how to use ef core in blazer server the right way and that's very important because if you want to use entity framework core in your components then there is another way that we should do that using the idp context factory or add db context factory but right now and we'll see just in a few minutes probably why we do this the regular way right now is that we will need for now to use this db context in some razer views actually or razer pages where we will actually perform the authentication of the user or logout of users and as we will do this in in razer pages they are request based so like a regular asp.net core application you can only create or inject something in a razer page only when a request for that page is actually there so in that case we can use regular scope services because not add db context by default by default adds our db context as a scope service so in that case we can use without any problems scoped instances of rdb context because there will be scope only to that specific request that wants to actually load or do something on our on a razer page so that's why we add this actually normally here and it will work it shouldn't be any problem in fact that's even the way that you should do that and if you want to use entity framework core also in your components i said we will have a dedicated video only to that to see exactly how we can reconcile the fact that we need also some scoped instances of the db context but we will also need the db context factory okay cool so we are done with that and then i guess the next thing that we will need to do is actually configure our identity so we'll say here builder dot services and as part of microsoft asp.net core identity uh we have this add identity method uh and in this identity method first of all this is a generic one and we have to provide two things here so first of all we will have to provide which will be the user that we will have as an identity user and we will use the default user that we have in microsoft asp.net core identity and this one is the id the identity user class uh identity user class of course we have to also spell it correctly okay let's add using statement for that and then we'll also need to provide the role class that will be actually used if we want to work with roles and therefore we will specify once again the default that we have in microsoft asp.net core identity and which will be this identity role however now what i will do here is i will also add some options and here in these options and what i'll do here i actually already have written this or we i have prepared that and for this video there will be probably some copy pasting here because it really doesn't make sense to really uh stay here until i type all the components that we need to create and raise our pages and things like that but for now what we do here is actually we just say uh or we define the options that we want to use mostly for the password requirements because by default password requirements are i don't know uh fairly secure i would say of course but for our demo purpose they are really not that important and i really want to be able to just set up almost any type of password so that's why we actually set almost everything here to false and then another very important setting that that we want to do here because it's usually by default put on true is that we don't want to require a confirmation email after we register for the first time in that application we just want to actually be able to log the user in and then that would be it so that's actually why we need these options here of course in your applications or if you tried this on your own or in your site project you can customize the password policies and everything that can be customized here according to the requirements of your exact project however there is one other very important thing that we need to do and this is maybe one part that a lot of people skip and get wrong is that okay we say that we want to add identity services and that actually adds a lot of services now to our di container that we can use to authenticate users to check their credentials and very very similar things but of course in order to do that we also need to communicate with the database and microsoft asp.net core identity comes with what are called stores so we want to also say that we want to add entity framework stores and here in this method we need to actually specify which is our db context and our db context is the data context that we have configured also previously and that should be it so from the services that we need to add for the authentication in a blazer server application that would actually cover that now there is one only other thing that we might need to add here and that's something that probably if you use scaffolding you might not see and if you try to implement on your own you will say that everything breaks or that it at least doesn't work as expected when you sign in users is of course we need to add also middleware for authentication and authorization so we'll have here just after app use routing will have app use authentication and it's very important here that we first have this app use authentication and then app.use authorization so it's the order here so generally in when we when it comes to registering middleware the order is very very important and here when we think about authentication and authorization once again the the order is of utmost importance because first of all you have to authenticate user in order to be able to determine uh in any way what actually is that user allowed to do in an application and what not and that's why we need to make sure that we have or that we add everything here in this exact same order and right now everything should be set up from this point of view so in the program.cs we shouldn't need to make any changes anymore now of course now comes the very very fun part and as i have explained already let me just grab something to drink real quick okay so as i have explained already one of the issues that we have in blazer server applications is that once a blizzard server application starts after that initial request all the blazer stuff actually happens in memory of the server so when we think about authentication authentication is always actually in asp.net core related in one way or the other with the http context because when you sign in a user then you have on the http context that user property which is a claims principle that is actually set to be a claims principle that is authenticated and of course when you on subsequent requests you can then take a look into that property and check if that user is authenticated or not now in the end what everything boils down to is actually an authentication cookie that is set in the browser by doing this type of processes but from our code perspective everything is actually related as said to the http context and once again we can talk about having an http context only in the framework of a regular asp.net core request pipeline where we have a request and we have to create a response only in that case we will have an http context now blazer server applications they live in server memory so it means that actually everything happens in memory and all the changes that needs to be actually done in the html are transferred to the browser via a websocket connection so in that case in a blazer application itself we don't have this idea of http context and therefore we cannot simply go here and say okay let me add here a login component because it wouldn't work it doesn't really or you don't have a way to interact with the http context there to set an authenticated user to that and in the end that that setting would actually result in a cookie being actually sent and persisted in the browser uh session storage or local storage depending on how you might want to configure that so that's not possible in blazer so that would mean that for handling authentication in blazer server app we would still have to rely on something that's actually part of the asp.net core request pipeline and therefore we would have two options would have the first option to go to controllers and have an identity controller maybe and some views for logging for registering for logout and other similar stuff or we can actually go for the easier route which would be razer pages and since this scenario of performing authentication is actually not very complicated and it actually doesn't require to have all the entire stuff with controllers and views and all the things that are related to that and and how things work there that's a little bit an overkill for a task that we want to achieve right now so that's why in most of the cases that i've seen and in virtually all cases of blazer application that i have worked on also on production uh or on real production applications we have used razer pages that's also how the default scaffolded template with with uh individual user authentication works and that's also once again the easier way actually to proceed so therefore what we'll do now is we'll go to the steps of creating all the entire stuff that we actually need for those razor pages to actually handle uh user authentication so we want to register user we want to authenticate user and of course we want to actually use that information when the blazer uploads for instance to understand if a certain user is authenticated or if the user is not authenticated in this video we'll try to just implement the basics and in further videos we'll go into a lit well into a deeper dive into how how really authorization views or component works and how do we get the authentication state the right way because here there's also one point when where most of the false as i have seen do this uh the wrong way that could result in some uh some very very heavy issues so we will also look into that in other videos so right now we will just concentrate about how to actually get that a basic setup of authentication in a blazer server application using razer pages and for that to actually make everything work fairly straightforward we will actually create here a folder a new folder that will call areas because we want to actually make this authentication part uh be a dedicated area to itself so it could have potentially even a dedicated layout that you might want to use and everything that's actually related to that we put here in this in this concept of of areas and uh well our area that we were focusing right now is regarding identity so we can call this identity but whatever you can call this uh subfolder whatever you want the only thing is that you would need to be careful when you specify redirect to use exactly the name that you give to this folder because that's actually how routing in eraser pages works and routing with areas in razer pages works you have to actually uh give or indicate this folder here we call this identity so all our urls that we'll create or redirect to for login would be identity something else okay and in the in this identity also that comes by default by all the conventions using areas in razer pages we will have actually or we will need a folder that is called pages now in this folder that is uh called pages we might have different type of of stuff uh so first of all we would have probably another folder um that will be called account and here we'll put uh our razer pages for login and logout um and register but then there are a few other things that we might actually need to have in this pages folder and let's start first of all by having here a view start file so let's add here a new where is it let's call it razer component but i will call this a razer view empty and usually the convention is once again that's all about how the razer view rendering engine actually works and and conventions that are there and i'm really not an expert on that but that's actually how things should actually work now in this uh what we want to do is we will actually want to specify uh in the view start layout actually that we want to use so i will just copy over something that i have already prepared in this case um of course we right now don't have this identity layout but we will create it just now so uh let's also create here add new let's click on razer component and here once again on razer view empty and we will call this uh simply identity layout so that would be the layout for our identity part uh okay here we can just also remove that and i will once again bring over some very very basic layout here that that will have with this render body now the only thing that we will have to change here is that our namespace right now is like that because it's blazer out youtube so that should actually work pretty fine right now so that would be our layout now the other thing that we would need here in the in um in in the pages would be actually this view imports so let's also right click add user component will once again go here on razer view empty and this one should be then called uh underscore view import dot cs html of course so that would be our page here i will also add something that i have already prepared um now okay this is uh we should add this youtube at the end of all blazer out thing uh also here microsoft asp.net core identity is okay um blazer out youtube then this is okay d we need actually this to not uh to really not have no need to actually specify in each razer page exactly what we want to import we have everything important here in this view imports and it actually should work just fine with that and i guessed it right now with these three files so once again uh we have a layout for our area we have in the view imports and we have then the view start and we should actually be good to go with this very basic setup that the the razer renderer actually needs in order to work correctly so what we can do right now is on the other hand is come back here to this account folder and let's add here uh once again we'll click on razer component but in this case we'll show we will choose here this razer page and here in razer page we'll have one that is for login so we'll have the logincs html uh then we'll have another one so let's add them directly everything that we need so once again razer component in this case we'll have a razer page empty now we'll have a register because of course we will need to to be able to also register a user so we have done just that and then we'll also have a new one and that would be the last one and it would be for logout and we'll call this once again razer page empty and we'll call this uh logout.cshtml so that would work now of course we'll go into these uh pages and work into with them one by one now one thing that i would like to do first here of course as we have those uh view imports now we actually shouldn't shouldn't need uh all these fully qualified stuff although right now i see that it actually it they complain here and say that we actually should use that okay no problem we will use that uh there is no real problem with that uh okay now what we will do here is i will uh let's start with the register one uh and sorry not this one but but the view itself and once again i have already prepared here some uh some razor syntax things uh that will that we will actually simply reuse here so first of all we have that and of course right now we actually we have some errors because we will have to also create uh the con the the code behind for that but we look into that just in a few seconds and here for registering we will actually have this also copied over because i have already prepared it actually i guess i have done this wrong because here here is the registration and here is the login so let's take that and bring it actually here okay so we have here a very very simple form both for the registration and the login we have exactly the same form we have just username and a password we don't have the confirmed password but once we see exactly how things work then you will be able to add actually whatever you want to that you can even add a lot of other properties for the user you can add another custom user to your database and try to write your own information into that so just feel free to be creative that's actually showing you how this system actually works and how how we wire things together but then you can expand that with whatever needs you might have so uh really creativity is the only uh uh well boundary that you might have once you understand how this everything is wired up and how this everything works okay so let's now go here in the code behind parts for each each of them and i will also maybe just reuse something that i have already prepared so we are here in this register view model now we have this public class here and within this class we will actually have an estimated class that will define our input model of course we will have to use the system component model data annotation and as you can see we just have here uh two properties that should match actually uh to what we actually also need in the cs html file and that should be actually very very fine now the other thing that we might need here is we will need here to actually specify those properties as properties because otherwise uh it wouldn't actually work now we have also here a string that is for the return url but right now we will actually not concentrate about return urls for that we will also have another video but what will i what i would like to do instead i would also like to add here a constructor because as we are here in the context of a regular asp.net core request pipeline we can use dependency injection and everything that will be inject here will be scoped and therefore can be reused or used properly here to authenticating or in this case registering users uh in our application so let's add these two type of properties and we have this sign sign in manager equal sign in manager and we have then user manager that equals user manager and then we would be actually good to go with that now uh what we'll do here is we'll change a little bit this uh this method here instead of void if it will be an async task because we will also have some some uh async post although actually that could even remain void here because what we want to put here that actually gets executed when the request comes in for this page so when we actually want to send that form to the user uh to to the browser session of the user so that the user is able to actually uh do something so the only thing that will say here is that return url it would be equal to uh url dot content and here we'll actually specify right now uh the root for uh for the entire application because this is where we actually want to redirect now here comes really the fun part for the user registration because this form of course needs to also be posted so for that one we'll have here a public async task of i action result because we'll see we want to make actually a redirect once everything is okay or just return the page if something went wrong and we'll call this on post async and that's the razer pages convention so each razer page has virtually these two methods on get and on post of course for the on post we have used the uh async version because that's actually what we want to do here now first of all if i don't know for some reasons the return url is not set correctly we will just set it also here and then as already visual studio suggested uh we want to check if the model state is valid because only then we want to perform some actions otherwise so if uh if the model state is not valid we will just return the page once again so we will just return the form once again now here is where actually the fun part the fun part happens and that's actually not really complicated here so let's uh think through about what we actually need to perform here so we need to perform two things first of all we need to create an instance of identity user and for that we use the things that we actually get from the input so from the email and from the password and then we want to actually create the user first so for that we will use the user manager that will allow us to create a user and then if the user was created successfully we also want to sign in the user already now so that it could be redirected directly to our application and everything should be actually fine there so that's what we want to do and that's not really really complicated here at all so let's uh let's see here var uh user equals new identity uh user and probably let's uh let's use here uh but no that's not what i need we need only the only properties that we need to specify is username and the username in our case uh we will also be the email from our input and the email address uh will also be equals to input email and that's actually all what we need here for this identity user to be created now of course what we need to do here is uh we need to create the user so far uh let's call this identity okay and then i said we'll have to actually create user and that would return us a result and we'll say here await user manager and then we have this create async method and in this create async method we have just to provide getting user instance that we have just created and we need to specify uh the password separately because the password goes through a different mechanism here it it it it is checked against the requirements it is hashed and uh things like that so yeah we should provide user is called identity in our case now then uh what we can do this is a result that actually uh tells us if it is succeeded or not so in fact we can already actually use this type of information here and here's actually what we would need to perform here because actually that's that's very very easy [Music] because we have this sign-in manager service so there's a reason why we have added it here uh through dependency injection because that service actually is very very easy to use and it performs a sign in that's actually also adding that authenticated user to the a to the http context so when the response is generated and uh when the redirect happens that cookie that was generated for this authentication will also be persisted in the browser so in order to do that it's actually very very simple we have to simply use the sign in manager and then we have sign in async that's the method that actually we want and we have to provide user but we can also provide here if um is persistent uh if it should be persistence or not and in our case let's let's have it false if you set it to persistence then the cookie will persist also through a browser session so if you close the browser and if you reopen it you will still be authenticated in our case we say false because we don't want this to happen it will be actually easier for us to to test how our authentication system works and um that should be fine now when this sign in is ready then we just have to actually do a redirect so we'll have return local redirect and we'll specify here the return url and this will actually perform or a redirect to now our local stuff uh or to to our homepage and that's actually mostly it for our sign in part so for the registration let's also right now copy this and let's go over also to this login model because that's actually very very similar we will also need this class here uh that will contain uh the input let's um go here also to the register once again because we actually this on get will we can also set it like that uh just to be sure that everything's okay so let's go back to the login and just replace everything that we have here with the properties that we need and the on get that we have here and now now let's have a constructor here and we also need those services in this login but however in this login we don't have to create user so actually the only service that we'll need here is the sign in manager because we just need to sign in user user is already created so we don't need the user manager anymore therefore we'll inject only this one and of course we'll inject this uh in the constructor of this page model and then we should be good to use it so sign in manager equals sign in manager and we should be good to go with that so right now you can see that also all the errors have disappeared from here so on get is fairly okay then here on the post we'll have to implement actually uh this very very similarly we'll actually reuse that so let me go here public uh so it will public async task of i action result because also here after we log in we want to actually do a redirect and we have this i action result and the on post async okay and that's that's it now first of all what we need to do is we'll set the return url to the home page right now and then here the check that we need to do here is once again if model state is valid because only if the moral state is valid we want to do the login otherwise we just want to return the page we will return this form once again cool so right now what you do is actually very very simple is actually to only check if that user can be signed in and in that case of course uh also authenticate user fortunately the sign-in manager has one method that actually does everything for us and uh it also returns a result that has uh is succeeded so it will be resolved await a sign in manager and here we want to sign in with username and password so we'll have here password sign in async so what we'll need to provide here of course is from our input we'll have to provide the email from our input we'll have to provide the password of course and then we have also to provide some other type of information first of all if this should actually uh be uh persisted or not uh let's uh put it to false and if sign-in fails if we should if we should lock out user or not so we'll have this lockout on failure we'll put on false we don't want to actually lock out a user right now and that would actually be it that would sign in our users so what we can do here is have here if a result got succeeded uh in this case we can then return a local redirect like we did earlier and we will return to our home page but right now uh as we will return to our home page we will also have actually an authenticated user in the http context in all subsequent requests and that's actually it for this register and login let's even also implement the logout and logout is actually something very very nice uh let's uh let's go here to the logout we actually don't need this co this code behind file at all in this case we can even just delete that because whatever we need to do here is we can just simply put everything just here and here of course we need a page we need microsoft asp.net core identity we want to ignore uh the anti-forgery token right now just to not get us some errors because of this but however we shouldn't but let's make sure that things will work and then we also inject the sign in manager and here we have this on post and let's make this first of all on get we'll change this phone post a little bit later and we'll see exactly why but right now let's make it to and get and here what we do is we verify with the same sign in manager if a user is signed in and by the way that user is already provided by us uh as part of of what actually this page is so we have this user and then we have this uh wait sign in mender and sign in manager and sign out async that would actually sign out our user it will then remove the cookie from the browser and then we can redirect of course once again to our home page so logout is essentially just logging user out and making this redirect it doesn't really has or that it doesn't really have a view for that so we don't have any real ui for this type of behavior and that might actually be it for now at least for setting up this uh this this kind of parts now before we put everything to a test i would like to do maybe something else because we want to check for a way for instance uh if our user is authenticated when we arrive at our blazer application because then that is actually the last step that we have to make sure that when a request comes in for our blazer application now when the blazer application gets actually instantiated we can capture uh information about uh if the user is authenticated or not so where does this actually usually happen well it does this usually happen in this app.razer and here you see that we have this app.razer part and in this app.tracer right now it's i said like for a regular blazer server application without without authentication so in order to actually have built-in authentication into blazer and to be able to actually check if the user is authenticated or not the only thing that we will need to do here is we will need to wrap everything up here within uh within this component which is the cascading uh cascading authentication state so what we'll actually do here is we'll move everything that we had previously here in this file we will just move that inside this component cascading authentication state and the only one other thing that we have to change is so that our all our routes are supported by by our authorization scenarios instead of route view and we will have here authorized route view and besides that everything actually should uh pretty much work okay now let's make even a check for instance if everything seems to be working fine here so let me maybe go here to our pages that we have and we have here this counter component and let's make sure for instance that we can access that counter component only if we are authenticated otherwise we shouldn't be able to actually view that custom counter component so uh in order to actually do that now what we'll do here is once again i will just uh reuse some things that i have already uh prepared here and the only thing that we have done we have actually moved everything that we had previously in this uh authorized view component in in which we have two parts when the view is authorized so when everything's okay then we have all the functionality that we had previously and when it is not authorized we see the status view are not authorized to see this component uh so that's actually a way that we can use to check if authentication actually works in our application so now i guess it's the big moment of truth so let's uh i don't know let's make a rebuild here for this solution to at least make sure that we don't have any any build errors and it seems that actually uh oh it's it's still rebuilding but everything is everything seems to be fine so right now we can already use our application and let's let's start the ui and if we have errors well uh we'll then try to fix them uh because there were there was a lot of stuff that actually needed to be done and even if i have prepared this and hopefully i have taken everything into consideration uh probably some things might have slipped still but once again it's not really very complicated so first of all what i want to check here is let me check if this counter is available to me and see you are not authorized to see this component so we already can see that kind of like authorization in blazer works because of course i am not logged in right now i am not registered so i really can't do that now to do that we will have to navigate and right now right now we'll do this manually in the next video probably we'll see exactly into how we can even uh make this uh to be kind of like automated to have this information displayed somewhere to have some buttons but for now it would be once again you need to use the name of the the subfolder in in areas that you have used in my case is was a identity then the folder in which this razer page is located that i want to load right now and the page that i want to load is actually this register so this should actually redirect me here to this uh register and let's uh have here something like that user.example.com and let's also have a password here and let's click on register and let's see what's happened so things things seem to work under the hoods and then i was redirected and when i was redirected uh everything seems to be just like previously but right now i can see the counter so you can see right now i can see the counter right now everything's okay so it means that actually my authentication works so let me just prove you once again that this kind of like works uh let's also navigate to identity dot account and log out and the browser will perform again and that is why we actually change that method in the logout page uh to be on get and not on on post because we want to be actually uh be able to log out and theoretically we should be logged out right now so you see if we can if we click on the counter we can see that you are not authorized to see that cool so this seems actually to work now let's get one step further and here let's go once again to identity put account slash login and right now we want to actually perform a login because we are already registered so we have user.example.com that would be the username and we have here the password let's type in the password hopefully is the correct one so we were redirected back and if we click on the counter once again we can see that we can access it right now because we are we are authenticated and everything works and right again right now to be just make everything uh final let's have account not account first of all it was identity then account and then uh slash logout and that would actually log out us again and we go on counter you are not authorized anymore so guys that's actually it you have seen it it seems to be complicated at the beginning but there are really only a few very very basic steps that we have actually to take and everything is wired up authentication and authorization is right now working in our application and we have added that functionality from scratch to a blank blazer server application and i guess that's maybe i don't know under 30 minutes or something like that so i'd say that's pretty fast and i can actually assure you and guarantee you that once you actually go through this by yourself at least one time if you implement this flow at least one time then you will never want to actually use scaffolding again because it gives you a lot of power about how you actually can configure and go about authentication in blazer server here in this case and furthermore than that it also will prove you and will help you to really understand how this actually is wired up how that is actually working and you'll understand each line of code that you have here and then when you have to extend this functionality which will also basically do in further videos it will be very very easy because you already understand exactly how the hosting model looks like and how you can then implement different type of stuff here but i guess for this video right now that should be fairly sufficient so i would like thank you very much for tuning in and watching that if you enjoyed that content and if you think that other people might also find it interesting don't be shy and spread the word about this video through your i don't know social networks uh forums ready to wherever you think that there might be people that would benefit from this video make sure then that to just uh share it and of course subscribe to this channel hit the subscribe button and of course also the notification bell to be always notified when something new happens here on the quadrangles channel because we really try to update things here on a very very fast pace and last but not least uh if you enjoy that and you have anything to say please use the comment section below it's really important to use that because that's how we actually get people to notice that this video is actually working and that the content of this video is actually valuable because people engage with that so just use the comment section and uh just feel free to say hello or just put your questions here or your discussions or whatever you want actually to get the discussion started regarding of course this topic that we have discussed right now this being said once again thank you very much for watching and until the next time i wish you the very best

Channel: Codewrinkles

Views: 41,884

Keywords: blazor, .net, blazor tutorial, blazor c#, blazor server, blazor server authentication and authorization, blazor server authentication, blazor server authentication tutorial, blazor server tutorial

Id: LBByZRhyZ8U

Length: 57min 21sec (3441 seconds)

Published: Wed Jan 26 2022