Angular 15 Authentication (Registration + Login + Role based access) using JSON server REST API

this is my first video in English 15 authentication using Json server as GPA so it includes the below topics the first one is registration and login screen implementation using Json server.jp and the second one is authentication with role-based access and the final one is user role assignment and also enabling and disabling the user access it can be done by only the admin user so before going to the implementation let me provide on shark demo it will provide the clear idea I put my video so this is my created application so if you are a new user just click this link it is redirecting into our registration page so let me complete on registration then password so finally we have to provide our email address okay see registered successfully please contact admin for enabling the access okay So currently if I'm trying to login let me show you okay see So currently we are in the inactive mode so once the admin enabled our access then only we can log in our application so let me log in using the admin credential okay now we are in the home page let me go to our user screen here we have populated all of our users information so we can see the finely registered information so it is in the inactive mode and our role also see it is in the unassigned okay so let me click this update button we can select the role technician and this active okay so you can save this one see updated successfully and in this listing it's reflected now we are in the active and our role is technician okay now let me log out this one now if I'm trying to give this user URL so it will be redirected into our login page because we are not logged in let me log in using our end user see so now I am logged in SEO one of the technician okay so now we have only this home menu we don't have access for our user so even if I'm trying to give this URL user see you don't have the access okay and also it is redirected into our home page okay great now we have completed our demo now let me move on the implementation okay so first we should have some plague request if you are using this angular 15 you should have the latest version of node.js the latest version is 18 so if you have the version 16 plus then it is fine otherwise you have to download the latest version and you have to install in your machine and the next thing is we have to upgrade our angular CLI so already you don't have angular Clan or machine just exit this command this is fine so in case if you have the lower version First uninstall using this command at the next install our angular CLA okay and the final one is installing Json server so exit this npm command it will install the Json server in automation so basically it is used for creating the fake rest GPU okay now we have completed our system setup now let me move on the application setup first we have to create an angular application so you already know the command right NG new and our application name so the routing is required and CSS so the application is created successfully let me open in our Visual Studio code see in our package.json so we have the version of 15. okay this is fine so the next step is I am going to install this material UI so this is for the designing purpose so the latest version 15 is available so we can install this one we can choose the theme typography yes and enable animation okay great the installation gets completed the once our installation completed please check in your package.json so this is our package and make sure you have to confirm the version also it should be a 15 okay and we can create one common model for the material UA material dot model because in our material way for each and every component we have to invert the model so we can include all the required models in the same place finally we can import this file into our app dot model file that's what my plan so here we can include some commonly used in components so while typing which is not coming we have imported manually first I am going to include some Farm controls okay so this is for the input control and next we can have this select from card radio button and the check box table page Netter then table charting and the dialog box the similar way we can change the model also okay the mat card model because these are the one time chains okay great our material model is ready now let me Import in our app dot model so here this material model okay it is imported fine and in our app dot model I am going to import two more models so one is for using our HTTP Services HTTP client model and I'm going to use the reactive form so I have to include this reactive for model also so the steps are same if it is not coming we have to input it manually okay so the reactive forms available in this angular slash forms reactive for model this one okay and the next one is HTTP bit line models so it belongs to angular common HTTP okay fine okay this is fine and next I am going to install our toast alert okay ngx toaster so this is for showing the traditional notification okay we are getting some error so let me remove this save okay great now the installation gets completed then in the configuration point of view I am going to import the toaster model here I mean in our app dot model so in our import section I just added including this for root also okay and The Styling point of view we have to include on CSS file also so let me go to our angular.json file see in the style section so we have our material uses and our default CSS so finally I'm going to include one more thesis for our toaster alert okay okay now we have completed the basic installation now let me start over Json server API see currently we don't have this db.json file that's what it's created on new file and it includes some default functions so let me go to our file okay we can remove everything so let me have only one function okay user and removing the all existing data again our Json server is fine it is running in the port number of 3000 okay so let me open one new terminal so next I am going to create the required components and the services and other supporting files so my first command is for the registration register so the next one is for login screen and the third one is for home or dashboard and the final one is for user listing okay this is fine actually I have to create one more component that is for our pop-up date pop-up okay okay the comments are created next let me create one services NG generate for the service I have used the short form is yes my service name is Arch service okay authentication Service okay the service also generated now let me generate one guard file that is for our authentication purpose so we can use this can activate okay fine now we have created all required files let me map the components into our routing side so in our app.routing model so in this route section we can include all the routes one by one first one is CMT this is for actually our dashboard the component I am going to use our home command okay the similar way I am going to map three more components but the second one path is register the component is register component and the third one is login the common in this login component and the final one is user okay user listing component the routing also done now let me run our application okay application in running mode let me open in the browser before the basic template is there let me go to our app component we can remove some of the items so instead of this content let me remove everything see now based on our routing the homeworks is coming now let me include some Styles okay and in our app component we can move this router Outlet inside the content and this style so let me go to our home page I mean our home component okay now somewhat fine now let me go to our registration page we can complete the registration from salty first so in this registration component I am going to have one Constructor first here let me inject our farm Builder okay if it is not coming let me import manually okay these all items are comes from the angular forms and the validation purpose we have to use this validators also okay fine now let me Define our registration form so the first field is id id is nothing but our username so this field is required one I have to include one more validation so let me use this validators.compose option so the first validation is for the required field and the second one is for the maximum length Okay so at the minimum length minimum length should be 5. and the similar way let me clear the next field name so the default value is empty and the validation is required validation okay and the next one is password and the third one is email and the fourth one is gender I mean fifth one add the role so the final one is exactly okay this is all about the status field so it's the default value is false it's a true or false scenario only and this role for the registration screen I'm not going to use this field so let me remove this validation also and the gender the default value we can have the mail okay here also let me remove this validation and in this email field uh we have to include one more validation so let me go with this validators.compose option the first one is required field and the second one is this is the email okay the same way in our password field also we can apply so it is the required field and also we can have the specific pattern the pattern should be like we should have one capital letter and on small letter and a number special characters and minimum eight characters that's all about our validation I am having one pattern the handy manner let me use here okay now we have initiated our forms and the next three let me create one function proceed registration so here first I'm going to check the form value if it is valid only I am going to allow else I have to provide the notification okay for having the notification we already installed their toaster NG toaster so let me inject our toaster service here so we can give the warning please send the valid data if you have the valid data we have to call our services so let me complete our service also so this art service let me inject the HTTP Client First so the first method is guitar and we have to pass over AP URL this user okay so this is the guitar matter the similar way get by code and the final one is registration okay so actually this is the post method so it is having two inputs the first one is over AP URL next to our data okay and finally I'm going to create one more method this is for updating our user so actually this is the put method so we have to pass the key value okay we have completed our service side let me go to our registration component so in this Constructor let me inject our services and once it succeeded we have to redirect it into some other routes so let me inject our router also here we can call our services so let me subscribe it so once we succeeded we have to provide the success message registered successfully and we have to provide a message please contact admin for so this is actually my concept that's what I am doing like this so once the registration completed we have to wait for the admin approval that's all about my concept here and also we need to redirect into our login page great the coding part is done let me move on the designing side okay so as I mentioned we are going to use the materially way so let me go to the material website so in the common section we can take the input so let me take the first one and also let me take the card so let me move our form into inside our card content let me include one header also so user registration and our first field is username we can remove the default values let me use the form control name so before that let me include the form okay farm group so farm group is nothing but our registration firm and also let me include on the event okay now it is fine so now let me include our farm control name so the first one is ID so one field I have added let me check the design if it is fine we can include all the fields one by one yeah it is somewhat fine okay and this one is for the name and the third one is for password and the type also it should be password and the next one is email and the role uh basically the user don't have the access for selecting the role so that should be done by the Admin side and finally we can include the gender okay for the gender let me use the radio button here so let me take this one add in our form control name is gender okay okay see the design and finally we have to include the buttons right for the button purpose let me use the matte raised button so we can select these two items submit and the next turn is back to login so here instead of the button let me change it to Anchor tag and we can use the router link okay login okay it is not coming in the good manner yeah so actually in this material model I have not included the button that's what it's coming like this matte button model okay see now it is fine so if I'm clicking back to login so it is redirected into our login page okay so if I'm clicking please enter the valid data admin and the name is admin user and a password test dollar one two three okay if the condition is matched then only it should be enabled and the email also if I'm giving it won't access .com for the gender let me click this submit button so registered successfully please contact admin for enabling the access so let me check my db.json file so this admin and admin user password email gender okay so the first one I am enabling manually because this is the admin user the role also I'm providing admin so let me save this one so next we can complete the functionality of our login screen for this login screen we can start from the designing side let me copy everything from here just replacing we can change the text user login and we can have this username and our password okay other fields are not required here and this form also let me change instead of this register form I'm going to change this into login form and proceed login okay and this form control name I'm going to give username and password now let me copy this same Constructor we can use here because most of the items I'm going to use it here foreign items let me copy everything because everything is needed right this Farm Builder validation router toaster services and our art Services everything is required okay now let me Define our form I mean our login form so as I mentioned our first field is username so default value is empty and we have only one validation required and the similar way we can have our password also that's it next our login functionality let me copy the same function from here and let me change our function name proceed login so instead of this registration form we can use our login form and Hereafter we have some difference okay so let me comment everything it's unnecessarily I called so here actually I'm going to call our get by code function only username let me declare one variable user data so this start user data equal to the response okay so let me add this response into our console So based on that we can proceed our functionality okay why the design is not coming yeah I have to save the page okay this is our login screen so admin sem test see we are getting an object and we can get all the information okay so first what I'm going to do uh let me check this password into whatever password I want provided so this dot uh userdata dot password if both are fine we can go further other ways I have to throw the error message invalid credentials okay and if it is fine I am checking the next condition this dot user data or the effective if we set equal to true it's a positive scenario okay else we have to provide the same error message inactive user the message should be please contact admin so if it is a pass scenario let me include the username in our session storage and also I am going to include our role username and user role and I have to redirect into our home page okay so let me format it so again admin see it is invalid credentials positive scenario it is redirected into our home page and also we can check the negative scenario also admin so manually I'm just updating this true intervals okay admin so the credentials are fine in it user please contact administrator so let me Mark this into true so here instead of back to login let me change the link new user so if I'm clicking this one it is redirecting to registration base the same age is coming here okay so the next thing is we can Implement our basic authentication using our add card for doing this one let me include on method in our service side use surname not equal to null okay and the same way I'm going to create one more function get user role if it is not equal to null the whatever value available in our system we can return it other ways we have to provide the empty value okay now let me go to our add card so it is inside the folder of card so here also we can have one Constructor so the most of the item we can insert here also okay so the first one is our service and the next one is our router and the third one is the toaster okay it is not coming let me import it here so here the first condition check is is logged in so if it is logged in it is fine else we have to return files at the same time we need to redirect it into our login page okay let me format it and our wrath card is ready now let me include in our app routing model here I'm going to use the scan activate it is actually array part card okay so the same thing we can apply for our user screen also so now if I'm trying to go to our home page oh it is going what happened yeah actually in our session we have some datas okay so actually I need to clear it so in our login page uh Constructor itself I am just clearing our session storage okay first I'm going to over login page now if I'm trying to move our home page it is redirected here if I am trying to go to our registration page it is fine at the same time if I am going to our register page I mean a user base it won't allow it is simply redirected into our login page okay once I'm logged in okay this is fine and the next thing is uh we have to include the links in our headings I mean in our header our app component foreign ly we have this welcome text after that I'm going to include one link is for home and the another link is for the user and we have to include this router link also user this one is the empty okay and also I'm going to include the logout link see I can move to the user page then home page you can click logout it is coming now actually I'm in the login page okay this login page under the registration page this menu is not required so once I'm logged in that time only it is required otherwise it is not required okay so for doing this one uh let me go to our app component only so here I'm going to implement the life cycle hookup do check and also let me declare one variable so the initial value should be false and next so here we have to get the current URL for doing this one let me use the router the router is useful in many places actually current URL equal to so let me check this current URL not equal to login and the register if it is login or register it is not record right else so is menu required true other ways it should be false now let me take the variable here and let me include in our app component okay see the menu got removed Even in our login page also but if I'm logged in so the menus are coming you can be logged out it is got removed okay so next we can Implement our user listing so let me go to the component user listing so here first we can have our Constructor let me inject our services same Arch service only and I am declaring one data user list and next I'm creating on function here I'm going to call our services Sunday our guitar function it is actually returning all of our user information so what our response is coming I am adding into our user list variable okay and let me format it so in our material way we can have this table option so let me take this example with the pagination let me copy the whole code we can include here and next let me copy the TS code here so in this TS side I am copying this display columns we can Define our columns so our first column is username and the name email status and finally we can have one action okay now we can map this display columns so let me copy this one username this is our First Column and the display name and from the database so actually we are getting the field is ID okay and before that let me Define this data source just let me import it here okay this is fine and let me take the second field okay name so this one actually fine and the third one is email and the fourth one status so before that I am going to include one more column role okay and the fine loan status so if it is true we can bind like active yields a negative okay and one more column we need to add so that is for the action so here I'm going to include on button so let me check from our register component foreign so let me log in okay here are not the data is loaded let me verify yeah actually I need to call this method in this unload orals in the Constructor itself we can call okay the data is loaded currently we have only one data the data is actually loaded okay and the second thing is we have to complete the functionality of bay generator and also the sharting okay so let me do one by one a matte paginator so this dot data source page Network so this one okay okay I hope the paginator will work uh for the testing purpose I am going to include some more datas so see now our page needer is working the first page it is showing fire record so if I'm going to the second page it is having the Wonder Card okay and the second thing uh in the first row it is having the role said mean but other users don't have the role okay it's all our empty so in this case uh we can give the name is unassigned foreign also so let me show you and in this three head side we can include matte short heater to see we have this starting option the same way I have to include for other columns also okay see now so the Sorting is included for all the column see this working fine right so now we can focus on this update functionality so already I have created all function here so actually in this update user I'm going to open one pop-up with the existing customer information so let me create one function here for opening this pop-up we can use this my dialogue so inside this open function we have to use our component for this one I already have created on pop-up it's updated pop-up okay let me call here update pop-up component and then we can include the properties so enter animation duration millisecond and exit animation duration 500 millisecond the width 20 percentage finally we have to pass the data so we can have an object okay so I'll probably opened currently we don't have any DSi so let me focus on the designing part and the whatever code actually we are used in our registration base the same thing here also we can follow and here so we are using this registration form the same thing also we can duplicate it here okay the error got result so here uh I'm going to show only this role and effective field other fields whatever data already we are having the same only we are going to use so let me remove these validations okay and for this role let me include this validation required okay and this effect is fine so in this space instead of this proceed registration let me change the function update user I just removed all the fields so even this one also we can remove gender instead of using this input tag we can use this match select option so the basic one I just taken and roll okay foreign list let me Define one variable and let me Implement one life cycle hook and also we can include our services so this dot service get user role okay so we don't have so the subscription is not showing let me verify okay actually I have to create one more function get all role okay so in our Json server we have only this user so we can create one more object for our role so let me copy this URL so now we know our component we can use get alter okay okay weight showing all the items yeah you have to save this so now see it is showing this user registration so let me change the heading update user and this one roll okay so we can say submit and we can change the center update and the final one is the close link okay for this close we can use from directory okay see now it is somewhat file and we have to include one more field that is for effective so let me go to our component section we can get this checkbox so we can trick very basic example that is more than five and this side table see this file so actually the thing is uh initially we have to load the existing data for example so if I'm choosing this admin or else this test User it's don't have any data but it is then active model so if I'm clicking like this show this active should be checked so in the role I am don't have the value so I can include one more option okay for the empty see we have this selectral option so anyway let me load the existing data so doing this one I have to get the user code so for example if I am clicking this one I need I am already passing this username okay that is supposed to get from our pop-up component for getting the data we have to use matte dialogue data matte dialogue data and we can have this mad dialect refers okay so first we can use this matte dialog data for using this one we have to use this inject option and our data type is scanning okay and next in our NG onit function I'm going to check like this dot data so in this data actually I'm passing an object see this user code this user code not equal to null and if it is not equal to m t we can call our get by code function here I am going to pass this user code and now we can set this value into our form okay so the first field is ID and the second one is name and the final one is effective okay let me refine this one so it is nothing is selected and we can select this one actually the status is active see it is checked so now we can complete this update functionality so in this update function first I'm going to set like so if it is valid then only we are going to proceed else I am going to provide the warning online okay so let me inject our toaster here see if it is valid uh we can call our services so it is expecting two inputs the first one is our username only and the second one is the object okay and let me subscribe this one so once it's succeeded uh we have to show an alert message foreign I am using this matte dialogue graph so let me inject here actually here we have to include the component also so the component is so this Dot and the dialect close so actually this will be closing our problem and the second thing is once I am close the pop-up I have to refresh the listing screen also that we can do from our user list component let me Define on variable pop-up so here after closed we can call our load user function okay so let me format it now we can verify this one just test one staff okay it is not reflected let me verify okay I mistakenly added here okay guys sorry for the inconvenience so next let me select this one making this interactive and the role is quality see both are got updated so let me update the final one staff see currently I'm having this only one is the NSN so I actually have two records okay so in this way our update functionality will work and the very important thing is so this admin uh basically we cannot modify that means let me remove this update option for this admin user only so let me include one condition here so in this listing component uh in this button section let me include one condition if element Dot not equal document or I'm getting some error see it is got removed for our admin user only so now what I'm going to do let me log out and I'm going to register one new user username is Rakesh and the name also Rakesh so registered is successfully so now if I'm trying to login I am unable to login basically so let me log in using my admin credential so the admin can able to see the newly registered user RK so see the role and actually it's not a symbol it should be an status so I will change quickly so let me update this one and rolly stuff and effective see updated successfully now let me log out once again so it's a invalid credential let me check in our db.json file so I have provided the password like this so see So currently I am logged in as you one of the staff user still I am able to see this user menu and also this home menu so as I mentioned this user menu is accessible for only the admin user so let me include some conditions here first in our app component is admin user so the initial value should be False only okay here I am going to check on condition so this starts our space okay service actually I'm not injected let me use it here get to user role this user will list admin means is admin user equal to true else it should be false now let me copy this one and in our button section see the user menu is commanded so still I am able to access using this URL okay so this one actually we can block from our cards okay so already I'm having one basic card so here what I'm going to do first let me identify the current menu so the menu is user means so then I will check the role so if the role also admin then it is fine so in case we have some other roles so then I have to provide the notification that we don't have the access and also I am going to redirect into our home page that's what my plan for getting the current domain using this activated snapshot we can get row dot A1 so the CLC scenario so in this empty path only we will get like this when it is true only and in this section first we can get the menu okay so basically this is the array so we can get the first row dot path so here uh basically we will get our menu the menu is user if it is not equal to user uh then we have to return true and if it is user we can check the role okay get to user role if the role is admin it is fine else it should be False only and as I mentioned let me provide on notification you don't have access and we have to redirect into our our home page see now I am getting this you don't have access So currently I'm in the OR home page so if I'm giving user URL say I'm getting this notification that I don't have the access and also I have to redirect it in your home page now if I'm trying to log out and I'm going to login using this admin credential so on time logged in I am able to see this menu and this user also there so I am able to access this one and still I am able to change the access for every user yeah actually I need to select this role also yeah it is updated successfully I don't have any restriction okay so if I'm logged out again if I'm trying to with a normal user oh invalid credential so actually I just forget it anyway let me take it from our db.json file sell the name in the home page now I can move into say this blocking that means it is working fine okay okay great everything is working fine so now we are in the end of the video 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

Channel: Nihira Techiees

Views: 97,795

Keywords: angular authentication, angular 15 authentication, angular 15 authentication using json server rest api, register screen implementation using json server, login implementation using json server api, angular 15 full tutorial, angular 15 for begginers, angular material UI crud actions, angular 15 crud actions using json server api, angular 15 crud using reactive forms, angular crud using material UI design, angular 15 material UI Full Tutorial, angular 15 role based authentication

Id: 0wXlkvYOK0w

Length: 89min 37sec (5377 seconds)

Published: Thu Jan 19 2023