Angular 16 authentication using NGRX & JSON Server API ( Registration + Login + Role based AUTH)

in this video I am going to implement authentication in angular 16 application using ngrx pattern I am going to split this video into three parts the first part going to cover the below topics so the first one is registration and the login screen implementation role based authentication by menu and third one is auto login and logout implementation then generating menu dynamically based on the role permission and the final only user role assignment and in this part too we can do the complete role-based authentication functionality ways so like we can restrict the functionality of add edit view daily based on the user rule permission okay and the second one is Rolexes assignment under remove this is a kind of admin tool so there user can choose the role and menu and the functionality so if you want the can as in and also remove okay and in this part 3 we can do authentication using JWT token and refresh token handling and this registration and login functionality using the realtime.net core Webb application okay so this is the part one video so let me start from the registration and login implementation okay for doing this implementation I am going to use the existing application so this is created part of our ngrx credit video so if you want to watch that video I will share that video link also in this description and this is very simple I just created one brand new angular 16 application so you can see the version is 16 and additionally I installed this material UI for the designing purpose and then install the sum of the packages for doing our ngrx implementation this ngrx EFX entity router store and store devtools okay and we have done one productions for one of the model so let's start our registration first I am going to create the required components energy generate component the common name is register so similarly we can create two more components one is for login and another is for the initial home page so login component is created so let me create the new component for the home okay the component is created so let me register this component in this routing side routing model if you are noted uh currently we have this associate listing and this customer listing so the default route we can map with our newly created home component and this associate let me provide the path is associated okay and next so this is for register so let's say maybe we can register this login also okay okay this is fine and this is the response now okay this is my home screen and registration screen okay so next let me focus on the APA side so as I mentioned for this complete video I am going to use the Json server HTTP only for that already I have created one dp.json file okay it's having this associate object so after that I am going to create one more new object so we can provide the name is user okay so initially it should be an empty array so next let me create one model file so in this store we have this model folder so let me create like user.model here we can Define our interface so we can provide the name excuses here let me Define all the variables one by one so the first one is username and data review string and the second one is password then actual name next to email next to phone number then roll next to gender so finally we can have this status whether it is active or inactive and the data type is Boolean okay next let me focus on the designing area in our register components let me create the Constructor here we can inject the form Builder and defining my register form so here we can Define all the fields on by one okay so our first fill this username and default value is empty the validation purpose I am going to include through validation so I'm going to use this validators.compose option first one is required validation and the second one is minimum length should be 5 okay and the second control is password so again the default value is empty and the validation point of view we can provide just a record field validation that's enough confirm password and the fourth one is name next email then phone add the final one is gender so in this gender we can provide the default value smell okay and for this email field we have to include one more validation so let me use this validators.compose option for validating the email we can choose this email option that's it okay this is fine uh we not included this role and Status the reason is we can provide the default values okay fail registration time so if it is needed from the admin tool we can change the role and the status that's it so let me save this one and the next in our HTML side so let me remove the existing tag first I am going to use one form here we can include this form group and our form name is register form and the submit event in G submit proceed register so let me Define this function here so here first we can check this register form has the valid record so then only we are going to proceed so next in our HTML side let me Define all the controls one by one so before that I am going to use this matte card for providing some better look and feel then matte card content sorry not a Content header mid card content see the schedule side we can provide like user registration so in this content side I am going to include the farm controls one by one matte input and form control name we can provide this one and I'm additionally including some of the custom CSS well this is actually for some alignment related things only okay so anyway I will include this uh complete source code in this GitHub you can cross check if you want see the designer it should be like this so similarly I am going to include all the fields one by one the second one is password this form control name also password and here the input type is password then confirm password again the type is password then full name and our form control name is just a name next email and then phone number you can see now okay and for the gender I'm going to use the radio button you can use this du50 and the control name is matte radio group the form control name is gender and here we can provide the options I am going to provide three options matte radio button similarly I'm going to include two more options female and the final one is other you know for the mail I'm just changing the color primary and we already provided the default value let me verify right it should be small so then the initial load itself it is automatically selected okay thanks to we have to include the buttons you can include this footer so this MAT card accents okay that's fine so let me include the button and type is submit and the button type is matte raised button okay and the color we can provide primary so it's taking the full space so we can include one more button cancel and we can have this password and confirm password in the same line including this mat 50 class so this is actually a custom class only see with the 48 percentage and the margin is one percent that's it and this email and the phone number also we can have in the same line that's it okay our design is completed next let me move on the ngrx implementation area okay so in this store already we have this associate common customer I am going to create one more new folder the name is user and in this user we come to get the required files so the first one is state and the second one is action and the addon is reducer then effects and the final one is selected okay we created all the required files so next in this model I am going to include one more interface we can provide the name is user model okay and it is extends entity stage and it is resolving this uses class so let me save this one next in our state first time declaring the adapter we can provide the name is user adapter okay and our class is users so next to declaring this state get initial state okay so now we initiated our state next we can move on the action side first I am declaring one constant variable and this is part of the Authentication random right's name is begin register okay next to creating this action so action name is begin register using this create action function first we are providing the type type is nothing but our constant variable and then we have to pass the props so in our case user data and the data type is users okay so this is my action next let me move on the effects so before that I am going to create one new service for handling this authentication related activities So currently we have this associate service only we can provide an image user so in this user already we have this Constructor and here I am going to inject this HTTP client next to declaring on variable APA base URL this is our AP URL okay it's working fine and then creating on function user registration and it is having one input data type is uses rather than whatever data is coming we are just passing it here okay so let me format this one okay this is fine next let me move on the effect side we can provide the name is user effect okay and it is having this Constructor and since we are handling the services we have to use this injectable decorator also and I'm injecting the actions next we can inject the services I'm just injecting this user service okay you can format this one I'm going to create our first effect user register create your effect in this direction pipe and the type I'm just checking begin register so next we can use the CX custom app so basically this is the rxjs operator and here I am going to call our services user registration how do we have to pass the user data that actually we can get it from the action kind of thing is coming so let me verify our action that we created we created our action and we have the props yeah one thing I missed so let me say this one so you said data is coming I'm going to use this pipe option on second and here we can use this map so map also here RX and GS operator okay so since this is a success scenario I am going to dispatch this show alert so the message we can say a registered and the result type is pass and if there is any error using this catch server option we can get that again I'm going to show dialect message so this time registration failed I'm gonna add the Russell type is fail okay so if you want to show the exact error message also we can show okay that's it so let me format this one and in this positive scenario we have to redirect into the login page so what I'm going to do let me inject the router here so this start route that navigate we can provide this login so this login is nothing but the path we have defined in our app routing model okay so once the registration is completed we are redirecting to our login page and if it is the error we are just showing the error page uh still we are staying in the same registration page itself add one more dot uh you may have what is that show alert so anyone and one more dot you may have what is that this show alert okay because I am not explaining this one and also it is not the inbuilt feature okay so this is the kind of function created based on my last video for showing the alert message if you want to check the definition so this is a kind of action next in our Common App effects we can see this function handling so whatever message we are providing and based on the result type it is showing one alert message using this matte snack bar component okay so let me go back to our effect side okay the effect is completed next let me move on the redecer side okay so the reducer is in pure function we can provide the name is user reducer and it is having two parameters one state and another one is the action it's going to return another function so let me Define that user reducer then we can use this create register function and we need to pass the initial state so our initial state is user State okay so additionally based on the actions we can apply some Logics so that we can do little later part of this registration there is no changes in our reducer said okay so next thing is so this user effects and this reducer both we have to register in our app dot model okay so if you are sick here see already we are registered this associate reducer and also the custom reducer so after that I am adding this user reducer also and the same way the effects can include this user effects so now let me go back to our component so in this common already we have this function initially I'm just validating this form so after that I am going to apply one more custom validation for checking this password and confirm password I'm just checking like password confirm password if both are same then this is the valid scenario so in this else part I am going to show the alert message for that already we have this show alert action also for dispatching the particular action I am going to inject the store okay so in this yield spot so this Dutch store and you need to dispatch the action and our action name is solid so this message we can say password mismatch and the result type since this is the error scenario we can provide like a field okay add one more validation is needed the username actually we are providing us the input okay so maybe the duplicate user entry will happen for avoiding that we have to check the duplicate username validation so that I will do once the registration process is completed so here I am going to dispatch our begin register action before that I am going to create one object okay and the data type is uses and we need to assign the values first of all this username so we can get the value from our form and I am going to assign it here so the same way we can assign all the fields one by one because most of the fields are string type only I mean the data type is string only then email then phone gender next to this role so I'm going to provide the default value user okay and in the status so defaultly we can provide a set flow so now we have our object also next let me dispatch this registration begin register and the value is this object okay if it is having some format we have to follow that otherwise we will get the error so let me format this one we can do our first registration so if I'm defaulty clicking I am getting some error why this password is not getting there I will verify okay it should be password see now so all are the required Fields only okay so let me provide admin some phone number so once I'm click to the save I'm getting the messages password mismatched so let me change that so now both are same only see I got the message like registered successfully and it is simply redirected into our login page but in this login page currently we don't have any designs so let me verify whether our db.json have the data see so the new record is created so additionally it's included on more column that is the ID so anyway we are not going to use this one or this is a kind of Auto generated field so other than that whatever data I have provided it is stored here okay so next we can focus on this login functionality so we can follow the same structure okay first let me start from the login I'm in the designing side created this Constructor injected this form Builder and initiating our form now it's having just a two Fields only one is the username and the second field is password so let me save this one so next in this HTML site so what our content we have included in our registration screen so let me copy everything for the time saving so first we have to change this form name server form is login form and in the submit event we have to call this proceed login and obviously we have to Define this function and since this title we can say user login so the first field is username and the second field is password so we can remove this class it's not needed so other all the fields we can remove and the text is login and in this cancel scenario I am going to use the anchor tag only so in this click event I'm going to have one function preset login I'm going to create the function also so I am just clearing the data okay so this Dot Login form reset so let me save this one see the response now okay it's coming but we are getting some style issue so what we can do so whatever custom CSS we have included I'm just copying and including it in our login component also so you know it's fine correct and if you are a new user we have to redirect to our registration page so let me provide one link this bottom I'm just copying this one we can ask like a new user I am going to use this router link and instead of this matte resist button I am going to use the matte button okay is coming like this and let me change the color also we can have this primary so now it is fine so if I'm clicking this new user it is simply redirected into our user registration so the same way in this user registration screen instead of this cancel we can change the name into back to login and I'm changing this into anger tag so additionally I'm using this router link and redirecting to our login page that's it see now so if I'm clicked it is coming to our login page okay okay the design is fine now let me work on the ngrx side so first in this model let me create one more new interface that is user credential just username and password we can create one more interface so that is user info once the login is completed we have to retrieve the data only needed information only we have to fetch from our db.json so let me consider this username name email role even the status also fine okay so the fields are not required so we have done from the models so next in our action so in this action I am going to create one more new action so that is for proceeding our login functionality so first initiated on constant variable centered up the register I just change it into login okay the same way we can create the action also begin login and the input is user credential okay let's save this one and in our service side just to create even more function user login and the data type is user credential and this is the get method and it's going to return this user info and in this URL we have to provide one custom URL okay so let me show you so this is our actual URL so here I am going to pass to parameter one is the username okay let me and another one is password so that also admin so it's still returning the data this is see this returning the data in case if I'm providing the invalid password see there is no data so the same way so if I'm providing invalid username it's not going to return the data okay that's all about our client so let me copy the same URL and up to this this is the normal API based URL only so we can remove up to this after that in instead of this admin we have to pass like Dot username again in this password also okay so next to go back to our effects side so in this effect side we can copy the existing one the register so instead of the register we can provide login okay and this type we can select like begin login and in this service side we are calling this user login and passing this user credential once it is succeeded we can pass we can redirect into our home page that is the NT URL so after that we can say login success and in the cro scenario let me say login field okay so initial States this is fine so next let me move on the login component here also I'm creating an object so first one is username this login dot line from dot value string so the same way password so let me save this one and after that I have to dispatch the action so let me inject the store here so this dot store in this space begin login so let me refresh the screen and one more item I missed so basically I will get the data otherwise I will get the empty data so what I supposed to do I will get the data here okay I'm just declaring one variable here user data if data dot length more than zero only we are doing these things I am taking the bus stops it okay and again this first object has the status row so then only it is the valid scenario okay so in this error scenarios so there is no data that means invalid credentials okay login failed invalid and the result type is fail and the next thing is we are able to retrieve the data but the user status is false okay so in this scenario we can say in mac2 user and again it's a failed so now it is fine so let me try now so if I'm providing admin see I am getting this login success so let me go back to here so in case if I'm providing some invalid credentials login failed with an invalid credentials next in my db.json file and just changing the Status into files okay again I'm going to provide the valid credentials only see inactive user because the credentials are fine since the user is in United State we are unable to access our system that's it so next in our registration side we have to check that duplicate user validation so for that also we have to communicate within database so what I'm going to do let me create one more new action just to declaring one constant variable duplicate user here I am going to declare one more variable duplicate user success the same way we can create the actions duplicate user and the type and in this props we have to use this username and data type is string so the next question is duplicate user success just duplicate and in our state I am going to include one more parameter so before that in this model not here okay this model I'm going to include or not property is duplicate so data type is Boolean so in this state also we can have this is duplicate the default value is false yeah now this is fine next we can move over service side and here I'm going to create one more function duplicate username so the same URL only I'm just passing this username that's it next in this EFX side I'm going to copy this user registration I just to duplicator we can say duplicate user add the action type is add the method duplicate username I'm going to pass the exact username so once we have this data so the same concept we have used in our login time if there is no data then this is the success scenario for us so here I am going to dispatch duplicate user success each duplicate value we can provide false okay and if there is any data we no need to check anything I'm going to remove everything and I am saying username already exist okay and here I am going to dispatch one more action so instead of the express map I'm going to use the switch map option okay if it is not coming we have to import it manually so this switch map also yeah rxjs operator only okay why I am getting the crr okay so here also we have to written as the Observer so that's what we are getting the crr so let me save this one and again in this duplicate user scenario we are showing this message at the same time we have to dispatch one more action okay and we have to provide the center group so next let me move on the reducer side we have to handle this duplicate user success So currently we not return anything using this r duplicate user success and then it's having this state my action I am going to provide the default state so after that we can set the values for each duplicate okay this duplicate that's it so let me save this one and next in our selector side I am going to create a new selector first defining this future selector okay is duplicate user using this create selector option here we can pass this current state and we have to return this duplicate only okay so next what I'm going to do in our component side I'm going to have one function function duplicate user here I am getting this user name so the data we can get it from the form itself if the username not equal to empty so in this scenario I am going to dispatch from action that is duplicate user at the same time I am going to use the selector use duplicate user so let me subscribe this one if it is the exist I'm going to show an alert message at the same time I have to clear the field okay so if it is exist I have to show the alert message that is already done from our effects itself so in this common point of view we have to clear the data okay so this dot register form Dot controls user name dot reset that's it so let me format this one next to this function in this username control in this blurry event I am calling this function so let me verify this one if I am provided test user nothing will happen at the same time if I am provided as admin see username already exist and also it is cleared again if I'm providing admin so the same thing we can verify from the reductions also so if I'm entered something see this duplicate user access executed we can see this is duplicate this False only so in this success message we can see okay at the same time from provide admin no see so this is changed into true at the same time it is showing this alert message also so now we have done this duplicate user validation and password mismatch validation the same way we can apply this a duplicate email and the phone number validation also so time being I'm not consider this one and also we have done our login functionality also right so let me create one more user test user so once I'm saved see registered successfully if I'm providing test user I am able to login also okay so now we have completed this registration under login so let me Mark this as the completed so before moving on this role based authentication let me complete this Auto login and logout functionality so let me go back to my application So currently I just logged in I am able to access this homepage okay at the same time currently if I'm in this login screen I'm not even logged in if I'm trying to access this home page I am able to access okay for the better design let me include some content here in this home page so let me provide like welcome to Nigeria techies so this is our official email only okay that's it so we have to move to in the sender so that I will take a look later so yourself now it's fine so since I am not logged in so I am able to access this homepage so basically if you are providing the link like this the system will redirect you into our login page that is the expected thing for doing this implementation I am going to create one card and see generate card we can provide the name is R okay so let me choose this can activate so our card is created and we can see the default value it is written as true so here we have to include some logic changes first let me include this Art card in our routing side the same card we can apply for all the menus except this register and the login page and we can save this one and the next thing is once we are logged in we will get the complete user information right so that we have to include in this local storage so let me go to this user effects and this is our user login function so in this access scenario already we are navigating so before that we have to set values into the local storage so let me create one more function for assigning values into the local storage so let me go back to the service side you set to local stories local stories that's it item and we are getting this object so so we can convert this into string so it's Json Dot stringify okay so next I am calling this function from over effect side so let me verify whether it is adding or not if you are checking in this application side so in this local storage there is no value but so we have this user data so in this object we have the complete user information next I am going to create one more function in this service side for retrieving this uh local storage data here I'm just declaring one object we can provide some default values so after that I'm just checking this local storage user data are not equal to nil finally I am converting this into another normal object okay at the end we can return this one so in this sales scenario we are returning this empty object okay this is fine so next from this card I am going to access the particular function so before that let me inject the service and also the router here and our services user service okay so the same way we can inject the router also router okay so next and declaring on more variable and the data type is again the user in founding get user data from the storage this is the function and here I am going to check like this user info dot username not equal to empty not equal to null so then this is the valid scenario we are returning this true so in this yellow scenario let me return files at the same time we have to redirect into login page okay so let me format this one and one more thing in our login component let me implement this honey knit hook so in this initial page loader time I'm just clearing this local storage so let me refresh the screen So currently I'm in this login page so I'm not even logged in if I'm trying to access the home page see it is simply redirecting to our home page so same way if I'm providing customer again it is redirected to our login page now I am going to provide the credentials you know okay now our basic authentication is completed next thing is I am going to create the menu let me create one more new component menu bar so next in this menu I am going to use the some menu controls that is from our material command so make sure I have to include the required models so in this material model so the first component is toolbar and our model name is Mac toolbar model and the second one is side neighbor and the next one is menu next list and icons mat list model and the file notice icon because these are the components we are going to include in the menu section so next let me copy the selector app menu bar I am going to use this in our app component So currently we just called this router Outlet here I'm calling this one okay and anyway this part I will comment little later anyway let me copy this one and in our menu header I'm just included anyway this section is not needed okay screens are working fine so next let me focus on the designing part first time including one due tag here so instead that I am going to use the matte toolbar color I just provided primary and included on class also okay see now so the mini section is coming and then let me add one button so this is Mac icon button here I'm going to use this menu so that icon is menu I can only see now after that I am going to include one spam tag for showing the application name angular 16 and here I have to include one logout button so in this route turning I'm going to provide a logo okay it is coming like this let me include one custom CSS here so you know it is moved to right side so once I am clicked we are able to in this login page so basically we no need to show this menu in this login page so I have to handle this one little later and the next thing is we have to show all the menus so instead of showing everything in this tab I am going to show in this sidebar section let me use this matte so inside that I'm going to have this matte dryer and here I am going to include some of the properties first I am just including one identifier and the properties opened true then position start then mode slide did you mean side yeah actually a side only so in this tire I'm going to have the matte new list and here net lists later then I am adding this button okay and in this menu button I am going to include one function I mean the click event I'm just taking this identifier you can use this total after that we can have this matte dryer content and here I'm going to have one new tag and added some Styles also okay see now we are able to see this left side side neighbor so in this button you can use the map button see now it is fine and also we can include one icon okay this is more than enough and whatever router Outlet we have I am going to move inside now this is fine right so if I'm trying to login okay it should be fine so similarly we can include the other menus also first we can add everything in this static manner after that let me generate in the dynamic way and the second one is associate and the third one is customer one more menu I will include little later so currently let me provide as the user so in this icon instead of the whole let me change everything into wait if you do sir actually based on the menu we can provide the exact icons so time being I'm just add it like this so in this router link we can provide associate customer so let me provide this is the user okay so anyway it's needed let me create one new menu also I mean new component user list and once it is created we have to register in our app routing model user user list component so let me save this menu okay so associate customer user and home and if you are log out it is in the login page so in this login page and this registration base this menu is not required so let me apply some conditions here so what I'm going to do let me declare one may review is menu visible so the default value is true so after that I'm going to apply one condition here if it is visible only we are showing like this so similarly I'm going to create one duplicate section in this outside and here let me provide the negative conditions you know for the better understanding the default value let me provide false you know since this login and user registration we are unable to see this menu at the same time so now in this home page also the menu is not showing so so this variable for ascending the value we have to handling this Dynamic manner I am going to implement one more hook we can move this declaration at the top so in this place I am trying to get the current root value so let me create the Constructor I'm just injecting this router next I'm just checking this current route equal to login and Dot and r this current route equal to register so in these two scenarios we are not going to show our menu so then menu is simply equal to false else we are going to show our menu that's it so let me format this one see now the menu is showing I just logged out So currently I'm in the login page the menu is not showing even in this registration page also so once I'm logged in see so the menu is showing okay so next we can generate this menu based on the role permission so let me start from the APA side I mean this db.json here I am going to create two more objects so the first one is roll here I am just providing some hard code rules I am going to provide pre-rolls okay now the final is normal user so these are the three roles and next we can create one more section so that is for the menu so the first two menu is home so in my case the home is accessible by every large green user so I'm going to provide associate and then customer and finally use the screen okay and finally we can create one more section role axis so in this section only I am going to assign the menus for the particular role okay so the data should be like this the role maybe we can provide admin and menu associate so that means the admin user can the access for this associate so similarly the admin user have the access for other menus also so we can map it user So currently this role admin have access for these three menus okay so next we can include for the manager for this manager have the access file associate have the access for this customer also but this user screen manager don't have the access and finally user user I am going to provide the access for only associate okay so let me save this one and using this data I am going to generate this menu dynamically based on this role permission okay so the concept is very simple once once I'm logged in I am able to get the user role so I'm going to pass the particular user role in this role axis then I will get the accessible menu So based on the data I am going to generate this manner in this Dynamic manner okay that's all about my concept so let me generate the interfaces based on this data just a code and name again code and name only role and menu next in our user model I am going to include unknown property menu list so the data type is minus array okay next in our state in this initial State we can provide like one MTI okay next let me move on the actions I'm going to create two items so the first one is fetch menu okay so just to declare the variable and also creating this actions fetch manner So based on the role only we are returning the data so our props is user the same way fetch menu success so once this action is completed we will get the list of many information that we are going to set in our state that's all about the concept so our clubs is menu list okay so this is all about the action next to we can move on the effects so before that let me write the services so this is a kind of get method gets menu by role and input is user role and it will return the number of menus on small change so basically the data type should be roll access so here will here we will get the menu information so this time changing this actually I have to include in this actions also okay and we have to form the URL also our wireless and here we are going to pass this role okay this is the exact URL I'm just copying this one let me replace it here and instead of the hard coded value we can pass the dynamic value okay and I'm just changing this into role axis and in this model okay now this is fine next let me move on the effect side I'm just copying this one load menu by role and our action is fetch menu get menu by role here here we are passing this user role so in this failure scenario we no need to show any this much of data we can save failed to fetch menu list so this is more than enough no need to show all the data so in this success scenario I'm going to dispatch one more action that is fetch menu sex and it is having only one traps so whatever data we are getting I am just passing it here also I am planning to remove this navigation it's not needed idea is very simple we are checking this action and we are calling the services once we have the data I'm dispatching one more action okay that is fetch menu success next let me move on the reducer side let me formid it so here also same first time checking this action fetch menu success if it is yes I am going to assign the values into menu list once we have this data we need to fetch the data I mean select the data so in this selector I am going to create like get menu by role so here I'm just returning like menu list okay so this is more than enough next in our component side I am going to implement one more hook so let me remove this section and we need to select that menu information so first we can inject the store okay and declaring one object and the data type is role axis and in this hook let me select get menu Barrel so let me format this one and also we need to dispatch this fetch menu action so that we can do in this effect side once we are logged in we will get the user role information in this user login so here I'm just dispatching this show alert at the same time we have to dispatch one more action that is our fetch menu okay so what I'm going to do instead of this cast map I am using this switch map option and here also so after that we can use this subsurable here because we are going to dispatch two actions that's what we are providing like this so before showing this select message fetch menu it's having one drops that is user role so already we have the information so user data dot role okay so next let me move on the menu So currently the complete menu information available in this menu list variable so let me copy this one in this HTML side I'm going to command these items menus so after that we can generate the for Loop here so let me format this one I just logged out and in this db.json for the admin user let me try to change manually for this role as admin again just refreshed see we are able to see this associate customer and user and once I blogged up try to log in with and right user the role is just to user only so we are expecting only the associate menu only visible see working as expected so now the problem is if I'm trying to refresh this one so this menu is gone so the reason is we are stored this menu List information in our ngrx okay so once you are refreshed so it will be completely reset so then be how to displace the action one second So currently we are in this menu list so we can fetch this role information because it's already stored in our local storage so let me go back to this menu once again so here what I'm going to do try to access this local storage so this logic already be written in this service side so let me copy that okay let me just take a bit so here there is no object so here I'm going to dispatch the action face menu okay so now let me refresh the screen see the menu is loaded so let me try to log out once again see it's included so in case if I'm trying to include one more record also it will be populated automatically okay so in this real time scenario we have to change the icon based on the menu and also the menu name and the path we can harvest the separate values elimination I just provided two properties only this Roland menu instead of that we can have some menu path and menu name and also the icon so whatever data we are fetching from the API the same data we can just to bind it here that's it if you have checked here we just binded these two values right so in case if you are returning this icon we can just populate it here at the same time this router path value also it's different means we can just bind it here okay so in this way dynamically we can generate the menu and the next thing is role based complete authentication okay so I am a admin user I am able to access all the menu that is fine so now I am trying to login with an test user so only associate menu only populated but I know the URL so I am trying to access this customer see still it is allowing even if I am trying to access this user also it's allowed okay so that we need to restrict so what I'm going to do let me write one more functionality we can start from our service side okay have menu access so in this scenario I'm going to pass for more data I mean one more parameter the first one is user role and the second one is menu name so both are string only and in this URL point of view we have to put like this and menu customer see in case if I'm providing something around it won't return the data just we can copy this one menu name let me format this one next let me move on this card okay already we return some of the Logics here so after that what I'm going to do let me call this function here have menu access here I'm going to pass this role and one more thing is menu so let me declare one more variable here so the current name I just I just declare as the empty okay [Music] next time checking this menu data dot length more than zero so basically we are expecting single record online so in this health scenario if it is more than zero then this is the positive scenario there is no issue we can just return true otherwise return files and also provide one alert message and authorized access and we need to navigate in this home page okay so I'm trying to log in once again test user home all switching and not rest access so this home page basically we are not going to check so let me include one more condition so here I'm going to check like this route that URL length if it is having the data so this route is nothing but an activated Road snapshot it's coming from this parameter so next I'm going to assigning the value for this menu name okay now this is fine see it's saying another is Texas and also redirected to our home page so I'm able to access this associate at the same time frame provide the user it is saying an authorized access and it is simply redirected here okay so this is the role-based authentication by menu we are just blocking the menu access based on the role permissions okay so in the party video we will get little deeply uh because we are going to block in the functional device so that means the particular user may have the view access then the user not able to do this add or edit and delete operation some scenarios user have this ad and they edit access but they don't have this delete option so that also we can handle so so anyway let me finish this part one so most of the topics we have covered this role based Authentication Auto login and logout implementation Dynamic menu Generation by this role the final one is user role assignment okay so if you are selecting this data so while registering this user we will get this information and this status and the role I just hard coded okay so that can be changed by the Admin user so what I'm going to do we are created one more menu right that is the user so this menu can be accessible only the admin user so here what I'm going to do let me load all the existing user information here in this grid so there we can provide an option for changing this role so there the user can choose the particular role and ascending to the particular user okay that's all about my functionality plan let's start the implementation so the first thing is we have to populate the list of available user information here we can start from this ngrx site first I'm creating an action get useless and another one is get user success similarly we can create this actions also get user success so this first function there is no props okay and in the second action we will get the user list and the next in our effect side so already we have written for this menu the same way get all uses and the action is get uses so okay in the service side we not return so in this service I am going to create one more new function get all uses so there is no parameters and this is the class just to provide the page viewer okay so let me move on this cfx side once this action is completed we are dispatching this get user success and here we have this props failed to fetch user information so this is all about in the cfx side and in this reducer just checking like get user success so in this case we can use the adapter method user adapter using the settle function so our entities uses then one small difference was there we need to recovery entities uses so let me change it here so instead of the user info I am providing us the uses so the same change can be applicable in this actions also DC effects yeah FX it's fine next in this reducer we can say accent start user list then our actual state next in this selectors so in this selectors also I'm going to use the adapter function then I'm creating this excited selector okay that's it I just formatted next we can move on this component side so here I am going to implement this earning into hook and also let me create the Constructor here let me inject the store and then declaring one variable so let me format this one and here we can dispatch this get user action so after that we can select so let me subscribe this one so let me format this one and then in this HTML side let me remove the existing content for time being we can copy the content from this customer listing and we can replace whatever needed this is user listing and there is no add button is required and in the CRA message content is not needed this condition also so in our scenario we are going to display this username so actually these are the things we have to Define in our TSI itself so let me move on the TS here let me declare one variable display columns and the data type is string array here I am going to include all the columns on big one okay so we can display this username name email and this role that is more than enough and here we can see this data source so let me declare this variable also and the data type let me provide in we have to assign this user list in this data source using matte table data source why I am including this class means we have to use the input feature of pagenation and starting okay this is fine next let me move on the HTML side so our first column is username the second one is name that is fine and then email so find your role other columns are not needed okay if you want to show the status also we can show then let me include the status also in this TS side and finally this action is needed so in this action area I'm going to have only one button that is change rule and a function change rule and instead of this ID we can use username so let me Define it here so let me say this one see the response now okay we are getting the crr because of this CR message okay so in this page Network also I have included this one so let me remove it okay fine both records are loaded uh since this pagination Android sharding is not working as expected so let me include two more changes so let me check in this customer listing yeah we need to Define this bassinator and the sharding here so let me copy both of them and include it here and make sure we have to import both items otherwise we'll get the error view child and then this matte Bay generator also match shorting next in this data source Page net or equal to disturbation enter okay so you know the starting also working fine so out of two records we are seeing both records in the same page itself and see this sorting also working fine okay next we have to focus on this change role so what I'm going to do once I'm clicking this button let me open on pop-up for the pop-up let me create a new component control pop-up and then opening this pop-up we have one function so let me copy this one the same code I just added here so the first one is dialogue that is nothing but our matte dialog only so we have to inject in our Constructor and instead of this side customer component we have to use our role popper and in this code instead of the code we can use username and the data type is string other items are fine maybe the with also 50 is not needed so let me provide 30 that's enough so in this function what's the other field title maybe this title is not needed so now just to unpop is opened so next we can work for the design so in this TS side first I am going to implement this on into hook also including this Constructor and the form handling let me inject the Builder I mean this form Builder and for dispatching the action that means that the store next time initiating my form role form so here I am going to Define two fields so the first one is ID so default value I provided 0 so this is the auto generated ID okay and then username and finally roll we defend our form next let me move on the HTML site so whatever design we have included in our login component so let me copy everything I just included it here and in this title we can say user role assignment and this username field hit this is fine and the second field is a role so instead of the select control I'm going to use the match select and the farm control name is scroll so let me remove other items and in this form name we can use server role form save user role so let me Define this function so here also just like if it is valid only we are going to proceed next in this button point of view let me remove this one it's not needed and I'm going to save and the next one we have to just close the pop-up so let me provide close buffer for closing this pop-up I'm going to inject this matte dialect ref okay it is coming like this and let me include the custom CSS also okay usual role assignment okay this margin left is not needed see now it is fine when is the username and another install role so this reusable is not an edited field uh so what we can do let me disable this one it's you know this is disabled and in this user role we have to load the existing role information so what I'm going to do let me focus on this in grx side so we already created one model this rolls and next we can move on this action side creating two actions okay unless get rules and another one is get role success the same way I'm creating this accents also and then get role success so it will return roll list so that is our drops and in this service side I am going to create one new function so that will return the list of roles so let me confirm this URL ATC approval only okay next in the cfx I'm going to create one new section so our action is get rules and the function is get all roles so once it is succeeded I am going to dispatch this get role success and here it is roll list failed to fetch roll list okay next in this reducer side so reducer side I'm going to include on new property uh so in this case we have to include it in the model itself rules so basically we can create the separate folder for these roles for the time being I'm just including here maybe future I will replace into separate folders okay so next in this state so finding this reducer side and it's shaking like get role success I am going to ascend this into roles so the same way in this selector also we can have one new section get all rules so next let me move on our component so in this component I am going to dispatch the action then I'm declaring one variable so let me subscribe this one so let me format this one finally I'm just copied and in the select side I am going to include this match option and let me have this Loop using this ng4 okay there is no no data is loaded let me confirm code and name okay this is db.json I just providers the capital letter so that's what it is coming like this you know admin manager and user so now it is fine and the next thing is when I'm choosing the particular user so make sure we have to load the existing data avoid this close also not working okay it should be click so now I'm trying once again so once I'm click it is closed fine okay for loading the existing data I am going to create one more action with the user by code the same way declaring one more action for the success scenario okay and next let me create the two required actions get a user by code and then get user by code Texas so the first direction also have one crops that is the username and in this access scenario we will get the single user information next in the cfx side so already we have one function for checking the duplicate so mostly we can reuse that same code I just copied get user by code and our action is get user by code and we are passing the same username only once I am having this data I am going to dispatch this get user by code success and here this user info I am going to pass the first object okay it is actually coming as the user info so let me change this also user info okay and in this user info site I am going to include one more new property that is ID okay we added the new field so it's throwing an error okay now alar got result so in this effect side we are just dispatching this success action other than that the select message is not needed so let me renew this one the other things are fine to get user the code field so okay once I am having this detail we have to include in our state so in this state I am going to include one more new property user info and the data type so the same way in this state actually we have to include the missing field so that already we have included in this service side so let me copy everything and I'm just included here okay so next in our reducer side get user by code success so in this scenario I'm going to assign the value into our user info that's it so next in our selector side I'm going to create one more new section get user by code just user info okay next let me move on this component once again so in this pop-up component we can get the selected username for getting this data let me inject one more variable dialog data so in this onload time we can get this data information if data are not equal to null I am going to dispatch on action so the action is get user by code and here I'm going to pass this username so the exact username we can get it from this data so whether it is username or code let me verify it here yeah I just added as the code okay at the same time once it is dispatched I am going to use the selector git user by code so let me subscribe this one so whatever data I'm getting I'm going to ascend into our form okay so the first one is username and the second one is role and the final one is ID okay so let me format this one so now if I'm selected see so the username is admin and also it is selected here see test user and the role is user okay and since we are disabled so that's what it is not showing very clearly so what we can do I'm going to have on h2 tag okay now this is fine right so now we are able to select this role so once we are saved make sure we have to update the user okay that is the plan for the for handling this update functionality also I am going to create one new function in our service site update user so here I'm just expecting true parameters one is user ID and another one is the new role okay first we have to get the existing data so that's what I am using this get method and we have to pass the URL so after that let me pass this user ID okay here I'm going to use this pipe operator and then we can use the switch map so next I am doing this update from Shield team okay just started http put in the URL is same and we need to pass this data so what our data is coming I am just providing it here but make sure we have to assign our new role okay so data dot role equal to the new so we have done from here okay the service said we have completed next I am going to create the action just update role and then creating the action so in this props I'm going to pass this user role the data type is string and another one is user ID the data type is number okay so we have our two properties next in this EFX side we can copy the existing item Ascend role and our function is update user role and in this service I am calling this update user first I have to pass this user ID next to this user role so here no need to check anything once the action is succeeded I have to dispatch this get to use this function just don't have any properties at all okay so let me save this one and even in the selectors point of view there is no change I believe so finally we can move on the component side so in this component already I'm validating this form so after that let me dispatch this data action so it's having two properties one is user role so user role we can get it from this okay value Dot and we have one more property that is user ID okay so we have done the changes let me verify So currently it is in the admin so I'm changing this into manager I just clicked the save there is nothing happened I believe let me close this bubble okay it's reflected see in this listing also it's reflected so your name refreshed yeah but I missed it to provide this alert message so let me Mount the cfx just copying this one updated successfully and there are Center type is fast and make sure we have to close the popup also in this component side so now you may have one small doubt So currently I am logged in as the admin user but the role is changed into manager manager don't have access in this user menu but still we are able to access the reason is the name firstly logged in time I am the role of admin only okay so that admin value only assigned in our local storage so that's what still I am able to access so once I'm logged out if I'm trying to access one second see this user menu Never Comes even if I'm trying also I'm getting the samnath rest error so in this scenario let me manually update here it should be at me again we have to log in one second okay now I am able to access this user menu so if I'm trying to change this role manager see updated successfully and also it is reflected here so finally we can do one quick demo as a new user trying to open our link it is simply redirected into our login page I don't have any credentials so I'm a new user I'm just clicking this new user link it is redirected into our registration page so here I'm going to provide my username and user and still it is a valid only it's accepted so in case if I'm provided test user it won't accept because it is the existing one okay so then password and some numbers so if I can click to save I'm getting this password mismatched now I just corrected see a registered is accessibility I redirected into our login page so let me provide my username and user test see I'm able to login but I am the normal user I can access this associate only and also this home page I'm just logged out let me log in with an admin credential so now see I'm going to see the associate customer and also the user so here this CNT user else is showing so now if I'm trying to change this into manager I'm logged out I'm blogging within the CNT user so now additionally I am able to see this customer also okay now if I'm trying to make this end user as the admin at the same time I'm trying to login with an interview sir so then I have the complete access okay now we are in the end of part 1 video so in this part too as I mentioned we can do this complete role-based authentication this functional device add edit view delete so in this video also we implemented the role based rather authentication but it is the menu ways so let me show you if you are checking in this db.json it's in this particular role we have Ascend only menus so Hereafter we will have some additional four properties have edit have update have view delete so these functionalities also we are going to include and in this video I just provided the hardcore data be not handled these data from our UI so in this next video I am going to provide one more admin panel for assigning this roles okay that also going to be really interesting so still if you have any doubts or clarification please post in the comment box and also please don't forget to subscribe my channel thank you thanks for watching please stay tuned for my next video

Channel: Nihira Techiees

Views: 6,933

Keywords: angular authentication, angular authentication using ngrx, angular 16 authentication, angular 16 authentication using ngrx, angular authentication using json server api, angular ngrx examples, angular real time example, user registration in angular, login implementation in angular, sidenav menu bar in angular, angular examples with Material UI, angular role based authentication, user role assignment in angular, nihira techiees, dynamic menu creation in angular by role base access

Id: jrp1djz0H6E

Length: 144min 7sec (8647 seconds)

Published: Mon Sep 18 2023