Authentication Form in React Native using React Hook Form (tutorial for beginners)

what's up nodejs developers welcome back and in this video we're gonna learn how to properly manage forms in react native with react form hook we are gonna do this on top of our authentication videos that we did in the past but this is a great opportunity for both people that are following authentication flow videos and also for people that want to learn about react hook form because i'm gonna provide all the code necessary for you to get started and follow this specific tutorial so without further ado let's jump into building it the first step that you want to do is to make sure that you have a code and everyone is starting from the same page you can access the source code of application that we're gonna use for today's tutorial by finding it in the description down below or going to github my profile sevenvedim and then authentication here you can clone this repository and i provided a ui branch that is not going to be modified in future i'm not going to push anything here so after you clone this repository on your system check out on the ui branch and after that we are all on the same page you can install all the dependencies with npm install and after that run your application on the emulator and you are all set a very quick overview of application that we are working with here is our login screen that has a username and password input after that you can press on the sign in and today in this video we need to provide some validations for these fields and only if you provide them you would be able to press on the sign in and to go to the next page as well another very interesting screen is going to be the creating an account screen here we have a little bit more fields that needs very specific validations so here we're gonna play around with react hook form so to get started raccook form is a very popular library that helps you manage forms and it was built specifically for react.js but it also has support for react native the issue is that their documentation for react native is not one of the best and they only provide one example for that reason i decided that this needs a separate tutorial because i think that our peoples might find it difficult to integrate through a hook form in their applications so let's start by installing our package with npm so i'm going to copy it from here and let's paste it in our terminal in our application okay so after finishing installing this library we can open our source screens and here we can find the sign-in screen which is the code for this sign-in screen that we can see on the right and what do we have here if we scroll down a bit we see that we have the logo image and here are the two custom inputs for the username and the password and after that a custom button for the sign in this is the things that we are going to focus on today as we can see at the moment this form is a i would say do it yourself form and manage by us using state variables we keep all the values of this form in a state variable and then we also have like a function where we can potentially implement some very custom validations manually for small application this is good however for bigger application where you have a lot of forms then this is going to be very repetitive process to implement this custom form management control custom validations every time you need to implement this logic in a new form for that reason react hook form comes in and helps us do very standard form management and validation and with rahu form we are not going to keep all the fields in a separate state variable because they are going to be managed by the form itself i deleted the two state variables another thing that i want to do is to comment out the custom inputs i will simply start with two text input and also make sure to import the text input and i want to do that in order not to confuse you with a custom input i'll show you easier way and after that i'm gonna show you a better way and implement everything with a custom input now let's import some of the things from the react hook form and i want to import two things i want to import a hook called use form and also a component controller that will help us render our inputs all right so starting with a use form we are going to use this hook to get access to some of the variables to start managing our form so use form and what do we want to take from here at this moment we will need only two fields the control function that will help us bind one input to a specific field and also another function called handle submit i'm going to start with a handle submit because this one is quite easy and what do we need to do with the handle submit function in the custom button we need to wrap our custom submit logic that will handle i don't know sending data to the server with the handle submit function so we wrap it like this and what this will help us do is before calling our custom function that will send data to the server for example the handle submit will first validate the fields it will first call oval validation we'll make sure that all the fields are valid and only after that it will get there on sign-in pressed now the next step is to somehow connect our text input with our use form here how are we doing that we first make use of a controller component in order to wrap our text input inside that controller and here is the difference because in react.js vstab is much much easier because you do not need this controller and everything is kinda automatic because of the dom possibilities to set a custom name and get the name and i'm not going to get into a lot of details there but yeah for react native it's a bit more verbose here with a controller and you might think that it includes a lot of complexity but after we understand how it works we are going to take this controller put it into a custom input and then forget about this and we are going to get a very easy to use custom input component so the controller has free important properties one of which is the control function and we took it from the use form this is the first step that we connect our text input with our form the next step is we need to specify a name what is the name of a field that we are trying to manage here and the name of this field is going to be username first and the third important prop here is render method and the render method is going to help us render the actual text input so we will put our text input inside that render method like this so if i do it like this we still can edit it out however this is not done yet because if i go in there on sign in pressed let's go here because of the handle submit function here handle submit the on sign in press will receive a property data here so let's first of all do console log data and see if we receive anything spoiler alert we're not going to receive anything yet but yeah let's try to write something for the username press sign in and in the debugger we see username undefined so the thing is that it knows that there is a field username but the value of the field is undefined even though we wrote something there okay so what we are missing here we are missing the binding of value and the unchanged text of a text input with the actual form so how do we bind that first of all the render method will receive here some properties one of that property is field and field is an object that has other properties there as well and it has a value on change and also on blur event now we can take this value and pass it to our text input we will pass not to the on change but to the on change text on change and then on blur to simply on blur okay now if i try to write something and press sign in come on username we already see the value there which means that our form successfully attached and bind and is controlling this field and the value of this field okay so that was the most important part we're going to get to the validation a bit later but now i want to show you how we can refactor some of this code in order to make it easier for us to use it because again like there are a lot of things to remember here how to properly render a text input so if previously we just had a text input now we also need to remember about this controller and now if i had to do it for the password i'll probably have to just copy paste it here and replace my text input with a password and to replace the name here password and so on so as you can see it's not the best way because it became a little bit harder for us developers to render simple inputs what i want to do next to make it easier for us is to put this controller inside our custom input component so let me first open it and here our custom input at the moment has a simple view a text input and that's it and it also has some styles for our containers and so on because you can see here they look a little bit better than the default ones so i want to move our controller from here to our custom input so let's grab it and let's come here to the custom input and i'm going to paste the code here so what will we need here i'm comparing this text input and what values it has with this text input so we have a value but in this case the value is coming from the controller so that means that we are not going to need the value through props the same thing with the orange on change text we're not gonna need the setter because it's coming from that controller however we will need the control property we will need to receive the control from outside to be able to use it here so control is coming from outside the name of a field will also be a property of our custom input to be able to use this custom input for different field names for example username password emails and so on and now for the name here i will send our name property like this let me comment this text input out and what else do we have we have unchanged text we have a placeholder which here is username but we want to take it from the property placeholder we have style for our old text input which we need to assign to our new control text input and a field secure text entry in order to have a password protected i'm gonna delete this one okay so the things that we changed is we do not need the value and the set value here but we need the control and the name of a field that we are trying to control here let's go back to our sign in i'm gonna delete our simple text inputs and i'm gonna uncomment our custom inputs and as i said we do not need the value and the set value but we need that control which is our control and we need a name the name i'm actually going to put it as the first one because it's quite important and it's going to be easier for us to distinguish so username same thing here we don't need the value for the password and we do not need the set value so we are going to have name and that control here in our custom input let's make sure to import controller from react hook form and now we are back to our initial design but in this case our form is controlled by react hook form and if i press sign in right now i should see the data in our log here here username and password we successfully managed to bind both our custom inputs for the username and the password to our form here but at the same time the way we are using our custom input is not very much different than we were using it before when we didn't use the rack hook form and that's because we have managed to put all the logic all the low level logic of the control and wrapping everything and sending all the data inside our custom input and after that when we need to use it it's very simple to do it from a developer experience the next step are validation rules so the whole point of using this react hook form is to simplify our validation process so how can we specify these validation rules we can do that on the controller using a prop called rules and these rules should be an object that contains different types of rules for example one of the rules that it accepts is required if you set required to true then recto form will make sure that this text input is not null and if it is it will throw an error where can we receive the errors one way to receive errors is from the use form hook here we can destructure the form state this form state is an object that contains the errors and if i simply console log errors and then if i go in our debugger if i press on the sign in here i see the errors password type required message there is no message but yeah we see the error is required for both password and username however if i input something for the username we see that the error is only for the password and if i do for a password we see that the error object is empty which means there are no errors at the moment instead of hard coding the errors inside the custom input let's make them flexible and let's receive these rules in web properties rules like this and let's assign a default value of an empty object in case we do not pass any rules here so back in our sign-in screen we can send to the custom input some rules so let's do here rules and what rules should the username have first of all required i'm gonna go back to required through save and i'm gonna do the same for our password now if i press sign in i still see the same errors but the good thing is that these rules are flexible and they are passed through props to the custom input all right so what we can do with these validation rules one way would be to always check the validation rules and see if there are any errors display them on top here but the best option is not to display all the errors in the same place on the top or on the bottom because this is very old school a better way is to display the errors very close to the field that the error is referring to for example if you have an error to the password you'd must probably want to render the borders with a red and display the error message underneath the input so how we can do that well that's also possible and that's going to be in the custom input here the render function of our controller besides the field it will also give us the field state the field state is an object that contains the error property this error will be null if there is no error or will contain the object with a status code and with a message for that specific error so what we can do here let me do it like this so for the styles i want to make the borders red if there is any errors so we can see that our input we do not have any styles for the input we put all the styles to the container but the container is outside our controller so for that reason most probably i'm gonna have to move the container inside our render function here and after the input to close that view and to remove this view save so basically now our controller is the root and inside it we have container i needed that because the styles of this container depend on the error and we have access to error here so i wanted to add another style that will change the border color to something like red like this but it's gonna change it only if there is any error so if error display it with red otherwise display it with this gray color save let's see so initially there is nothing if i press sign in here both of them are displayed with a red order and if i start typing the red border disappears because validation is automatically applied we see that there is a value and if i delete everything i'm back to the red borders but besides the red border i also want to display the message of this error to give more context to the user so after this view with the input below it i want to render that text input so the text of the error message for example i'm going to start with a very simple error and we see already that this is not possible because we are trying to render two childs for that reason i'm going to rub them with a empty fragment like this so that we have only one child that contains the view and the text for the text i'm gonna do style color red and align self stretch in order to make sure that the text starts from the beginning basically it takes the whole space there so we are displaying the error here and if i write something the error should disappear but it doesn't because we did not implement the conditionally rendering this error only when we have an actual error so if i do it conditionally like this if error display this error message now the error message is going to disappear if there is no error perfect but uh displaying just a simple error is not very user friendly as well so how can we display a more verbose error message we can do that by rendering the error dot message but that at this moment is going to be null so error dot message and i'm gonna do it like this render the error dot message or if this is an empty string render a simple text the default text here so we're gonna see error only if this message is null and in that case now we see error how we can provide that error message here we are gonna go back to sign in screen and where we provide the rule required we can instead of providing true here we can simply send the error message that we want to show if the field was not provided so required username is required save now if i do not have a username i see a proper error message saying username is required and i can do the same for our password and i already have password is required required is one of the validation rules that you can work with if we go to the documentation we can go here the apply validation and here we will see a list of valid validation rules that the library supports for example minimum length so i can provide another validation rule for the password of mean lan length of three characters so the password should be minimum three characters now if i write something here i see this generic error message and this error message is going to disappear if i have more characters than free in case you have a validation rule with a value and also you want to send a validation message that will replace this default error message we can do that by providing an object the object will contain first of all value and the value is free because that's what we wanted to do and the message can be password should be minimum three characters long and now the validation message is password should be minimum three characters long so this is how you can provide both the value and the error message if the validation rule fails so play around with the other ones from here for example mean max pattern is a interesting one because with a pattern we can validate based on regex so we finished everything with validation and managing the form in the sign-in page however if i will go to the create a new account here i will see a error where this form is not going to work properly because it's using the old system of managing the input vr with a custom input so open up the sign up screen and this is a great opportunity for you to test if you understood everything when it comes to react hook form so get your hands dirty try to implement the same things with a custom input with the rules with the validation rules for our sign up screen and try to do it yourself give it a shot spend at least an hour there and if you don't manage come back to the video and continue watching because i'm gonna show you real quick how we can apply everything that we have learned so far for the sign up page so now was the video and good luck okay hope you actually implemented everything and not just skipped and said yeah i'm gonna do it later and yeah let's see how to do it so i'm gonna open the sign up screen and let's start by importing our use form hook from react hook form now we are not going to need all of these individual state variables because we are going to implement it with our form so let's take using the use form hook let's grab that control and the handle submit here i'm gonna start again with handle submit because this is quite easy and when we have a custom button we simply wrap our own submit handler that will handle that sending the data to the server with the handle submit that will do the validation first then let's start to adjust our custom inputs with everything that we need so we need first of all a name for all of them the name here is username then we need the control the control we're gonna send simply the control variable from var and we will not need the value and the set value so these are the minimum things that we will need the validation we're gonna implement a bit later so let's do four-way email as well name email control control value and set value we remove and let's do the same for the other things value and set value we remove secure text entry we leave so now if i navigate to the create an account i do not see any errors and everything is back to normal so if i will press simply register i'll be redirected to another page but that's because we have not implemented the validation rules yet so we can send here to our username as the last one we can send rules what uh should be the rule so first of all is required and the validation message there will be username is required also i will say that the minimum length has a value of probably 3 and the message and i will also the same way provide a maximum length max length of 24. and if i try to press register i see that the username is required if i put something here username should be at least three characters long and if i do a lot of characters i will see that the max length was triggered so i hope that it's clear with a basic validation rules like required mean length and so on let's see how we can validate the email using regular expression so i'm grabbed a regular expression because nobody on earth remembers them and knows how to work with them i just google it so email regex is equal to this one and after that using this email regex we can provide some rules to our email here so what are going to be the rules the rule is called pattern so pattern double dots email regex so if i save this one and if i start writing something in the email field and press register i see the error message however if i do vadim at no just.dev everything is fine so this way we can validate with using email regex as well we can do the same thing as with other things we can provide the an object with a value email regex and a message that will say email is invalid and now if i provide something and press register i will see the custom validation message email is invalid for the password field the validations are pretty similar to the username so i'm going to paste them here the only thing is that i will say here password is required the minimum length i will say 8 word depending on the validation that you want to provide for your password so password should be at least eight characters long and i'm not gonna have the maximum length all right so this is the validation for the password the validation for the password repeat are a bit more interesting because here we have a custom validation method but we want to check if a password repeat is the same as the password field how we can do that oh let's start by defining the rules here so one rule if none of the available rules matches your requirements there is a validate field where we can provide validation function so here we will receive a value and we need to return true if a value is valid or false if a value is not valid so you can simply do value is less than 5 which means that if the value is less than 5 or let's do value dot length if it's less than 5 is going to be an error i just want to show you how validate function works so if i do register and if i provide more than five values this will return false and the validation will fail another thing is that instead of returning true or false if we return a string that string is going to be the validation error message say here i can do it like this if this is true return true otherwise return password do not match and the error message should change here to password do not match this operation of checking condition returning true or this one can also be written as this so with or operator return true or if this is false return the validation message okay so the thing is that we are not trying to validate it based on the length we are trying to see if the value of our password repeat is the same as the value of a password the value of a password repeat will receive it as a property here value but how do we get the value of a password here to be able to check it we can do this by destructuring the watch function from the use form and using this function we can watch a field and what does that mean is that we can get the value of a field in our code so password is going to be equal watch and we need to provide the name of a field that we are trying to watch the name here is password by doing this our pwd will contain the value of our password and now we can compare our value of the repeat password with the pwd that is the value of our password so let's save and check if it's working so for the password i'm gonna do something like one two and here if i provide that wrong password register password do not much however if i remove the last three characters it's already validated if i add something it's not so that's how you do custom validation and very specifically how you can see if a password if a two password match and are the same the last thing here that i want to show how to do is how you can provide the default values for these fields if we pass to the use form and object here we can specify the default values and by default values we can do it for the username make sure to provide the same key name as the name of the field and here is default username and now the username by default when you open the form will have this value default username this is very helpful in forms where you edit data for example you are trying to edit your profile data then you want to initialize the form with the data that you already have and let the people be able to update it instead of writing it from scratch so yeah this is the default values and we do not need it here i just wanted to show that that's also possible in the next part i'm going to implement the react hook form in the other forms that we have in our application and i'm not gonna bore you with everything i will just include a speed run for this and if you need to follow along you can decrease the speed of a video in the corner of a settings layer put it as 0.25 and enjoy watching if you need to make sure that you're doing the same changes [Music] run [Music] [Music] that is it for today guys we have implemented react hook form and we implemented all the validation for our forms i hope you enjoyed this tutorial if you had some troubles check out the source code in the description below and also make sure to subscribe to the channel because in the next weeks we are going to continue this tutorial and we are going to implement visa authentication flow with aws amplify so we are implementing the back end of it so make sure to subscribe to the channel turn on the notification bell not to miss the future videos and let me know down below in the comments what other tutorials you're interested in but meanwhile check out this video and this video they're both very valuable tutorials where you can learn a lot of react native

Channel: notJust․dev

Views: 54,421

Keywords: vadim savin, notjustdev, not just development, react native, react, react native tutorial, auth flow react, authentication ui, login auth react, login auth flow react native, sign in react native, sign up react native, authentication, react native ui, react native crash course, react native ui design, react native live coding, react hook tutorial, learn react hooks, reactjs, javascript, react tutorial, react tutorial for beginners, hooks, react hook form

Id: G4jD_u7isXk

Length: 32min 2sec (1922 seconds)

Published: Tue Dec 21 2021