#10 Login Register Authentication in React Native with Node JS, Express JS and Mongo DB ||#mernstack

hello guys welcome back to the debug arena in this video I'm going to integrate nodejs and mongod DB with our react native application so that our user can register and login in our application so first let me show you the demo of what we are going to do in this video this is my login page and from here we can navigate to this register page in the previous video I have covered the UI and field validation part and in this video I will make them Dynamic so first let's try to register one user for that I will come here and write the name of our user which will be I will scroll up and inside email I will write the email and here you can see I'm getting this message enter proper email address so this is what I mean by field validation this thing I have covered in the previous video if you want to learn then you can go and watch that video also so I will write here debug Arena atate g.com so this is correct email address inside mobile number also I have done field valid ation and same for password and I will click on register and you can see I've got the message registration successful now let's try to do login I will enter my email which is debug aren g.com and I will enter the password then I will click on this login and you can see I've got the message login successful and it has been navigated to home screen and here we are getting the users details these details are Dynamic like whatever detail user have entered at the time of registration we are getting that here also from here user can do log out and again go to login page all of these things we are going to cover in the series of videos so without any delay let's get started okay let's start with nodejs so the first question is what is nodejs is it a programming language is it a framework or library and the answer is it is the environment that helps us to create the server so how do we create the server Ser for Server we uses a framework provided by nodejs known as Express the only prerequisite to use node and express is that node should be installed in your machine also make sure to install npm now let's start with nodejs here you can see I'm having this file name is friendsbook application where all my application code is present so I will come here I will create another file which is for backend so our application and the backend code will be separated and its name will be okay I will open open this currently it is having nothing I will open this inside Visual Studio here we are having nothing to start using nodejs we first have to initialize it for that we can open the terminal make sure to open the terminal at this location only and here we have to run npm in it here it will ask me some details I will just press enter enter enter and it will be done and here you can see my package.json has been generated I will close this I will open my package.json this is a very useful file as as it will contain all the configuration and all the packages which we are going to install so now let's install some packages I will again open my terminal and I will run here npm I I will install Express also I'm going to install node Monon to run my server and you can see here my packages have been installed I will close this if you notice here I have got the package name that means this Express and node one has been successfully installed also we are getting this node module folder now what I will do I will create a base folder name is app.js and inside app.js we will create the servers the first thing which we have to do is to import Express we can import Express like this we will create a variable name as Express and then I will write require here so that I will call my package name as Express now I will initialize this Express variable to other variable name as app we will write Here const app and let's initialize Express to it so the initialization part is done you know when you run some reactjs application it runs on some port in the same way when we start our nodejs application it will also run on some Port so we have to assign that port for that we have to write an app and this Express provide us one method name as listen after that I will pass my port number which is in my case 5,1 you can pass any put number but make sure it is not in use after that we can pass your call back function so that whenever our server will be started we will get this message which will notify that the server has been started and here I will console.log that our nodejs server has been started now the question is how you will start the nodejs application for that we can go to package.json come inside the script remove this and we'll write here start and I will pass one command here name as node and our base file which is this app so I will save this I will open Terminal and inside terminal we have to write node modon app and when I do that you can see our server has been started and I'm getting this nodejs server started that means our server is totally running fine now let's create a API I will close this you know there are some methods which helps us to create a API like get post put patch and there are some more I'm not going to cover all of them in this video but if you want detailed explanation on how these things works then you can go and watch this video I will give Link in description in that I have gone with these things in depth now let's start by creating the API first I'm going to create a get API so what I will do I will come here and I will write app.get and inside this I will pass my API name for now I will pass like this that means if someone will hit this put then this get API will be called and here I will again pass the call back function and inside this I will just send the response okay inside this we will have two parameter one is request and one is response request is responsible for the data which our application will send and response will be responsible for the data which our node GS application will send like request is for the outsider application and the response is provided by our this application so here this application will send back the response and it will be so I will hit save now what I will do I will go to Chrome and let's try to hit this URL I will write Here Local Host 50001 and you can see here I'm getting status started what if I didn't return return that get let's comment that out and see so I will come here I will comment this I will save this I will come here and refresh this and you can see I'm getting cannot get why it is you know the major difference between the get and the post is that suppose you are having one front-end application and one backend application if front-end application hits the API without data and it goes to backend application it process that API and returns some response this is what happens in get but in post the front end application can hit the API along with some data and that data will received by backend application and then the backend application will work on that data and then generate the output and then send back to front end application so that's the major difference between the get and post I hope you understand this otherwise you can go and check out that video now this thing is done like we have started our server we have also created get API now let's integrate mongodb to this for that I will go to Chrome and you have to come to this cloud. mongodb domcom and you have to do login then you have to come inside this project and from here I will create the new project and my project name will be application I'll click on next create project it is done now let's click on this create deployment I will choose this free one and everything will be same now I will click on create let's do the verification here we have to pass username and password make sure that you remember the username and password we will require this while connecting with mongodb using nodejs so I will pass password as admin and I will click on create user and here we have to list the IP address which will hit this database but we want to access it from anywhere so what we can do we can come here and mention this IP address and I will click on this add ENT this will help to access this database from anywhere now I'll click on finish and close go to overview now I will click on this connect and we are going to connect it through nodejs so I will click on this drivers and this are the steps to connect it so we have to copy this now I will go to our noj application open the terminal and here first we have to install one package name as mongus it is done now let's close this I will come here let's import mongos so I will write here const mongos require and in this I will pass okay after that I just scroll a little bit down and I will create a variable name as URL this is the URL which we got from mongodb and I will paste this here and here instead of this password we have to pass our actual password so I will write my password which is admin now to connect our nodejs with this URL we have to write a function here name as mongus which we have created here and it has one method name as connect where should it connect it should connect with URL so I will pass this URL here and how do we know whether it got connected or not through promise so I will write here then inside then I can just console otherwise I can catch the error here and I will also console the error okay done let's save this again go to terminal again I will run this node one app and here you can see first I have got this nodejs server started which means that our nodejs has been started and then we got this database connected that means we have made connection with our mongodb database okay we are going good now let's create the API for register for that I will come here and our registered API will be of post because we want to send some data from our application to our node just application so I will write here the name of our API which will be register and here I will write a sync inside our call back function because we might wait for data and in this I will pass two things request which will come from our application that is our react native application and this response which we will get from our nodejs application now to get the data from our react native application we can get the data inside this variable and to access that what I can do I will just write here const data and we can access it inside request. body before doing this what I will do I will create a schema here so I'll create a new folder name as user details. JS you might be thinking what is schema schema is the structure of the data like we are going to use user details so we are going to create user schema if you will store admin detail then you can create admin schema so inside schema we will Define what type of value our user will contain like whether it will contain name f name L name email password and all of that thing and we can Define like this first we will import mongus after that I will create one variable name as user details schema here I will use function from mongus which is schema and in this I will Define my structure of the data like I'm going to show the users data so it is going to contain name which will be of type string email which will also be of type string same for mobile and password so now all of our user will contain this type of data only and it should be of string only and this email we can also write like this and we want our email to be unique therefore we can write it like this and done now let's export it so here here we have to pass the collection name so this collection name will be the name of our schema where all of our users data will be located I will show you that in minute after that we can just export it like this mongos do model and in this we can pass our schema name which is user info that is our collection name and our actual schema structure which is user detail schema and that's done now I will come here I will import that to import I will write here require and I will pass user details and to use it we can create a variable name as user and I can use mongos here do model and our model name is user info so now it will fetch all the details which is available inside this user info collection in our DB now let's come inside this this register here in this way we can get the data from our application but we are not going to get this data we are going to get name email mobile and password so we can write it like this this is known as array destructuring we can write it like this otherwise we have to write request. body. email that will be long that's why I'm writing like this after this what I will do I will create a try and catch block and inside try and catch block here I will write await and I will call this user which is our collection which will contain all our users data and I will use a method name as create which will help us to create the user and inside this I will pass name this is referring to this name here user details inside our schema and this name will contain the value like this this value so we can write it like this again email and email this email is referring to our schema and this is the value is referring to the value which we are getting from request. body if the name is same we can also write it like this this will also work and then now when our user will be created we will send some response back to our app so we can send response like this so I will send resp response status is okay and the data will be user created otherwise I will send and I think it is done now just one more thing you can see here we have mentioned that the email should be true so this thing also we have to tackle here for that what I will do I will come here and I will create a variable name as old user okay in this I will write await you know where our all the users have been stored yeah correct in this collection so I will write here user and I will try to find one user inside this and we can find the user using email dot email again this email is referring to the schema and this email is referring to this this will try to find this user inside our collection then I will write this condition that if old user is true that means that it has found this email then we will return this message response. send data as user already exist so now if someone will try to register with the same email it will not work because it will first execute this like it will take all the data from our request. body coming from our react native application then it will check whether that email exist or not and here if that email exists then it will return us this message and you might know that if we return something then it will not go forward once this is done and if the user doesn't exist it will come here then it will go to user. create it will create the user and it will return as user created now let's use this API in our react native application okay this is my application let's go inside register. GSX it is inside the screen register. jsx and here you can see I've already made the state and also I'm already storing the variables which user will enter here like if user will enter other share it will already get inserted inside this state because I have implemented this all this function in the previous video only so you can go and watch that now I will create a new function here name as handle submit which we will call on press of this button register now here the first thing which I will do is to use exos to access my API I will import the exos you can use fetch also but I prefer exos then now I will write here exos and our method name is post and inside this I will pass URL and our URL will be HTTP Local Host and our port number which is 50001 and here we have to pass my API name which is register okay after this here we have to pass user data like what are the data we want to send to our API to do process so here you can see in our API we are expecting this four details so I will come here I will create object here name is user data and in this I will pass name this name is referring to this name here and in this the value will be our state which is name again same I will pass email then our user data is ready which we want to send I can write this before here yeah now here I will pass this user data now I will accept the response from our API for that I will use this then inside then I can write response and I will just console.log resp response. data and I will remove this otherwise I can write here catch block to catch the errors this thing also I can console okay now let's bind this handle submit to this register button inside aable opacity I will write on press I will pass that handle submit i h save okay I will come to my application let's open this console here I will write my name here I will write email which is and I will press on this register and you can see I'm getting exos network error why it is it is because I have passed Here Local Host 50001 you know this Local Host work only on browsers here we are using this emulator or you might be using some real device so we cannot pass this color so what we have to do to tackle this what we have to do we can open CMD search for IP config and in this copy this IP for address paste it here and after that pass this port number now save this again I will open my console and I will click on this register again I'm getting network error let's see whether our application has been started or not this is my backend application I come here terminal new terminal we are getting this error it is because we are sending the data from our application to our noj server in the Json format but we are not accepting it in the Json for that what we have to do we can come here at the top and we can include this line which says app.use express.js now I will save this and now I will try to click on register and you can see I'm getting user created now let's check in our mongodb whether user exist or not so I will come here just close the application I will close this and here we have to click on this then I will click on this browse collection here we can see all the collections and our collection name was user info and we have added to users like this ad g.co and ad1 g.co okay it is done also you can see here I'm getting password as it is but it is better to encrypt it so let's do that so we have to come to our back end here I will install one package name as BPT JS let's use it here so I will write here const bcrypt is equals to require and in this I can pass now I will come below here and I will create a variable name as encrypted password and here I can write await Crypt which I have just created and it has function name is Hash here I will pass my password and digit now this will encrypt our password and at the time of login we will decrypt it now instead of password here inside password we can pass encrypted password now I will hit save now let's start the server let's go to our application so here from this code we are a able to do register but here also we have to do some validation so I will write here if my name verify which is the state which tell us whether my name format is correct or not and then email for verify and then password verify and mobile verify if all of these are verified then only I will call this exos otherwise I will just alert alert from react native do alert fill mandatory details okay and here inside this what I will do inside this response. data what I'm getting you can see inside this response. dat I'm getting this data which is user created and this status which is okay so here I can write condition which is if response. data do status is equal equals to okay then first I will alert registered and after that if this is not true then I will just alert do alert the whole message that is response do data now I will hit save let's go to application and when I hit register you can see I'm getting registered successful again I will click here and I'm getting this value for title cannot be cast from readable native map to string okay this is not string this is inside object so what I will do I will just write here Json do stringify and in this I will pass response. data now I will hit save reload the application let's check in mongodb whether the registered user has encrypted password or not I will refresh this and you can see this third user have password encrypted so it is totally working fine let's go to sign up let's click on register and we are getting fill mandatory details let's try to fill it okay now I will click on this register registered successful and if I click again you can see I'm getting data user already exist so this is totally working fine now the only remaining thing is when the user has been registered it should navigate back to login page so I'll come here I will create here a variable name as navigation and here I will assign use navigation hook then I will come here after this alert I will just write this navigation dot navigate and my page name is login this login is referring to this app.jsx here you can see I'm having this login now I will try to register one [Music] user and when I click on register you can see I have got registered successful and I have navigated to this login page that's it for this video in the next video I will try to cover the login part and we will fetch the users data I hope you have understand each and everything and if not then you can mention your doubt in comments I will try to help you make sure to check out previous video for better understanding subscribe for more stay tuned thank you

Channel: The Debug Arena

Views: 5,996

Keywords: How to do login and register in react native using node js mongo db, login and register in react native, node js mongo db with react native, react native with node and mongo, sign in sign up in react native node mongo, react native, mongo db, node js, express, login and register auth, login and register with mern, mern stack, learn mern with react native, login and register in node react native, login react native, register react native, login auth react native, sign in sign up

Id: p-YhMj1XHzs

Length: 26min 36sec (1596 seconds)

Published: Tue Dec 26 2023