Тёмный

React Native Login Authentication PART 1 (step-by-step tutorial) 

notJust․dev
Подписаться 113 тыс.
Просмотров 212 тыс.
50% 1

In this tutorial you'll learn how to implement login authentication flow in React Native: Sign In, Confirm Sign Up, Reset Password, Custom Inputs, Custom buttons, and much more!
📚 Enroll NOW for "The Full-stack Mobile Developer" and save 30%
academy.notjust.dev/
🚀 Keep going with 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...
💬 Join the notJust Development gang and let's build together
/ discord
Tag me on social media when you finish this build, and I will give you feedback on your project:
Twitter: / vadimnotjustdev
IG: / vadimnotjus. .
LinkedIn: / vadimsavin
Design credit: Sandeep Kasundra, dribbble.com/shots/5105816-Lo...
Chapters:
0:00 Intro - Authentication flow in React Native
01:58 Initialize a new React Native Project
06:15 React Native Project Folder Structure
08:13 Sign In Screen - Logo
14:15 Custom Username & Password Input
22:10 Custom Buttons (Sign In, Forgot Password, Social Media Buttons)
37:50 Overview, Agenda for Part 2 (Sign Up, Create an Account, Reset Password, React Navigation)
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

Наука

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

 

27 июн 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 168   
@notjustdev
@notjustdev 2 года назад
🕹 Asset Bundle( dummy data, images, icons, PDF presentation, unlimited karma) assets.notjust.dev/authentication
@saurabh-ny8cn
@saurabh-ny8cn 2 года назад
Why don't you build a project in which we can pay and buy in real.
@MsItachi07
@MsItachi07 2 года назад
i'm watching you for a while and today is the day a decided to leave an comment. GREAT JOB MAN, i am wondered how easy you make it look, your tutorials are very comprehensible so a beginner like me can understand most of the information you are providing and implement it into a real work, so i really congratulate you and thanks for your job, just keep doing it!!! #notJustDev
@kleidilamka6093
@kleidilamka6093 2 года назад
You are the greates developer on youtube. I started last november react native and the progress is huge only because of you. Thank you Vadim
@bmejia220
@bmejia220 2 года назад
Awesome job Vadim. Your code is looking better than ever. I appreciate what you do!
@notjustdev
@notjustdev 2 года назад
Thanks Bryant 🙏
@bmejia220
@bmejia220 2 года назад
Love you buddy. Very happy to see you doing well and improving yet!
@kizzaroland3929
@kizzaroland3929 2 года назад
this is really dope keep up the spirit this channel will grow
@javidbasha8361
@javidbasha8361 2 года назад
Hey bro....ur the best developer i thought while i watching bcoz,,i watched so many tutorials befr but aftr watching in this tutorial i completed decided to fallback from civil engg to softr engg world.....thnk u so much broo ....love u from india.....❤️❤️❤️❤️❤️❤️
@AmitKumar-li4uy
@AmitKumar-li4uy 2 года назад
Because of people like you, the dreams of people like us are fulfilled. 🤝
@notjustdev
@notjustdev 2 года назад
I am blessed
@ostennetto8251
@ostennetto8251 2 года назад
You are the best teacher I have seen so far
@volkankaban
@volkankaban 2 года назад
Great explanation and helpful video for beginners!
@lubeats9989
@lubeats9989 2 года назад
you are awesome Vadim. thanks for your great videos
@sinlap8384
@sinlap8384 Год назад
Thank you!!!! This was very helpful, I have learned a lot in this tutorial!
@ajaykumaryadav6564
@ajaykumaryadav6564 2 года назад
Brother you're awesome, I learn a lot from you. Keep it up
@notjustdev
@notjustdev 2 года назад
Thanks, will do!
@sandeepkasundra
@sandeepkasundra 2 года назад
Thank you so much for appreciating my design. Great Demo :)
@notjustdev
@notjustdev 2 года назад
Thanks Sandeep. It's sweet and simple, exactly what I needed for this tutorial
@notjustdev
@notjustdev 2 года назад
If you want to showcase more of your work, shot me a DM and we can think of some collaborations.
@matthewcommerford1499
@matthewcommerford1499 2 года назад
Excellent tutorial dude! Keep it up!
@hamzashaieb7016
@hamzashaieb7016 2 года назад
Really your channel content it so great , Thanks for your efforts to edit those tutorials,keep going 💪🙂
@Nathan_Tsui0410
@Nathan_Tsui0410 Год назад
very good! This video helped me a lot to follow along step by step.
@racovitaalexei
@racovitaalexei 2 года назад
Welcome back ! 💪🏼
@notjustdev
@notjustdev 2 года назад
Let's gooo
@shortflicks83
@shortflicks83 9 месяцев назад
I understand this concept in a very easy way thanks a lot
@jesusramirezmeza
@jesusramirezmeza 2 года назад
Gran trabajo, gracias por tus aportes, me sirven mucho para iniciar en el mundo de apps con reactnative
@satyamsingh-qp7fj
@satyamsingh-qp7fj 2 года назад
Ayee Vadim good to see you 😎
@notjustdev
@notjustdev 2 года назад
hey, nice to see you here
@xeyalteyyubov1175
@xeyalteyyubov1175 2 года назад
beautiful, thanks Vadim
@DanielSilva-nr2cd
@DanielSilva-nr2cd 2 года назад
Now THAT's a step by step tutorial.
@KiranKumar-sb3ti
@KiranKumar-sb3ti Год назад
Thanks for the value addition bro.
@idontknow472
@idontknow472 2 года назад
Thank you very much for all your videos.
@raybelmo
@raybelmo 2 года назад
Welcome back!
@notjustdev
@notjustdev 2 года назад
Thanks
@scottjordan6483
@scottjordan6483 3 месяца назад
"Ok, let's import the style shit.." Lol. Love the accent man, made my day. Great video, too!
@notjustdev
@notjustdev 3 месяца назад
Hahaha, thanks 😁🙌
@tamasbeszedics
@tamasbeszedics 2 года назад
Thanks for your awesome explanation boi 👏. When will the next part come?
@DigitalAndTradingSolutions
@DigitalAndTradingSolutions Год назад
really really amazing and appreciated video, very knowledgeable
@teshell8317
@teshell8317 Год назад
Thank you for this tutorial !
@javiermartin3902
@javiermartin3902 2 года назад
Nice one. Miss typescript till i saw the button component.
@pampaman5205
@pampaman5205 2 года назад
Sen varya adamsın adam adam emeğine sağlık kral seviliyorsun
@AminurRahman-it1uq
@AminurRahman-it1uq Год назад
Great video. Please make a playlists and add in description box. It will be very helpful for us.
@javidbasha8361
@javidbasha8361 2 года назад
I just started react native proggaming language only from 1week bfr,i had so many confusions ufff but i watching vedios getting some confidence towrds programming languages....
@bao8212
@bao8212 Год назад
Thank you bro, you save my day
@Akosiyawin
@Akosiyawin 2 года назад
Wow I learned a lot!
@wethinkcloud8970
@wethinkcloud8970 2 года назад
welcome back , wait for part 2 .. AWS right?
@notjustdev
@notjustdev 2 года назад
part 2 will be UI for the rest of the screens, and part 3 AWS
@bengreat6889
@bengreat6889 2 года назад
Hey vadim welcome back
@notjustdev
@notjustdev 2 года назад
hola
@vitorpeixoto915
@vitorpeixoto915 2 года назад
28:28 rsrsrsrsrs!!!! You are the best, Man!!!
@user-xd2iz6os5g
@user-xd2iz6os5g 11 месяцев назад
You are just awesome !
@vigneshwaran8289
@vigneshwaran8289 2 года назад
awesome explanation
@walissonsouza9762
@walissonsouza9762 2 года назад
awesome! Thanks very much!!
@passsacaglia
@passsacaglia 2 года назад
Amazing!!! Could you do a Twitch app (if you already not haven't done it maybe haha?) or something with e-Learning like a course platform like Podia or Teachable or something even easier w dashboard etc. One course + Stripe integration for example or accept something with crypto??? Love your channel!
@petero.oyebanji959
@petero.oyebanji959 2 года назад
Hey vadim, great job man. Quick question I do yo I fix my code so I can see the button after the pressable
@realtorBG
@realtorBG 2 года назад
amazing mentor
@jayasreeb8221
@jayasreeb8221 2 года назад
Thank you so much for your video
@Gero141
@Gero141 Год назад
Excellent explaination
@ahmedmustafa907
@ahmedmustafa907 Год назад
Have I seen you before?
@Gero141
@Gero141 Год назад
@@ahmedmustafa907 HEHEHE BOAAYYYY
@carlospatrick8937
@carlospatrick8937 Год назад
Legend says he's still not back..
@JamalVlogs
@JamalVlogs 9 месяцев назад
Your doing good 😊, I have a question how we can run 2 react native cli app in single machine? Can you please do one tutorial for this?
@mochammadfariz2488
@mochammadfariz2488 2 года назад
sir thank you for lesson!
@joecolas
@joecolas 2 года назад
very good tuto
@marwasalah5723
@marwasalah5723 2 года назад
Welcome back Can you make a video of how to connect it with real database??
@notjustdev
@notjustdev 2 года назад
In the next videos from this series, we will connect this with Amplify authentication
@marwasalah5723
@marwasalah5723 2 года назад
@@notjustdev Thank you , waiting for them🤩🔥
@RiseAndFlourish
@RiseAndFlourish Год назад
great video, but you move too fast. i had to rewatch the 20min mark like 10 times before i realized you changed the securetextentry from true to securetextentry in the custominput file cuz you change from file to file so fast. anyways, great to see that this video is still relevant a year later from publishing!
@strxndo666
@strxndo666 Год назад
bro why u didnt put that svg's logo of the username, password button etc that u have on your pdf relationed to the design project?
@TJAofficial
@TJAofficial 2 года назад
Do you have a video showing how to set up the Facebook login?
@kimhyungchae
@kimhyungchae 2 года назад
Good thx:)
@almande1139
@almande1139 2 года назад
There is a difference when you use expo ? Cause my app.js don't found the other page
@Dabayare
@Dabayare 2 года назад
What was that shortcut("rnfe") u did for the boiler code @7:00 ? Did it on my VSCode and did not work probably missing some configuration.
@tamasbeszedics
@tamasbeszedics 2 года назад
It's an vscode extension: ES7 React/Redux/GraphQL/React-Native snippets by dsznajder
@Fighterfilms1
@Fighterfilms1 2 года назад
@@tamasbeszedics thank you!!!!
@ledinhthai69
@ledinhthai69 Год назад
Hi! I code by VScode and show result by android studio. Everything is ok and then I change my screen from portrait to landscape but the layout does not change to. You please tell me why and what I should do to repair the error. Thanks for your help
@yonelajohannes
@yonelajohannes 2 года назад
Thank you bro..
@notjustdev
@notjustdev 2 года назад
Welcome
@Dabayare
@Dabayare 2 года назад
How was your emulator refreshing? Mine breaks and I have to rebuild again.
@alexisbustamante7950
@alexisbustamante7950 2 года назад
Thnaks!!!!!!1
@deepshikharoy4779
@deepshikharoy4779 Год назад
Its showing an error"none of these files exists: src\ components \CustomInput" how to fix this error? I have done exactly the same u did but still it's showing an error
@NguyenChiCong-sk3id
@NguyenChiCong-sk3id 2 месяца назад
Can you give me some recommend for the react native snippet
@sanjanachauhan8577
@sanjanachauhan8577 2 года назад
Thanks
@jyotipatidar4838
@jyotipatidar4838 2 года назад
Are you doing stream this Friday
@HetalPatel-hg4wk
@HetalPatel-hg4wk Год назад
Do we need to know javascript before learning & developing app in react ?
@vivekc2303
@vivekc2303 2 года назад
Pls upload a video on Phone number Auth also using firebase and react native.
@khalildaoud
@khalildaoud Год назад
Can you please tell us about your extensions
@bharatmishra250
@bharatmishra250 2 года назад
I think u should use MacBook Pro react native development projects so that we can clearly encounter the problems and thier solution for simmulaor and emmulator ❤️
@radar_raps
@radar_raps 2 года назад
My logo disappeared somewhere and I can’t see it but it says it’s the right path for importing so it seems as if it’s there but doesn’t show up.
@codingog5554
@codingog5554 2 года назад
Same here, I'm not using his files but my own, and the same has happened.
@smellycheese5948
@smellycheese5948 Год назад
what to do about this??
@RafalBlazejewski
@RafalBlazejewski Год назад
Love your content! Quick question though, for some reason the type functionality for styling doesn't seem to work for me? This => styles['container_${type}' any clue as to why? I'm using expo but that shouldn't be the problem? Any help would be appreciated!
@gregorycurl8349
@gregorycurl8349 5 месяцев назад
I'm having the same issue. Did find a solution?
@jasper8666
@jasper8666 3 месяца назад
use the single back quote key (key next to the 1 key).
@marklemuelperia1925
@marklemuelperia1925 9 месяцев назад
Can I use this for my Inventory System App?
@joaovitorsasso732
@joaovitorsasso732 2 года назад
what theme is this? great content btw!!!
@notjustdev
@notjustdev 2 года назад
Checkout the video about my vscode extensions and theme
@zainulabdinshaikh2758
@zainulabdinshaikh2758 2 года назад
I keep on getting "segmentation fault" when typing adb. Does anyone have a solution for this?
@javeriaafsar4495
@javeriaafsar4495 Год назад
@notjustdev How i can put a password(hide and show) icon inside a Password TextInput Fields???
@colarov87
@colarov87 2 года назад
why a index.js in each screen directory? Why does it help?
@aojiao3662
@aojiao3662 2 года назад
When you typed rnfe at 7:00, what extension in VScode is that?
@benmohamedhatem8625
@benmohamedhatem8625 2 года назад
ES7 React/Redux/GraphQL/React-Native snippets by dsznajder
@diogopinhel
@diogopinhel Год назад
Hello I have a question: Does anyone know how I can make the user log in to have a profile screen where his name, height, weight and his photo appear?
@wons4724
@wons4724 2 года назад
I want to save it using Async Storage, How should I do?
@victoronofiok520
@victoronofiok520 2 года назад
Vadim😭👍🔥
@RamanandSingh
@RamanandSingh 2 года назад
Vadim the UI is off Pradip Debnath RU-vid channel right?
@notjustdev
@notjustdev 2 года назад
I found it on Dribble. In the description I included the credits Design credit: Sandeep Kasundra, dribbble.com/shots/5105816-Login-Registration-UI
@notjustadulting705
@notjustadulting705 2 года назад
Hi, can anyone share what shortcut Vadim is using to import a react native component? I'm not able to get it in VSCode.
@owusuagyemangeric9070
@owusuagyemangeric9070 Год назад
es7 snippet
@vitopenza2313
@vitopenza2313 2 года назад
When I create the different types, my code does not work. The only container that works is the regular one. I am trying how I can rewrite the ${type} so that my code works but have been unsuccessful. I appreciate the feedback, thank you
@tanembasaraner1038
@tanembasaraner1038 2 года назад
you should use backticks instead of normal quatation marks like : `container_${type}`
@IbnMilz
@IbnMilz Год назад
@@tanembasaraner1038 thanks this helped I got stuck all day
@P0ckatoo
@P0ckatoo Год назад
Does anyone know why he puts a index.js file for every time he makes a component?
@lo-ficup
@lo-ficup 2 года назад
Can i do the same on expo ?
@mrweng4192
@mrweng4192 2 года назад
Good day, can I have a question? why I cant open the app in the emulator :( I mean it says failed with an exception when trying to npm run android. I hope someone can answer my question :3
@codingog5554
@codingog5554 2 года назад
For anyone stuck on uploading their picture still, here is what I tried and what I did last (which made it work): Things you can try: renamed file to Logo_1 from my file explorer renamed file to Logo_1.png inside of VSCode edited the code in VSCode, inside file SignInScreen.js Make sure to closely revise your code: import React from 'react'; import { View, Text, Image, StyleSheet, useWindowDimensions } from 'react-native'; import Logo from '../../../assets/images/Logo_1.png'; const SignInScreen = () => { const{height}=useWindowDimensions(); return ( ); }; const styles = StyleSheet.create({ root:{ alignItems:'center', padding:20, } logo: { width: '70%', MaxWidth: 300, MaxHeight: 100, }, }); export default SignInScreen --------------------------------------------------------------------------------------------------------------------------------------------------------------------- In line ( ) which is near the middle of the script as of minute 11:39 I found I had a mistake, with (instead of ending with {styles.logo}/> at the end, if that makes sense) A couple minutes later I kept on getting a red screen saying "Could not connect to development server" as a message and my updates in the code were not updating, first of all I had missed a couple of (;) symbols in some places, so MAKE SURE TO DOUBLE CHECK YOUR CODE! Most of the time, mistakes are in small misclicks in your code instead of your system. I entered my terminal, wrote cd projects/YourAppNameHere, then wrote npm start, clicked (r) to reload the app as prompted (if you get a warning message here, it means there is something wrong with your code, fix it and try again). After that, to make sure your device is connected, open a new terminal page and use the command $ adb devices. An extra step would be to check that your return is 8081 on command $ adb reverse tcp:8081 tcp:8081. After this, your virtual device should work reload on its own if all was done correctly. (I had to do this one more time so far, I opened the terminal again when I kept on getting the notification, and ran these 2 commands: CodingCween@DESKTOP ~ $ cd projects/ProjectName CodingCween@DESKTOP\ ~/projects/\ProjectName $ npm run android Just hopes this helps, this frustrated me a lot at the beginning but Hopefully you can solve all challenges you are faced with, Happy Coding!
@sohamjain6206
@sohamjain6206 Год назад
Absolute legend thx man
@bhushanjoshi9089
@bhushanjoshi9089 10 месяцев назад
15:10 Here I can't Be Able To See Custom Input text in Bottom of The Image, Whats Wrong With Me? If Anyone Suffered From This Please Tell Me Solution.
@StehMa9
@StehMa9 2 года назад
How is this free ? I think you dropped this 👑
@notjustdev
@notjustdev 2 года назад
Thanks :)
@haroonphotos
@haroonphotos 2 года назад
Where can I get the CODE of this project??
@rahulkhandelwal6480
@rahulkhandelwal6480 2 года назад
sir please make otp best authentication in react-native
@ronaldocerbo2878
@ronaldocerbo2878 Год назад
hi, Why type element not functioning?. thanks
@sengokusky1515
@sengokusky1515 2 года назад
еее! Оч познавательно :)
@notjustdev
@notjustdev 2 года назад
Spasibo
@eversnow.
@eversnow. 2 года назад
please help my logo doesnt even show :(
@tsfgt9000
@tsfgt9000 2 года назад
i love watching this dude tutorial .....but i can't download assets man
@MangoFlamingo
@MangoFlamingo 2 года назад
Is there a way to contact you? I need an advice on my architecture. Let me know what do you want in exchange
@muhammadimran-qx4oj
@muhammadimran-qx4oj 2 года назад
My login page is not run after button
@oneafrodev
@oneafrodev 2 года назад
does it cover saving the user state to local storage?
@notjustdev
@notjustdev 2 года назад
not in this part. In the next parts we will integrate it with AWS amplify
@alisherkhan8851
@alisherkhan8851 Год назад
Mac or Window for development ?
@ryanreydumpasan1449
@ryanreydumpasan1449 2 года назад
what extension did you used for react snippets sir?
@av7758
@av7758 Год назад
ES7+ React/Redux/React-Native snippets. Took a while to find it out. Happy Coding
@onelook1870
@onelook1870 2 года назад
Without Expo?
Далее
React Native Login with JWT Auth Context
24:59
Просмотров 50 тыс.
I STUNNED THE WORLD CHAMPION!!!!!!
30:56
Просмотров 339 тыс.
Turning bad React code into senior React code
13:10
Просмотров 86 тыс.
I Played Fabiano Caruana
12:03
Просмотров 67 тыс.
Игровой Комп с Авито за 4500р
1:00
Gizli Apple Watch Özelliği😱
0:14
Просмотров 3,8 млн
ДЕШЕВЫЙ НОУТБУК C OZON ЗА 17000р
13:00