Authentication Form in React Native using React Hook Form (tutorial for beginners)
HTML-код
- Опубликовано: 19 июн 2024
- Beginner-friendly tutorial on how to implement Login Authentication UI with React Hook form in React and React Native. Learn how to easily manage and validate forms in React Native.
📚 Enroll NOW for "The Full-stack Mobile Developer" and save 30%
academy.notjust.dev/
🚀 Login Authentication Flow Part 1️⃣ • React Native Login Aut...
🚀 Login Authentication Flow Part 2️⃣ • React Native Login Aut...
Prerequisites:
🕹️ Asset Bundle( dummy data, images, icons, PDF presentation, unlimited karma) assets.notjust.dev/authentica...
🕹️ React Native environment setup: reactnative.dev/docs/environm...
🕹️ Github repository: github.com/Savinvadim1312/Aut...
💬 Join the notJust Development gang and let's build together
[ / discord ]( / discord )
Tag me on social media when you finish this build, and I will give you feedback on your project:
Twitter: / vadimnotjustdev
IG: / vadimnotjustdev
LinkedIn: / vadimsavin
TikTok: / vadimnotjustdev
Chapters:
00:00 - How to use React Hook Form
00:38 - Prerequisites for Login Authentication UI
01:55 - Installing React Hook Form
02:39 - Sign In Screen with React Hook Form
09:40 - Custom Input Controller in React Native
13:15 - Set up Validation Rules
15:19 - Error Handling
21:15 - Implement Sign Up Screen
24:43 - Validating Email with Regex
25:50 - Custom Password validation and matching
29:12 - Default Values for Input fields
30:03 - Implementing React Hook Forms in remaining forms in the app (sped up)
31:10 - Overview of the tutorial on Authentication UI with React Hook Form
Design credit: Sandeep Kasundra, dribbble.com/shots/5105816-Lo...
Disclaimer: This build is for educational purposes only! All views, opinions, technology choices expressed in this video are my own and do not represent the views, opinions, technology choices of any entity whatsoever with which I have been, am now, or will be affiliated.
#VadimSavin #notjustdev #notJustDevelopment 
Развлечения
really helpful man. I was searching for something like to understand full flow, and here you go. thanks man.
Hey man, I don't know if you're still active in this youtube channel but I just wanted to tell you that thank you so much for teaching react in a very understandable way. I'm currently making a garbage location tracker in react native and your videos have been really helping a lot, hopefully I'm gonna graduate college next year. Goodluck to wherever you are :).
These special tutorial videos are soooo helpful. Thank you Vadim!
I highly appreciate you Vadim. You are a super duper humble man who spread your knowledge to the world. Thank you. God bless you. You have saved me through my career:)
Hi Vadim, great tutorial as always! I managed to successfully set up react hook form in my app using this! I also noticed a step up in the video editing, I really appreciate your work, as it’s so easy to follow😁
Thanks 🙏
This guy is a legend! Exactly what I needed!
10/10 Best programming youtuber. I honestly don't know any other place where I can have an unfamiliar framework explained so simply
P.S. I would love a video showing the VSCode themes and plugins you use
Thanks for appreciating my work. Here is the video with my vscode setup: ruclips.net/video/jCzJYyknKGg/видео.html
WOOOW, amazing!
Thank you very much!
CHEERS ! this video simplify my life bro ! keep doing it, great job !! and a lot of thanks
Thanks a lot Vadim ..wait for next video
This was so helpful. Thank you!!
Great tutorial and well linked to previous videos. Just a suggestion, Formik for forms and Yup for validation would have been a lot easier.
thank you sir , your explanation helping me a lot
great tutorial ...good to follow along ..implemeted this in my project and it made my project more cool...thankyou!!!
That's awesome. I love that you implemented it in your project.
Love it great content and clean code
Great video sir... Waiting for next part...
Thanks for sharing!
Thanks for the great works you're putting out here. I am starting react native but I am finding it difficult to set up android studio and even with the expo cli, I am not getting the results I have been seeing in tuts. If you could dedicate a whole video on how to setup environment for software development, I am sure myself and other beginners like myself will appreciate it much.
Nonetheless, you are doing a wonderful job
There is a video tutorial on my channel on how to setup your environment, for both windows and macos
amazing tutorial please make next video on firebase authentication with this series
Thank you very much 🙏
Great man.
wow going through ur tutorial and I am learning a lot thanks for awesome content and looking for more contents like this in future ahead
Happy to hear that!
@@notjustdev waiting for part 4 cheers
u did excellent job in front end.
but gotta say if u used any backend scripting language, the application would be awesome
Good video. Thanks
Thank you for your Amazing work. I need some suggestion. Do you think is it safe to implement backend for authentication on our own for commercial app or is it better to use third party backend like Amazon cognito? I have built the backend for auth but I am wondering if I should move to Amazon cognito, despite that would cost a lot of a large number of users. What do u think? Is it safe to store hashed passwords in our own MySQL db? Or do most of the commercial apps today use third party for authentication?
thanks for today
great video, I learned a lot! ~Wirl
Great Brother
Sir this is an awesome and informative tutorial clear all dbouts. can you please make a video on useFieldArray of react-hook-form with Yup validation there is lack of information about this.
Very cool! I use the library and got an issue. In my project in React Native I make a questionary and there the user just presses the button to choose an answer. Is there a way to validate them?
So I commented on the Amplify connection videos where you tie in the backend auth flows into the front end we built. My comment stated that all of this was missing. It would help you amended those videos with a note that says you did this before moving to the amplify auth work.
Question... how do you access the render props of the custominput from the screen component? i need to pass the default value to the custominput. can someone help?
hi vadim thanks for the amazing tutorial i have quary on how to do role based authentication react native with firebase can you make video on this once again thank you for the amazing tutorial
when is part 4 coming out ?
so should I use it in conjunction with Yup? I see people often use that.
Hi, I need to use a datetime picker with react hook form.do you know how.I tried but could not succeed.
nice
How can I map over the custom input with existing form data and still provide a unique name of my choice?
Can you please let me know how we can upload react-native cli app into the expo
Are you using expo or react native cli ??
As the rules for password is same in multiple screens, Is there a way to create global rules script and apply it wherever required? instead of applying rules in every screen.
Once again thank you for the tutorial
Hie, i was following this tut however when I try the controller no error occurs but no input fields are shown in physical android..what can be the prob.?
I was getting error: e.render is not a function when I was making the Controller inside CustomInput Component.
you safe me bro with this turotial, thumbs up and subsribe
How can we add icons in this also label?
👏
thanks of french
how to console only data.code instead of both code and password i used console.warn(data.code)
please make how to authenticate login using redux api from dummy server auth following this guide
Where is your back end video of these series,i need help of it for my college project....
Great tutorial, but it is how to call API with jwt authentication. Can you please make a video on the same, please
Thank you brother
But where is the backend part
200 like 👍🏻
Next Invite only APP. Please Vadim.
Don't know if i am doing something wrong but on the {borderColor: error ? 'red' : 'e8e8e8'}, the error being cleared doesn't change the border back it stays red could this be because I am using the newest version?
I am also getting same issue are you able to solved it? can you please let me know the solution. I am using latest version of react native
Hi Vadim... after searching a bunch of time i found your video ... Its great but when i use }
/> ... On Expo Go tells me Render Error Text strings must be rendered within a component .....
Solved... It was a Bracket comment pair issue....
What is the difference between using a controller on the custom input vs using {...register}?
The register is a wrapper of the controller, and it is easier to use, however, I couldn't make register work in react native. It works fine in web dev, but for react native we can only use the controller way.
@@notjustdev oh yes I was confused by this, thanks a lot for clearing that up :)
bro plz make file sharing app
Hi! the file src\aws-exports doesn't exist
how to validate only Numeric value.. example Phone Number
where is the github repository ?
where is the backend vide ?
I love how no one uses a confirm password with a resolver, and a custom input when using react native and react hook form.
I believe this issue has been reported for the last year or two and the react hook form team has done nothing about it
hook form install give error
pls asyncStorage using this project new video pls
Man use Typescript!----
u did same as game of thrones start was awesome but the end is awful
Who in the freaking world does javascript development without typescript?