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

Подписаться 113 тыс.

Просмотров 60 тыс.

50% 1

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

Развлечения

Опубликовано:

22 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 81

@fshtank7992 2 года назад

These special tutorial videos are soooo helpful. Thank you Vadim!

@asaadhabibkhan8420 Год назад

really helpful man. I was searching for something like to understand full flow, and here you go. thanks man.

@sf8262 2 года назад

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

@notjustdev 2 года назад

Thanks for appreciating my work. Here is the video with my vscode setup: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-jCzJYyknKGg.html

@GueuleDeBois1 2 года назад

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😁

@notjustdev 2 года назад

Thanks 🙏

@nope4224 8 месяцев назад

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 :).

@SuperYoda7 Год назад

This guy is a legend! Exactly what I needed!

@moeinsamani1467 5 месяцев назад

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:)

@eduardobaia1 2 года назад

WOOOW, amazing! Thank you very much!

@vigneshwaran8289 2 года назад

Thanks a lot Vadim ..wait for next video

@_WyreZ Год назад

This was so helpful. Thank you!!

@localbus7008 2 года назад

Great video sir... Waiting for next part...

@niharikadayama589 2 года назад

great tutorial ...good to follow along ..implemeted this in my project and it made my project more cool...thankyou!!!

@notjustdev 2 года назад

That's awesome. I love that you implemented it in your project.

@amadeomoreno1239 Год назад

CHEERS ! this video simplify my life bro ! keep doing it, great job !! and a lot of thanks

@biswajitroutray9138 2 года назад

thank you sir , your explanation helping me a lot

@AbdulRehman-ux8uj Год назад

Love it great content and clean code

@dindustack 2 года назад

Thanks for sharing!

@mosdev1663 2 года назад

Thank you very much 🙏

@dineshsubba8150 2 года назад

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

@notjustdev 2 года назад

Happy to hear that!

@dineshsubba8150 2 года назад

@@notjustdev waiting for part 4 cheers

@dhruv.pandey93 2 года назад

Great tutorial and well linked to previous videos. Just a suggestion, Formik for forms and Yup for validation would have been a lot easier.

@conveythis 2 года назад

Good video. Thanks

@TheTraderRam Год назад

Great man.

@brilliantatosam6882 2 года назад

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

@notjustdev 2 года назад

There is a video tutorial on my channel on how to setup your environment, for both windows and macos

@skilllearn904 2 года назад

amazing tutorial please make next video on firebase authentication with this series

@luatnguyenvan417 Год назад

thanks for today

@khalilbugti4079 Год назад

Great Brother

@jordandesjardins7599 2 года назад

great video, I learned a lot! ~Wirl

@abdullahshaban1545 Год назад

u did excellent job in front end. but gotta say if u used any backend scripting language, the application would be awesome

@momalbaloch4809 2 года назад

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?

@abhaysharma7760 Год назад

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.

@ab.kaafarani781 2 года назад

when is part 4 coming out ?

@serg1221 2 года назад

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?

@skilllearn904 2 года назад

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

@baobaostore Год назад

nice

@dockies Год назад

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?

@codecrusaderchronicles-zj7jc Год назад

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.

@NamLe-sl4qy 2 года назад

so should I use it in conjunction with Yup? I see people often use that.

@bengal988 Год назад

How can I map over the custom input with existing form data and still provide a unique name of my choice?

@userinconnu2852 8 месяцев назад

thanks of french

@janiduathukorala7442 2 года назад

Hi, I need to use a datetime picker with react hook form.do you know how.I tried but could not succeed.

@bestsolution794 2 года назад

Can you please let me know how we can upload react-native cli app into the expo

@ray-505 2 года назад

you safe me bro with this turotial, thumbs up and subsribe

@venkatasubbarajuganapathir9766 Год назад

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

@bestsolution794 2 года назад

Are you using expo or react native cli ??

@joyinmahmmadaslamlaskar3355 Год назад

Thank you brother But where is the backend part

@chinsinsimakande4917 9 месяцев назад

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.?

@dyk837 Год назад

Where is your back end video of these series,i need help of it for my college project....

@carvajalchristianfranc5056 Год назад

please make how to authenticate login using redux api from dummy server auth following this guide

@aryanarya72 2 года назад

I was getting error: e.render is not a function when I was making the Controller inside CustomInput Component.

@anitakardam2333 2 года назад

How can we add icons in this also label?

@growthhacking9126 2 года назад

Next Invite only APP. Please Vadim.

@zare775 Год назад

👏

@gouravnainwaya5669 2 года назад

bro plz make file sharing app

@rajchaudhary3452 Год назад

Great tutorial, but it is how to call API with jwt authentication. Can you please make a video on the same, please

@user-le7jy4ow8n 2 года назад

200 like 👍🏻

@reactversechannel Год назад

how to console only data.code instead of both code and password i used console.warn(data.code)

@AlexisPizarroAbarca 2 года назад

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 .....

@AlexisPizarroAbarca 2 года назад

Solved... It was a Bracket comment pair issue....

@aidanwalker7136 2 года назад

What is the difference between using a controller on the custom input vs using {...register}?

@notjustdev 2 года назад

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.

@aidanwalker7136 2 года назад

@@notjustdev oh yes I was confused by this, thanks a lot for clearing that up :)

@ericscalise8235 Год назад

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?

@ramakrishnaheyhai Год назад

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

@girofare Год назад

Hi! the file src\aws-exports doesn't exist

@paulokloster6352 Год назад

where is the backend vide ?

@twahirnuckcheddy3974 2 года назад

how to validate only Numeric value.. example Phone Number

@paulvg92 Год назад

where is the github repository ?

@kaioneal6160 8 месяцев назад

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