Login Authentication in React Native using JWT Token || React Native, Node JS & Mongo DB Tutorial

hello guys welcome back to the debug arena in the previous video I have integrated no JS and mongodb with our react native application so that we can do registration in our application now in this video I will create the API for login through which I will log into our application and once we are successfully logged in we will see all the users detail at the home screen so without any delay let's get started just one more thing if you are a beginner and you also want to learn how to integrate nodejs and mongodb with your react native application how to do field validation in react native and how to create the registration API then you can go and check out my previous videos for login I will start with the backend this is my backend folder I will first close this let me explain you this quickly here Ive imported the express after that I imported the mongus here I have imported The BJs like when user will register in our application users are entering the password so what I'm doing with the help of bp. JS we can encrypt the password and at the time of login we are decrypting it to maintain the security This is My mongodb URL and this is the code which will indicate whether we are successfully connected with mongodb or not and if we are connected we will get this message here I'm importing my schema this is my schema like what are the details our user will contain and currently our user will contain only this much details and this is my registered API where I'm getting this much value from our application here I'm checking whether the user with the particular email exist or not if user exist then he will not be able to do registration in our application and here I am just registering the user so now let's create the API for login let's go below I'll make some space here we can write here app method will be post and my API name will be login user after that I will write call back function with the sync and it will accept request comma response if you also want to learn all these things then you you can go and watch my previous video after that for login we have to accept email and password from user we can do that using request. body so I will write here const email comma password is equals to request. body this thing we will get from our react native application now the first thing after this is that we have to check whether the user with this email ID exist or not and we can do that like this I'll create a variable name as old user here I will write await and here I'm going to use my schema which is user and this schema I have already imported here like all the registered user at my mongodb are being stored here so I can access that then I will just use a method name as find one and I will try to find a user with this email ID like this so what this will do it will try to find the user with this email ID and if it finds that user then it will store all the users details inside this variable so we are going to to access that now I will write a condition that if my old user is false like if it doesn't find here it will return as false then I will return here response. send data user doesn't exist like the first requirement for login is that user should be present in our mongod DB and if user is not present then we can validate that with this condition that's it for the email now let's try to validate the password at the start only I have told you that at the time of registration we are encrypting the password so here we have to decrypt it for that what I will do I will write condition here await I will use bcrypt do method provided by it name as compare and what this will do it will compare my current password which is coming from my react native application with the old password and from where I can get the old password from here like if user with this email ID exist then all the users data will be stored here so we can access that using old user do password now if this password and the password entered by user at the time of registration matches then it will go inside this block and here what I will do I will create a token and with the help of that token user can fetch the users's detail for that we have to open the terminal and here we have to install one package name as Json web token I hit enter and it is installed now let's use it I will come at the top first I will import that I will write here JWT is equals to require and inside this I can pass Json this will help us to generate token each and every time our user register in our application and that token will be unique and that token will contain the users's data in the encrypted format after this I will create a unique variable name as J WT secret and here I will assign some random alphabets and numbers like this okay it should be JWT secret okay done now I will go to login API now here when the password entered by user is matched with the previous password we will create a token here and we can create token with the help of JWT dot a method provided by it name as sign and in this I will store my users email so this will be stored in the encrypted format so at the time of retriving the users data we can use this token to retrive users. email and it will be encrypted with the help of JWT secret so what this line will do it will try to create a unique token every time with our users email inside it but we will not be able to see it so with the help of this token we can retrive our users details now once we generate a token and if we get response status s201 which is successful then I will send response back to user which will be return response. send status will be okay and in data I will pass that token otherwise I will pass error okay done now let's call this API from our reactnative application okay this is my application and this is my login. jsx here I have two input Fields you can see here one is text input name is mobile or email and one is text input password and here I have created two states email and password and I am storing that value inside that here onchain set email and onchain set password so now let's create a function that will be called on this login so I'll write here function handle submit and here for now I will just console.log email and password I'll come below and at this login I will call that function on press we call handle submit let's save this open CMD I will enter some Mobile password I will scroll up click on login and you can see I'm getting that okay you have noticed here that when I clicked on this login the keyboard first closed out but this touch was not applicable so to solve that I'll come up and here inside scroll View I will add keyboard should persist tab to always and now when I press on this login I'm getting this cool now let's call our login API here for that I'm going to use exos so I will write here xos dot post and here we have to give the URL and URL will be HTTP and after this we have to pass the IP address so to get that I will run CMD here I will run ip config and this is my IP address so I will copy this will come here I will paste that after that I will write the port number where my nodejs server will be running so it is 50001 and after that I will pass my API name which is login user here at the top I will create a variable name is user data which will contain the object containing email and password email will be email and password will be password we can also write like this so this email is referring to the variable which we have created inside our API that is this email and the second email is referring to the value which we are storing inside this state and if both these names are same then we can also pass a single name like this and here I can pass that user data as a response like this now once this is post I will just write here then to get the response and we can get the response like this console.log response. data I will remove this now I will save this I will go to my nodejs I will open Terminal I will start my node application by running node modon app here I'm getting nodejs server started database connected that means we have successfully connected with mongodb now let me first try to register a new user so I will write here new user then I'll press on register and here I'm getting user already exist so here I will give com again I will press on register and here I have got register successful and I have been navigated here now let's try to do login g.com I will enter the password I will Press On on login let's see the response and here I'm getting property exos doesn't exist oh I have not imported it let's import I will save this I will open this click on login and you can see in the response I'm getting the data and inside data we are getting this token and we are getting status is okay that means we have been successfully logged in so this is working totally fine now once our user has been logged in we have to show the popup that user has been logged in and we have to navigate to the home screen so let's do that for that I will come to my app.jsx here I have implemented this draw Navigator and the stack Navigator you can go and watch my previous video if you want to integrate draw and the stack Navigator in your application so now here I will create another route which will be stack. screen name will be home and here I will pass my component which is draw Navigator and done now I'll go to login here you can see I'm getting this data response. data now here I'm getting the response so what I will do I will write here if response. data do status is equal equals to okay that means our user have been successfully logged in then I will alert do alert let's import alert and I will alert logged in successfully not only this I will also navigate the user using navigation. navigate to my home which I have just added and it will take it to my draw Navigator and for this navigation I have already imported this use navigation hop I will save this okay now let's try to do login so I will write here ad1 atg.com I will write password Here other at123 I will open the CMD I click on login I'm getting this data with the token status is okay logged in successful and when I click on okay you can see it is navigating to our home screen this is my home screen where I have implemented this draw Navigator and also I have implemented stack Navigator so if you want to learn all these things then you can go and check out my previous videos now the only remaining thing is that when user logged in in our application here we should get the data of our user so let's do that for that I will go to back end and create the API to get the data I will close this for now I will come here let's create API it will also be of post its name will be user data let's create a call back a sync request comma response and at a time of login only I have told you that we can get the users detail after login with the help of token so to get the users data we will only require one thing which is token and this thing we can get through request. body here I will write try and catch block and inside Tri block I will create a variable name as user and we are getting the token so let's extract data from it and that we can do through JWT previously at the time of login we have done sign here we have to do verify and what we will verify we will verify the token which we are getting from user with our JWT secret if it matches it will return us all the users data so we can store that data inside this variable name as user email and I will write here user. email so we will get the token from user here we are trying to verify that token with our jwtc crate and if it is all good then we will store the users data inside this variable and here we are extracting email from it now with the help of this email we can find the users data so I will write here user which is my schema variable do find one and here I can pass email which is my user email and if everything goes well then we will get the data inside this data variable and then we will return a response response. send first we will send status which is okay and with the data we will send this data at the place of error I will send error now I will save this I'll go to my application code now here I will go to my home screen which is this hesc screen. jsx let's create a function which will be called inside use effect because when user logged in successful he should get his message so this function should be called automatically and that thing we can do inside use effect so here I will write like this then I will call exos Dot post and we have to pass the URL I can get the URL from login and my API name is user data now here the question is how will I pass the token like we have got the token here but we cannot use it here so to use a token from here to there what we have to do we have to take the help of one package name as react native async storage so first let's install asinc storage so I will go to my CMD and I will write here npmi and this atate react native Asing Storage assing storage let's wait for it to install let's restart the application now to use Asing storage what we have to do first let's import it like this import assing storage from react native assing storage then I will come here after it is logged in successful I will write here ass sync storage do set item and I will set here token and inside this the value will be response. dat. data as we are getting token inside this data what this will do this will store the token inside I will save this then I will again go to home screen here we have to get that token to get the token I will again come inside this use effect I will first make this use effect a here I will write a wait and here I will create one variable name as token and I will use as sync storage do get item and my item name is token so this name should be same as the name which we have used to set the token also make sure to pass here await otherwise we will get some XY Z numbers now I will save this let's first console this token for now I will comment this out I will save this let's go to our application let's try to do login so I will write here my email I will open node here I will pass the password and when I click on login you can see I'm getting the token login successful okay and here you can see I'm getting this token that means we are successfully able to get the token from login to home screen using as sync storage now we just have to pass this token to our API so now what I will do I'll create a new function name as get data like this and inside this I will paste this code which is to get the token I'll make this a sync I will remove this because we cannot make use effect a sync now I will remove this I will paste this inside here I will uncommanded and now in this API I will pass this token which we are getting from here and we can pass that like this this token is referring to the Token of the back end and this token is referring to the Token of the front end which we are getting from ass sync storage now if everything goes well we will get the response and we will just console do log response. data let's hope everything will be working fine I will save this I will open my application I will call this get data here like this and here we can pass empty array I will hit save I will try to do Lo in I will open the console I will try to do login you can see here this is also the issue like every time we make any changes we have to do login each and every time so in the next video I'm going to handle this like whenever user login to our application he will still be login until he presses log out button manually so we are going to cover that in the next video now I will do login getting the message got the token also press okay and here I'm navigating to home screen here I'm getting data also so everything is totally working fine now to use that data we have to create a state let me do that I'll create a state name as user data is equals to use State now here where we are consoling that data I will add this line set user data to response. dat. data you can see inside this console we are getting this data inside this data field now I will hit save I will scroll down and instead of this static value I will pass here user data do name same for email instead of this random email I will pass user data. email gender we are not getting that profession we are not getting mobile we are getting so I will write here user data. mobile and I will H save and you can see it has been changed with new user and this is my email and this is my mobile now let's reload the application let's register with a new user it name will be debug adash at23 I will click on register registered successful email d g.co password and when I hit login getting the message click on okay I'm also going to apply loading screen here like at the time it is navigating to other navig data we have to show loading so we will also cover that in some other video and you can see we are getting the users detail so in this way you can integrate nodejs and mongodb with your react native application to do registration login and to getting the users details that's it for this video there are still many issues here and that issues I'm going to solve one by one so stay tuned for that and please let me know in comments whether you have learned this or not see you in the next video thank you

Channel: The Debug Arena

Views: 1,251

Keywords: how to do login in react native, react native with node js and mongo db, mern, how to do login auth in react native, login authentication in react native, login using jwt token react native, react native jwt token, mongo db, show user details, login and register in react native, sign in and sign up in react native, sign in sign up auth, login using jwt, jwt token, security in react native, react native login auth using JWT token, node js, mongo db with react native

Id: 2zbzVYmsySs

Length: 20min 55sec (1255 seconds)

Published: Sat Dec 30 2023