React Native Login Authentication PART 1 (step-by-step tutorial)
Ғылым және технология
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
Пікірлер: 168
🕹 Asset Bundle( dummy data, images, icons, PDF presentation, unlimited karma) assets.notjust.dev/authentication
@saurabh-ny8cn
2 жыл бұрын
Why don't you build a project in which we can pay and buy in real.
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
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
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.....❤️❤️❤️❤️❤️❤️
Awesome job Vadim. Your code is looking better than ever. I appreciate what you do!
@notjustdev
2 жыл бұрын
Thanks Bryant 🙏
@bmejia220
2 жыл бұрын
Love you buddy. Very happy to see you doing well and improving yet!
Because of people like you, the dreams of people like us are fulfilled. 🤝
@notjustdev
2 жыл бұрын
I am blessed
Thank you!!!! This was very helpful, I have learned a lot in this tutorial!
this is really dope keep up the spirit this channel will grow
very good! This video helped me a lot to follow along step by step.
Really your channel content it so great , Thanks for your efforts to edit those tutorials,keep going 💪🙂
I understand this concept in a very easy way thanks a lot
Great explanation and helpful video for beginners!
you are awesome Vadim. thanks for your great videos
You are the best teacher I have seen so far
Gran trabajo, gracias por tus aportes, me sirven mucho para iniciar en el mundo de apps con reactnative
Excellent tutorial dude! Keep it up!
Thank you very much for all your videos.
Brother you're awesome, I learn a lot from you. Keep it up
@notjustdev
2 жыл бұрын
Thanks, will do!
Thanks for the value addition bro.
Thank you so much for appreciating my design. Great Demo :)
@notjustdev
2 жыл бұрын
Thanks Sandeep. It's sweet and simple, exactly what I needed for this tutorial
@notjustdev
2 жыл бұрын
If you want to showcase more of your work, shot me a DM and we can think of some collaborations.
beautiful, thanks Vadim
really really amazing and appreciated video, very knowledgeable
Thanks for your awesome explanation boi 👏. When will the next part come?
Thank you for this tutorial !
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....
Great video. Please make a playlists and add in description box. It will be very helpful for us.
Nice one. Miss typescript till i saw the button component.
Now THAT's a step by step tutorial.
Thank you bro, you save my day
Welcome back ! 💪🏼
@notjustdev
2 жыл бұрын
Let's gooo
"Ok, let's import the style shit.." Lol. Love the accent man, made my day. Great video, too!
@notjustdev
2 ай бұрын
Hahaha, thanks 😁🙌
awesome! Thanks very much!!
Wow I learned a lot!
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!
Hey vadim, great job man. Quick question I do yo I fix my code so I can see the button after the pressable
Sen varya adamsın adam adam emeğine sağlık kral seviliyorsun
Thank you so much for your video
Ayee Vadim good to see you 😎
@notjustdev
2 жыл бұрын
hey, nice to see you here
You are just awesome !
awesome explanation
Welcome back!
@notjustdev
2 жыл бұрын
Thanks
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?
sir thank you for lesson!
amazing mentor
welcome back , wait for part 2 .. AWS right?
@notjustdev
2 жыл бұрын
part 2 will be UI for the rest of the screens, and part 3 AWS
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!
Excellent explaination
@ahmedmustafa907
Жыл бұрын
Have I seen you before?
@Gero141
Жыл бұрын
@@ahmedmustafa907 HEHEHE BOAAYYYY
28:28 rsrsrsrsrs!!!! You are the best, Man!!!
There is a difference when you use expo ? Cause my app.js don't found the other page
very good tuto
Welcome back Can you make a video of how to connect it with real database??
@notjustdev
2 жыл бұрын
In the next videos from this series, we will connect this with Amplify authentication
@marwasalah5723
2 жыл бұрын
@@notjustdev Thank you , waiting for them🤩🔥
Hey vadim welcome back
@notjustdev
2 жыл бұрын
hola
Do you have a video showing how to set up the Facebook login?
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?
How was your emulator refreshing? Mine breaks and I have to rebuild again.
Thanks
Good thx:)
Can you give me some recommend for the react native snippet
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
Legend says he's still not back..
Thank you bro..
@notjustdev
2 жыл бұрын
Welcome
Do we need to know javascript before learning & developing app in react ?
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
2 жыл бұрын
It's an vscode extension: ES7 React/Redux/GraphQL/React-Native snippets by dsznajder
@Fighterfilms1
2 жыл бұрын
@@tamasbeszedics thank you!!!!
Pls upload a video on Phone number Auth also using firebase and react native.
Can I use this for my Inventory System App?
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
@notjustdev How i can put a password(hide and show) icon inside a Password TextInput Fields???
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
5 ай бұрын
I'm having the same issue. Did find a solution?
@jasper8666
3 ай бұрын
use the single back quote key (key next to the 1 key).
Are you doing stream this Friday
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 ❤️
why a index.js in each screen directory? Why does it help?
I want to save it using Async Storage, How should I do?
what theme is this? great content btw!!!
@notjustdev
2 жыл бұрын
Checkout the video about my vscode extensions and theme
Can you please tell us about your extensions
When you typed rnfe at 7:00, what extension in VScode is that?
@benmohamedhatem8625
2 жыл бұрын
ES7 React/Redux/GraphQL/React-Native snippets by dsznajder
Thnaks!!!!!!1
I keep on getting "segmentation fault" when typing adb. Does anyone have a solution for this?
Can i do the same on expo ?
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?
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
Жыл бұрын
es7 snippet
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
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
Жыл бұрын
Same here, I'm not using his files but my own, and the same has happened.
@smellycheese5948
Жыл бұрын
what to do about this??
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.
Does anyone know why he puts a index.js file for every time he makes a component?
Vadim the UI is off Pradip Debnath KZread channel right?
@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
hi, Why type element not functioning?. thanks
Mac or Window for development ?
Is there a way to contact you? I need an advice on my architecture. Let me know what do you want in exchange
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
2 жыл бұрын
you should use backticks instead of normal quatation marks like : `container_${type}`
@IbnMilz
Жыл бұрын
@@tanembasaraner1038 thanks this helped I got stuck all day
Vadim😭👍🔥
sir please make otp best authentication in react-native
does it cover saving the user state to local storage?
@notjustdev
2 жыл бұрын
not in this part. In the next parts we will integrate it with AWS amplify
what extension did you used for react snippets sir?
@av7758
Жыл бұрын
ES7+ React/Redux/React-Native snippets. Took a while to find it out. Happy Coding
i love watching this dude tutorial .....but i can't download assets man
How is this free ? I think you dropped this 👑
@notjustdev
2 жыл бұрын
Thanks :)
@haroonphotos
2 жыл бұрын
Where can I get the CODE of this project??
please help my logo doesnt even show :(
Can this be done in expo cli as well?
@notjustdev
2 жыл бұрын
This part yes. I the next parts, we might use some libraries that are not compatible with expo, but at that point you can eject the project and continue with a bare workflow.
where can i find the code
Without Expo?
My login page is not run after button