Angular: Create Login Form & JWT Authentication | Realtime Chat App | 05/17

hi and welcome back to the next video from the real-time cloud app series with nest gas and angular this is video number five where we mainly deal with angular and vlog inform with jwt authentication so we are creating a login form of angular reactive forms to validate the email and the password when we make a request against our backend we save the jwt that we get from our backend to our local storage in the browser and we here like implement the authentication guard for protected routes in our application that checks if our kwt is not expired and if it is even existing in our local storage and we also attached a jwt to every request that we make against our backend so that we can authenticate against it then we have here our structure for this video as always so first we have a look at the video outcome then we read our user story for this and then we implement the user story and close it so let's have a short look at the outcome of this video so you can see here we have like a login form and we can go to register form that we made in the last video we can go back to login we can not access our private dashboard so for this we need a valid jwt and you see you get then redirected to login page if we now log in with the right credentials and this here is also validated so if you have something else that is not like an email then it says email must be valid and then you can hit login and then you get from our end like our token back so with jwt token here the access token and we are saving this to our local storage as necessary as strat key and with this you are able now to access our private route so the dashboard so when our authentication guard checks if our pwt token is expired or not if it is not expired you are able to access this route yeah and also if you remove it here and if you reload the page then it redirects you again back to the login page and if you have it stored in your local storage and you make like another request so it's now attached to every request that you make so for example which is totally silly but for this it should work well it should always be attached um so you can see here we now attach it as authorization token um directly to our request automatically so all the requests that we may later make in our private module um are automatically um yeah validated by the or there's automatically added the jwt token so that we can authenticate against our back end so let's have a short look at our story here for video number five for angular user login with reactive forms and kwt saving so our story is basically as a user i want to be able to log into the app with my credentials so with my email and my password the input data should be validated of course and when my provided data was correct when we returned jwt token of course from our nest js backend should be saved into our local storage on our browser and the authentication guard that we already have that is at the moment always returning false um for this private route should be updated so that it now tracks if there's like a jwt in our local storage that is not expired so basically we now make a login form we get a response from our backend deck with the jwt token we want to save this token in a local search for our browser so that we can always access it and with some with the package i think from out [Music] angularjwt we can check if the token is expired or not and so if there is a token our storage and it is not expired then we can with the off guard allow everyone to access our private space and if there is no valid credibility then we deny it as far as we are at the moment also do um yeah and then we can go on with this and we always or we also want to with every request that we make against our backend want to send the jwt token because you remember um when we try to get all our users we need to provide a jwt token because we need to authenticate ourselves against our backend so we can add this to our acceptance criteria so that we have now the criteria login form with reactive forms so we want to make log in from angular reactive forms we want to save the trade team in our local storage when we log in we want to update our authentication guard to check for the expiration of the jwt and if it's there and we want to send the jwt token every request that we make against our backend so that it knows who we are because there's everything attached and it is decrypted so we can then start very easily the first thing that we can do is we can go to npm angularjwt and this is what we want to use so that we even can use and first we can install it here so we cd into our front-end folder and then we just install it here and then we can read a bit through it so this library has like provides a norm http interceptor which automatically attaches our json web token to our every request with http client from angular so that we don't need to make a custom http interceptor so normally you would make an http interceptor you would get the token from your local storage and then you like um copy and paste um the whole request and add the bera silver trace jwt token to it so that you can afford authenticate to against the back end but this will do it automatically for us and for this we just need to install it what we just did and then we can also start our docker stuff and then we could also use it here standalone but we can also inject this into our app module here with wt module for root we can make a token getter this is like just a function where we access our local storage and then we can in our local search we can set or get an item [Music] so you can see it here there are always two value pairs so if we go for our local storage here and look it up for here for example then um you always have key value pair and then you can access it with the name so we could name this here whatever we want and then on login we have to make logwithsearch.item set our kwt token and name it for example with an access token and when this should work we can say allow domains for us it would be i think localhost 3000 disallowed routes we won't need for this um and then if you have like um jwt in your local storage it will always be attached for all your requests we can check this later also um yeah and we can also make great use of the here expired so this jwt hyper service will check if your token is expired or there and just return a boolean so for example if it is expired when it says two if it is not expired it says false if it is not finding a token in your local storage that is named like you named it here and it also returns um true um and so this we can very easily um build our authentication guard so we now have to wait till everything here is installed but we can already go into our front end here with another terminal so we cd into our front end and we can generate our work in our login form so you remember in the last video we made our register form here with email username password password confirmation and submit and for this we have like a very basic form and if you click on register you make a request against our backend with our user service and if everything is correct you navigate to the login page so that you could now log in and here we have some like getters for all the form controls from our form so we can start because we already have everything in our public module here we have like the med card module reactive forms module everything imported so we can directly start with our login form so we can also name this form which is from type form group from angular and this is like a new form group and then we can say we have here two values which is email which is from control with null and we have some validators we can use the built-in validators from angular so it is required and it should be an email so email pattern you could always add there some more and the second one that we want to have is the form control for password and that is also required so now we have our form we can remove the energy on init since we are not using it so we can save a bit of code and then we can also remove everything that we had here in our login component you can have a look at this finished no at the moment not and then we can actually to make it a little bit faster just copy and paste a little bit from our registration component and just format it and we can say here we want to name it register we want to go to the register page and then we can also copy and paste some as css or you can just copy and paste all of it so basically we name this from log into a twister and then we have like a container where we make display flex justify content center so that we center everything and we have a margin on all sides of 100 pixels and the min width is 350 pixels in our matte card where we want to display the form we have also display flex and column direction so that we have all the form fields beneath each other and not in a row and the form fields have a roof of 100 percent and should minimum the width of 300 pixels and our button should not be centered or on the left but to assign to the end of the line of the row so it is in its own diff which has a button class and then we say it flicks and so it should be at the end of the row so then we can have our net card title so this also comes with met cards and this should not be named a register but it should be named login and then we have our met card content which will be our form and here we don't need a username field we don't need the password confirmation field in the login form but we need our email field and our password field and this is basically the same so if our email is touched if the user clicked in it or has done something and we have an error required when we want to display the error email is required and the same goes if we don't um can validate the email and the second one is the same for password so if the password is touched and has an error that is required that his name required then we say password is required and the form is invalid so we need now to make the getters for this so we say get email and we want to return from controller and then we return this dot form don't get email as form control and we do the same for password so we say get password and we want to return a form controller my mistake from control then we simply say return this dot form don't get password s from control then we can have like a quick look here so if we submit our form we don't want to register but we want to log in so we have to create it and then we can simply say as before we only want to execute this if our form is valid if it's not valid we don't want to do anything and then we want to go against our login service or authentication service and that we now need to create so we can now have a quick look at our everything worked here so i think it's now starting up so with docker compose up and then we can have a quick look if we can see our login page so let's go to our localhost 4200 and this seems like it's not built right now let's look yeah it's generating still so let's wait for it so on backend is already there so we can with postman check for example that we are able to create a user so you see we have now created this user we are not able to get all users because we are unauthorized but if we log in and provide our will a trade wt token so this is what we want to attach also like we do it here then as we are talking to every request we also want to do this then in angular so that we were now authorized and can access all the data so you see now our angular application is built we can see if we reload we have here our login form we can go to register page we can register user and now we can try to log in with our password and at the moment nothing should happen because we are not going against the back end with a request but we go into inside you see it here inside was what we were logging out here if we hit our login function for our form so this seems to work we also have here form validation so this is a math spin email so now it's okay and password is also required so this seems to work good so now we can go on and make like our authentication service that we need to go against our backend um we could also do this in a user service but i don't know i feel like it's better um to abstract this into a separate service that we can name authentication service so for this we can say angular generate service and then we can specify the path so we are in the public module we are in services and then we want to have a off service and then you see we have it here we can make like a new folder for this and name this art service and then we have it here and yeah basically we are doing here just a post request for login at the moment later we can also log out but this is something that we want to have in our dashboard so in our private stuff where we are logged in so we say we need our angular http client and we can also use our snack bar from angular material that we already used in the last video and then we have here just our login stuff and here we get like the user so we need the user password and the user [Music] email and we want to return an observable and this is from type login response what we don't have at the moment um so we can copy and paste this since it's both a typescript directly from our backend um so we have our interface access token token type expires in so this is what we get back here from our login route and our backend see it here we get an object back with access token token type and expires in so we can just copy this and add this here to the models and say this is like the login response dot ts and we can actually dot interface and then we can use it and let's close it all here up a bit so now we are in our authentication service and here we want to return an observable from type login response interface so we can very easily say we want to make a http post request for our login where we get like a login response interface back and then we have our base path api slash users slash login and then we also provide him in the body the user and as you remember we already have your proxy json when we go against api we reroute to api 3000 and this api here is our service in our container zone docker so that we that is linked so that we have access to it inside this container so here we can then for example pipe this and then we want to save our login response our jwt token to our local storage so we can very easily save this first we have to import our tab from alex js operators so this will nothing change nothing our response we can just like click click in or go go to and do something and then but nothing happens here really um so it's not transforming the response so we can then say locate storage and we set an item now you see we have a key and a value so the key could be nest js cred app and then we have our value is our rs.axis token so we want to store our jwt here and then afterwards we can make another tab where we just display um like a little hint um for the user um that is login was successful so we can say this.snackbar.open and then we can copy and paste also a bit from here so we can say login successful we can name the button close and then we can specify um like the duration for two seconds horizontal position is on the right side and vertical position on the top and then this should be all i think we can save it and then we can simply access this service in our login component so here we can if the form is valid we can simply say this dot service so we first have to import our out service from our service and we can also use our private router so the angular router to redirect to the private page if it was successful so we can simply say here this dot of service when we have our login method and then we have to provide the email and the password so we can say email is this dot email dot value so since we are returning here like the complete form control we have to access the value and then we have the same for the password which is vista password dot value and then we can also make a pipe we can say tap and then we can this.router.navigate and we can go first two routes up then to private and then to dashboard and i think we have to part of a tab again from alex js operators and then we can see if everything compiles here well so if we now try to log in we can also open our console here and go to network so if i give him like a wrong password we can and this button could obviously called login so we rename this button to log in and since our service is like an observable we have to subscribe to it so it gets hot and then everything should work so we can try again so if we say thomas thomas.com and we take the password as something wrong that's not the password when you see we get 401 so we get unauthorized whatever we get an error and here we have like um now the real password and then you see we have like a 201 post and then this should normally redirect us yeah you see it's trying to redirect us but you remember we have our authentication guard here that is always returning fault so we are never able to access it on this redirecting us before so um you see it here in the routing module we have this authentication guard applied to the private route so that we are at the moment not able to access it ever but we can now check in our local storage if there's set our trade wt and you see it here we have our key and our values so like key value pair and then we copy this so our token we can go to jwtio we can like paste it in and we see we have here our user and the issued add and the expired time and now we want to make use of this oath of angular here so that we can check if it is expired in for our guard and that we can always send it with every request against our back end so for this we can very simply as they said here in the documentation import the jwt module in our ad module so we say jwt module dot for root and i think then we can pass in some stuff so here we have like a config and this can be allowed domains let's go to localhost 3000 and we have like the token getter and you can just have a look how they did it so this is just the export just function where they access the local storage we get item and we can just place it above here and then this has to be the same name here as we set it in our authentication service so we set it as necessary as setup so this needs to be the same so that it can find it and we can then simply say here the token getter is the token getter from here then we can save it and then we can see if everything works well so everything is being generated from angular and so let's have a look at our login page and then we can say thomas thomas.com and say password and we have our login successful but we are still not accessing the private route since our guard is still returning false so now we have to work in our authentication guard and here we can simply i think use the private kwt service that is also from this module so literally wt helper service and here we can check if the token is expired so we can simply say um if this dot jwt service dot is token expired so if it is expired so if this is true then we want to navigate my mistake to yeah to run it again against all the guards and we want to return false so that you are not able to access this route and if everything is okay we want to return true and you have to see this trailblatt token expired so we can just console or lock this out it's returning like a boolean value um and if there is no jwt token then it says also false but if it says true then it is expired yeah sorry if the token is expired then it says true then we say we want to return false and also if it is not finding a token it's also saying it's like like true so we also return false and we are not able to access it um otherwise we get like um false and then we can go to the page so if we have now look at our local storage and we have it saved here so then we can go to private.dashboard and then you see now we are on our dashboard page if i delete my token from my local storage and if i reload everything then you see i'm getting redirected back to login so if i now log in correct with the correct cadent credentials and you see my token is being set and i'm getting redirected to the dashboard and what we could also do is we could like go into our backend api in our authentication module and just change it here the expiration time to 10 seconds just for experimenting purposes and then you can see if i delete this token here i reload i'm getting redirected to login i can just say again password then you see i'm having here my token if i make a 5 everything works fine and now after 10 seconds it should redirect me since the token is then expired see now it is expired and this is yeah like i think this is like all we want so we changed this here back in our back end so that we are 10 000 seconds and then we can close everything so then this guard here is i think working as expected so if our token is expired or not there we get true and then we so we go into the if case and we return false so that you're not able to access our private route in our routing module here but if you're like um having a valid token then you're getting access um yeah and we actually don't need to really check if the token is really um here um the right token from our back end because um for the other requests that we make in our against our back and then in the new components in our private module then we always have to send our jwt and so if the jwt is from our back end is not being set with valid or this is from the back end then we get an error and they can't here can't display anything of data because the backend is not returning anything so we don't have to worry about this here in this case um and now we can just have a quick look if for our requests this token is always attached as the documentation here was saying so now we have here like a token and this should now for every always if we have like a token our local storage with this key here and this should be attached to every request that we made so also to our login request for example so we can make this request and then we can have a look if our post request and you see it here we have our authorization we have our bearer token and this is our jwt token from our local storage so this gets now attached to every request request that we make so now we can like remove i think we have here like a console lock statement somewhere so we can remove this and i think now we have like achieved everything that we wanted so we can check against our story so we have now a login form with reactive forms created we are saving our generality in the local storage we have update our authentication guide check for expiration of jwt and also if a jwt exists and we send the jwt token on every request so we can now shut this down and commit all our changes so we can say get commit get at a get commit m we prefix with video 5 and we say edit login form edit save jwt in local storage update off guard to track if tradable t is there and not expired attach creativity to every request against the api then we can push it and we can close

Channel: Thomas Oliver

Views: 815

Keywords: javascript, typescript, nest, nestjs, nest.js, typeorm, git, gitflow, node, development, api, observables, rxjs, nestjs7, bcrypt, jwt, authentication, git-flow, gitFlow, docker, docker-compose, pg-adminer, debugging, hot-reload, angular, angular material, angular lazy loading, material, realtime chat, real time chat, chat app, realtime chat app, live chat, live chat app, nestjs8, nest js 8, nestjs 8, NestJS8, NestJS, nestJS, postgres, angular 12, reactive forms, login form angular, register form angular

Id: XTGbg-9yN2k

Length: 36min 6sec (2166 seconds)

Published: Sat Jul 03 2021