#4 Login Register authentication in React using Node JS Mongo DB-2 and JWT Token | Learn MERN Stack

hello guys welcome back to the debug arena in the previous video we have successfully made this register form functional like we can now easily create a new user in our mongodb through node node.js and react.js now in this video we are going to login to the email and password so without any delay let's get started [Music] so first we have to go to our node.js file like you can see here here we have created our register function now we will create our login api app.post method will be post it will be like login user okay so the first thing is what we are getting from the website we are getting email and password so let's take them after that the first step is to find whether that user exists or not so we will check if user exist or not user dot find one with email so it will return that whether you exist or not so i can simply copy this but the condition will be different like user does not exist then i will return something then user not found okay so the first step is done now we will take our password and compare it but if you remember we have encrypted it so first we have to decrypt it and then we have to move forward also we are going to use json web token to generate a token if user has been successfully logged in and after that we will be able to get user details to that 2k token so the first thing is to install json web token like i will just write npm install json web token restart your server now here we have to import that uh web token so i will just write then give the name of jwt so it requires one jwt secret so we will just give this and it is nothing but a random numbers so you can just give the random numbers characters so it will decrypt using this you can just give anything okay now just save it come here to your login function so the first step is to decrypt this password decrypt our password so i will just do that first we have to use await because it might take time we will use compare to compare our password and the password we will get from user now what we will do we will just do cons token this is the token we will use the function of jw to sign so it will just sign in and create a new token and we have to pass here jwt secret so now what we will do it will create a token with this our random digits if user has been successfully logged in or logged in then now you have to handle it like this because in this it will return like status so we can handle it properly 2-0 means means you have been your request has been successful and also we will pass our token we have to return error okay so you can see here the first we are getting email and password then we are checking whether the user with that email exists or not if exist then okay if not then it will return this after that it will check for password but if this all these three fails then we have to return return the response like uh password incorrect or something like that because that is the only case remaining so this is done i think if we face any error we can solve it in the way let's go to the our react.js code we will go to the login component i will quickly make all the states will forward the video so okay now i am done with making states and also i have made the function now let's fetch that api fetch our login api so i will be using that api only just changing the body inside body i will just pass email and password also i will change the name of the api and my name of the api is login user okay so let's go your login user let's save it go here refresh it [Music] click on sign up [Music] and you can see here in console that yes it is showing okay it means i have been successfully signed up you can just show your alert or something that you had been signed up now let's try to login [Music] i will pass here my email and my password just click on submit and you can see here that we are getting status as okay and also we are getting data and inside data this is the token by using this token we can easily get our users data so we will also see that in this video only to now let me explain you what i have done here so this is my login api first here i have collected email and password i have checked here whether that email exists or not after that i have compared the password with my user password and also if this is true then it will generate jwt token with the use of my jwt secret like this is my random secret okay now if all these things are done then it will show us that uh it will return us the token so in this way you can easily perform login now we will also try to get the user's data and try to get to the other screen when we have been successfully logged in so let's do that okay so i have quickly made this ui like when the user is successfully logged in he will see his details so let's make it dynamic for that we have to make an api go here let's make a new api to get user data so we will get data only through token so we will receive only token from request dot body okay now you strike catch high blue block okay inside this first we have to verify whether this token is true or not so we will just write like this jw jwt dot verify it will verify our token with our jw uh like secret jwt secret so we can just write like this okay if this is true like uh if this has been verified successfully then all the users detail has been stored in here now what we will do we will just write here user email is equal to user dot email so it will access the email of this and now we will just find this email so now we will just find user with this email so user dot user email so i hope you are getting this like we have first verify it and once it get verified it stores the value of uh users so we we are accessing it and now we are finding the user and if user is fine found successfully then we will use promise data and now we will just get dot send status okay and inside data we will get our data and if not then catch okay done so now let's see whether it is working or not go to your code so this is my like oh wait a minute okay this is my user details here i will call a fetch function inside component did mount paste it and i will just pass here user data and i will pass here token from your token okay and we will just get data user data we will say user data but our job is not done yet like when when we are login then we have to redirect to this screen so we let's handle that and see your data so if we can write here if data dot status is is equals to okay then we will first alert now when we are successfully logged in then we are getting token so we have to store that token so that we can use it in this screen so let's do that i will store it in window dot local storage local storage like i will give it token and inside here pass data dot data because inside this data there is another data which contain my token also i will use a year window dot location i think it is like that dot href and it will transfer me to user details is it like that only yeah it is same okay so now it makes sense now let's try to log in to ken is not defined okay where okay user details ken token is not defined so we can easily get it using window dot local storage dot get item token so now this makes sense go here go back refresh it test your email click on submit and i think let me just console see what is happening here okay data is okay but i am not redirecting why this is because is that something wrong login component i have written data dot okay status spelling error let's go here refresh again enter email that's at the right one when i click on submit you can see there is a login successful and then click on ok window dot local storage is not a function okay let me see that okay i have made mistake here i haven't written this set item okay now let's refresh it again same login here click on submit okay i am getting login successful okay and yes it is redacting also and we are getting data but as null okay like at least we are getting it so we can figure it out now let's see why we are getting data as null let's go to the api and i think he is not finding email so let's just console what we are getting in user so i'm just consoling it user save it go here refresh it come here and you can see i am getting only i80 okay okay okay sorry sorry so when you are login now you have to pass here all some like of your details any of one detail so i will just pass email dot user dot email so now it will make jwt secret with your email like your uh jwt secret will contain your email after changing this you have to make new user so let's go here go back here and now let's create a new user i will just create like vikram [Music] click on sign up okay let's go back okay when i click on submit [Music] okay let me console and i think i'm entering the wrong password yes so let me enter vik and you can see here i am getting login successfully when i click on ok i am getting here and whether i am getting user data yes i am getting my user data so now in this way you can successfully login and also get your user data now let's quickly show it in yeah here in this screen go to this user details um okay i haven't created the state let me create a state let me create the states super fast okay now let's store the user data on that this dot set said user data will be data dot data now let's access that this dot state dot user data dot fname and here i will access email so this dot state dot user data dot email save it come back here refresh this and you can see here i'm getting the name as vikram and we at the redgy.com so in this way you can easily convert your static website into the dynamic one like you can create a new user you can login to the website and also you can show your user details so that's it for this video and please let me know in comments whether you like this video or not i will be uploading the code to the github and the link will be in description if you found this video helpful then please like share and subscribe thank you

Channel: The Debug Arena

Views: 27,478

Keywords: how to do login and register authentication in react node js, login system in react, login system in node mern stack, login in mongo Mern stack, How to do login in react, How to register in react, sign in sign up in react, sign in sign up in node, How to make sign in page, how to make sign up page, User authentication system React login, node login, mongo login, login and register in react, login in react, register in react, jwt token, how to get user details

Id: 6oTDAyuQ5iw

Length: 17min 44sec (1064 seconds)

Published: Sat Jul 16 2022