NestJS API Authentication using JWT Tokens

in this tutorial we'll build an authentication system using net js before we build up i would like to remind you that this video is meant to be combined with other videos so if you want to use nest with angular react nexjs view not js or zvelt i provided some links in the description of this video also make sure to check scalablescripts.com now let's build the app so let's start creating the project click documentation and we have to install the sjs cli already did it so let's create the project nest new i'll call it nest auth and a lot of lag here skip git because git will color all our files and i don't want that i'll select npm and let's wait till it's installed so the files are generated i will open now it with my ide i'm using phpstorm here so you can use visual studio code is the same now let's run the project open the terminal and run npm run start dev so this will start the server also it will watch our files for changes so let's see the port that he is running so it's running on port 3000 localhost port 3000 we can see here hello world so it's working fine i'll make some changes now i'll remove the spec files here i will change the port to 8000 because that is the port the the that the front end will use now it's complaining about my styles here and i will remove here the in dot eslint rc i will remove all these recommended styles you don't have to do that if you follow the styles i format it differently so this is my preference also is not required now let's restart the server because we changed our port and now we will listen to port 8000 so it's working the same now this message we get it from up controller or where we have a get method get hello and this calls an app service here that this service will return hello world here so this is our main controller and service and app model will wrap them all now we want to connect with the database already connected to my local database which is an empty schema if you don't have phpstorm installed you can use mysql workbench now let's go to the next js documentation and search here type orm so this is not the page this warning we should click here so this is the right page for us and let's install it this is the command i will open the terminal and install this so let's wait till it's completed and after it's completed here in the imports we'll add type or m module so we need to import typo model from net js type or m we need to add four root here actually we can copy this i'll copy this and i will add it here so the connection is mysql host localhost port 3306 username root and password is root root database youtube nest out so these are my credentials and you should use your own credentials now we need to add an entity so we can populate the database so let's create here an entity user entity and let's export class user here we need to make this an entity and the inside entity is the name of the table i'll name it users so this will be the name of the table and this will map the table values so this 11 id is a number a name as a string email as a string and password as a string so these are the columns that the table will have and we have to add a decorator for all of them so this is the primary column so we need to import that from typorm also this is just a column and these are also columns but for the email we have to make it unique so to make a unique column we have to add it like this so this is our user entity and now we have to add it to our app module.ts we have to add user here so i added user entity and when i save it will create the table in our database let's see so we have users here with all the feeds that we added also the email is unique so we added everything that we need now let's try to create the register so i will remove this function and add another function here yeah i will make it asynchronous and i will call it register and this function needs a post request to register also so let's import also post in sjs common here also i want to add an api as a prefix here but there is a better way since api prefix will be added for every for every endpoint we can add it here directly so api here and this register function will be aps slash register now when we send the request we'll send the body so the body will be the data that we will send along the request so there are two ways to get the data from the body one is like this so every data will be stored in this variable and the other one is getting each data individually like this body name name as a string body email email as a string embody password password as a string so there are multiple ways to do it i will do it like this because i won't add validations but it depends on your app which one is better for you so now we got all the variables so we have to create a service in order to register our user i won't create a service because we have app service here and uh i will remove this get hello function so to make this service work first we have to add the constructor here and inside we'll add private so before private we'll add an inject repository decorator and inside we'll add our entity so user entity here so we will inject a repository and this is private read-only user repository will be a type of repository of user like this now that we injected this we have a lot of functions that we can use to our advantage so the first one is reducer and this time we will pass the data here so let's pass the name or i will get the data as any here and we want to return the creation of that user so this user repository save the data just like this i'll change the name here not register i will make it better create and this will return a promise of user like this so we created our first function and now let's use it to our app controller before using it we have to hash the password so to ask a password we have to install first bcrypt so in the next js documentation we have hashing encryption and hashing in security let's install bcrypt install it and also install the typescript version so let's install this also and we need to import it like this i'll copy this and i will import it here on top now let's use bcrypt we'll create here a variable hashed password will be equal to weight decrypt hash will pass the password and we need the salt rounds i'll put 12 doesn't matter and we asked our password now we can register our user so we can return here this app service create and we will pass here the name email and the password but we should do it like this because we change the name so these two variables have the same key and the value but this should change now we have to test this endpoint but to test it you have to install first postman i already did it so i will open it and now let's send the request a post request to http localhost port 8000 slash api slash register now click the body and we will send some json so we need to send a name i will name it a email ata.com and the password a so let's send this request so we have a error let's see what is the error it seems that we have a problem with the user repository so it's not knowing this user repository so we can do it like this now we'll add typewirem module here for feature and we will pass the entity inside which is our user so this will now we don't have any problem this will add the user repository to the app model so this is just for configuring the com the connection for the database and this is for configuring the user repository so it will add the functions to query our user with this let's send the request again and we have an internal server error let's see again the error field id doesn't have a default value so probably i made a mistake in the user entity so i know the error i made a mistake here this is not a primary column but is a primary generated column so this was my mistake it it can be confusing sometimes because the name is similar primary column it means that this field is a primary key but it doesn't generate the primary key so we have to generate it and primary generated column will let it to mysql to generate that primary key so with this let's hope now everything works and indeed it does so we registered our user since we returned the id of one so this was the registration now let's add the login so add here async login and we need to post here to login the login will have an email and a password so i'll copy it from here and what do we want to do now first we have to get the user by the email so we will go to our app service and we will add the function find one and i will pass a condition here as any and we will return this user repository find one will pass the condition like this and this will return a promise of user so we created this functional so we can use it for up controller and now the user will be equal to await this app service find one will will pass the email here and we are done so i should have renamed this app service to user service but it doesn't matter so normally the service that gets the users should be named user service so we got the user but let's add some validations if the user is not set then we will throw new bad request exception user or invalid credentials so we should not return the error that tells the user that it's the email or the password so this is more secure like this so if we go here it means that the user is not found now if we pass here it means that the user is found now we have to check the password so to check the password we will call bcrypt again so i'll make a condition here again here if a wait be crypt compare the password with the user password like this so if i will add an exclamation point here if this is not the same then we have another errors which i will throw the same error so both these errors are the same and the user won't know which is the problem the email or the password and after we pass here for the moment just return the user and let's see it on the browser so i'll copy this send a post request to login and we'll send some json email ata.com and the password is a now i'll write the wrong email and we have invalid credentials the same will apply if i change the password again here so it is the same if everything is correct then we return our user we have to generate a jwt token to return it to the front end so go to the nest js documentation and in security authentication go to jwt functionality and install this packages so let's install it here we'll install password jwt and i will install it here so this is a typescript version so now that we got it we have to inject it like the jwts service so let's inject it here so we will inject now private jwt service jwt service and now we have to sign in a token so we have to generate a token and to do it is very easy i'll create jwt here which is equal to await this jwt service sign async and we'll pass the data that we want to encode and i will send only the id with of the user so that's it so for the moment i will return the jwt now and let's see it on the browser on the postman again i forgot to add the jwt in the model here so we'll add the jwt model we have to register and we will pass some data some data the first one is a secret so this is a secret value that we need to encode our jwt so to encode the jwt uh the secret i will just write it secret here but usually it should be stored in an emv file it should not be stored like i did but i will keep it simple so the next parameter that we need assign options and here we'll add the expires in how much time do you want the token to stay so i will make it one day so the token will be alive in one day let's send the request again now and we got a jwt so everything is successful now the last change is we want to store this jwt in a cookie which is http only so let's do it now we will add here the response so re response is short wrist like this response as a response and we should manually import the response from express so import response from express here this response will have also another property which is pass through to true because we want the cookie to send it to the front end and the only way to do it is to add this pass through to true so response here cookie let's create it so the name will be jwt the value will be jwt and we will add an option which is http only to true this means that the frontend won't be able to access this jwt only the backend will use that jwt and now we don't want to return the gwd we'll just return a message success and that's it so let's send the request again we get the message success and we got a cookie here as we can see it is http only and now we have to use this cookie to retrieve our logged in user before doing that we have to go to our mind main.ts and here we need to add some configuration because it's not enough what we added about the cookies we have to add here up enable course and inside we need to add credentials to true so in order for the front end to get the credentials which means the cookie we have to add this pass through and we have to add the credentials to true here also we need to add the origin so i'll put one origin here which is a http localhost and here we need to po you need to put the port of your front end up so i have multiple front ends so 3000 is for react 8080 is for view and 4200 is for angular you just pick whatever works for you i'll pick 8080 it doesn't matter and now with this we completed the login now let's add the authenticated user so let's create the function user and we need to add here a method which is get user and to get the user we have to get the cookie first and to get the cookie we have to get it from the request so we will add here the request request is the request also we need to import this request from express so i'll add it here request so we got the request and the cookie will we will get it cookie is equal to request cookies jwd but this won't work so i will show you so let's return the cookie for the moment and let's copy this url paste it here get the user send request and the one thing to mention that the cookies will be preserved if we open new tabs the cookies will be preserved in every request and we got an error because we cannot parse a cookie like this we have to install another package and this package is cookie parser so go to techniques cookies and copy this cookie parser here copy also the typescript version and let's go to our main.es again here and use up use cookie parser like this also import the cookie parser here so with this let's send the request again i guess i have to import a cookie parser differently so import all s cookie parser like this send the request and now we go to the jw team so is the same as this value now we have to verify it and to get our logged in user so the cookie is retrieved now we have to get the data which is equal to await this jwt service verify a sync and we'll pass the cookie here so let's return what this data returns send request and we can see it returns an id an expiration etc so let's uh make the condition so i'll wrap this with a try catch so i'll use it like this once we have an error here we have to return we will throw an exception unauthorized exception so if an error happens we return unauthorized also if the data is invalid we will return the same exception actually when we throw an exception here it will catch it with a try catch and throw the same exception again so i will we will keep it like this so it is the same it doesn't matter and after we go here it means that we successfully retrieved everything and we have to query the user now so let's get the user which is equal to wait this up service find one and we will find the user by the id which is data id and in the end will return the user so let's send a request and we successfully got the user based on the cookie so now let's remove this password because i don't like returning the password of the user even though they cannot decode it it's not a good practice to return the password so what i will do right now is i will deconstruct the password and the uh i will call it response or result doesn't matter is equal to the user i forgot to add cons here and in the end we'll return the result so we will remove the password from the user and this will return this response i'll do the same for the register since we return also the password here so we will get the user again here which is equal to weight this and i'll copy this where is it and i'll paste it here so the password is removed so we have it's confusing with this password here so to remove it this way we have to use a delete user password and let's return the user like this so let's register another user to see if this works send a request and as we can see the password is not returned so we got the authenticated user and now let's add the last part which is logout so sync logout this will be a post request to log out we need to pass here again the response so copy from this we need also the passthrough to true and what do we want to do when we log out is really simple we just want to clear the cookie so response clear cookie jwd and that's it so let's return a message success so this is our logout function and i will copy this paste it here log out and we'll send a post request now we have the cookie here as we can see let's send the post request to the logout and we get message success and we don't have a cookie here and if we get the user we will get no cookie here and we'll get unauthorized so this is how logout works we can log in again here and we can get the user so this was our authentication i hope you like it and if you did please share and subscribe thank you

Channel: Scalable Scripts

Views: 13,614

Rating: 4.8055553 out of 5

Keywords: jwt, jwt authentication, httponly cookie react, httponly cookie jwt, httponly cookie, nestjs, nestjs jwt, nestjs jwt authentication

Id: 5rlsUfQTRzs

Length: 33min 54sec (2034 seconds)

Published: Mon Mar 01 2021