Connecting React Native App to NodeJS Backend API | Expo React Native Login System #4

hello there you are welcome to another episode of to the point code in this episode we'll look at how to connect an expo react native application to a back-end api this is the fourth part of our expo react native login system series so far we've been able to set up our login and sign off screens and also set up movement between the screens using react's navigation so basically at this point our front-end application is separate on its own and also we have a back-end server that we want to connect to we created this back-end server in some previous videos before the series we made use of node.js and express and also added mongodb as the database we then went on to host this application on heroku so if you want to do exactly what we'll be doing in this episode you need to go and watch those videos first without wasting anyone's time let's get started so first of all since we have a separate front-end application and a back-end application you want to link them and to link them we need an api client this client to make sure that you can make requests from the front end and this request will get to the back end and also whatever response that the backend generates will be returned to us so for this application we'll be using axias as the api client so let's install it on the command line [Music] now let's import axios into the login.js file [Music] before the installation i cancelled the metro server so let's make sure that it's running [Music] so before we proceed let's look at the behavior of our api in postman so for the sign up we see that it takes an object containing the details of the user and when we sign up successfully we see that status is returned a message and also the data you just signed up with and the new id is added to it for the sign in it's very similar when you supply the email and the password the sign in processes and when it's successful it returns the status message and also the data but the data of the sign in is an array while the data returned by the sign up is just an object so now let's copy the link for the sign in and start with the sign-in process so inside the login component do create a method and call it handle login [Music] now inside the handle login you want to take in the credentials also let's create a variable and assign the link we copied to it [Music] now if you remember the request in our post manager post request so we use the post method available on axios to send a request the first parameter will be the link to the api followed by the credentials and this will return a promise [Music] and also want to handle it for any errors so [Music] if you get a response from our request the data that we saw in postman can be found in response.data to refresh that and store it as our result [Music] now from this data if you remember clearly we had status message and also a data so we can destructure that from the result [Music] now at this point if the login was successful you want to move on to the welcome page else if there was an error message we want to display the error message to the user and remember that we created a portion here that we want to display our error messages there so to display the messages that we have we'll create a state variable to store the message [Music] also we have two types of messages a message can be an error message or a success message so we want to have another stage variable to monitor that type of message [Music] now let's create another function to handle the message [Music] it's functional taking the message and the type once it has the message to set the message as the value of our message state value and also to set the type as the type [Music] now if no type is provided we want to assume that it's a field message so we want to set a default value of field now let's scroll down to the message box now inside the message box you want to output the message [Music] also want to supply a type property to it and this will be the value of the message type now let's visit our styles.js file to start the message differently based on the message type now we want to add a color property for the value let's check for the message type so if the types applied to the messages success you want to return a color of green otherwise will return red [Music] so now back in the handle login function let's check for the value of the status [Music] if the status is not equal to success we want to set an error message so make use of the handle message function we'll use the message coming from the server and the status as well [Music] i'll see if the message is successful you want to move to the welcome page now while moving to the welcome page you want to pass the data that was received from the server so we spread the value of the data but for the sign in returns an array so we target the first element of the array for the catch block you also want to send an error message so when our code gets to the catch block it's likely that the person's internet is very slow so we put out a message for the person to check the network and try again [Music] [Music] now when the user clicks on the login button instead of just running in the background and moving to the welcome page we want to show some form of activity so make use of the activity indicator and we'll get to this from realt native [Music] how do we know when to show the activity indicator so format comes with an inbuilt state known as a submitting and also set submitting with a submitting state it is set to true whenever we press on the submit button and we can use the set submitting function to set the value of a submitting so let's combine the two to know when to show the activity indicator so we can get the submitting value from the inner function of the formic component [Music] so as the submitting is false we want to return the regular login button [Music] let's copy and paste this so that we make changes for the opposite [Music] now if a submitting is true you want to get rid of the unpressed attribute and then replace the text with an activity indicator [Music] we give it a size and a color [Music] but the color will give it primary also let's attach disabled echoes through this will ensure that the button does not respond to any process while it is loaded now we can see that activity indicator is shown because i pressed the login button not too long ago now inside on submit property let's make use of the handle login function so we can get rid of the console.log you can also get rid of the navigation now before we submit we want to ensure that none of the input fields are empty so let's check for them [Music] if any of them is empty you want to set a message [Music] now right after setting the message you want to set the submitting to 4th so in addition to the values we can take in the set submitting function and that comes as a property so we have to destructure it [Music] so after the handle message we can set submitting to force [Applause] [Music] you can go ahead to send a request to the undo login function here we pass the values and also we pass the set submitting function [Music] now inside the handle login let's make some few changes right after we are done with the dem block we want to set submitting to force first of all let's take it in as a parameter [Music] also after you have an arrow you want to set submitting to force now one more thing we want to do is clear the message fold whenever the button is pressed so that the old message that was displayed will not be there so for that we'll set handle message to now whenever the button is pressed now let's save and open our application again wait before we go i'm explored success so let's correct that yes and we are good so now let's try it out first we'll leave the input fields blank and press on the login button once we do that we see that the error message is being displayed and lets him put some ultra credentials [Music] and when we click on the login we see that our activity indicator is working now let's wait for the result now let's visit postman and look at the correct credentials so once we have that in mind let's try and log in again now we see that since these credentials are correct we are moved to the welcome page right after logging in now when we are on the welcome page you want to display the details of the current user here so let's go to the welcome.js file and make some few changes so in addition to the navigation we've taken the route property with this property we'll be able to access the data that was passed while we are navigating to this page so right at the top of the component let's destructure the email and the name [Music] we'll do this from route.params that is parameters now put the values as options to the text that we have [Music] we are doing this to ensure that for the time being if we visit the welcome components directly without passing through the navigation no error will be thrown [Music] so now let's try the login again [Music] now we see that the current user's name and email are being displayed over here now let's do the same for the sign up page [Music] so in the login.js file we copy the handle message function and also the handle login function in addition to that let's copy the message states now let's paste it in the signup.js file [Music] let's cut the stitch to the top now let's change the name of the function to handle sign up also we change the ending of the link to sign up now also in the navigation section the data we receive is no longer an array so let's get rid of the index and everything else stays the same now let's go back to the login.js file and copy the content of our own submit function [Music] let's add the set submitting to the values now if you go back to the postman you see that for the sign up the key for the full name is name instead of full name so let's change that in a signup component so we change the key for the full name to name and we'll do that in the input folder as well [Music] now we have to check if none of the fields are empty so let's copy and paste this so we check for the other fields [Music] also right after this we want to check if the confirm password and also the password are equal so before the last else block you add an else if [Music] we want to set an error message [Music] and i will change the chord function to handle sign up so on the sign up page as well we want to make use of the activity indicator so let's import it [Music] also before we forget let's copy the message box from the login.js file [Music] now for the button we'll do something similar to this so let's copy it [Music] now let's take in the submitting property [Music] so now let's try out the sign up first of all let's leave everything blank and sign up once we do that we see the error message now let's try something [Music] [Applause] [Music] now it still says we should fill out the fills that means we made a mistake somewhere so let's fix it so it turns out because our date of birth field is not a conventional input field formic wasn't able to capture the values so we have to manually add the database value to the values so let's do that to do that we just add a date of bet to the values object first of all we spread the values that we have and go on to add a date of birth remember the dob is the state that we created to store the value of the date of birth so apparently we forgot to import axios so let's import axios now once we refresh our app you should be able to send the request successfully [Music] now we see that our sign up is working successfully and the email and the name on the page have been updated as well

Channel: ToThePointCode

Views: 39,288

Keywords: google developer console, play store console, google play console, google console developer, play console, playstore console, google play services keeps stopping, talkback, google play services, android 12, android 10, android app development, android debug bridge, google play developer, android os, android sdk, node js, node js development, best javascript course, masters in data science, app hosting, ms in computer science, web app hosting, masters in computer science

Id: BRj5bO7OpZ4

Length: 22min 10sec (1330 seconds)

Published: Tue May 11 2021