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

  • @notjustdev
    @notjustdev2 жыл бұрын

    🕹 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
    @MsItachi072 жыл бұрын

    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
    @kleidilamka60932 жыл бұрын

    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

  • @javidbasha8361
    @javidbasha83612 жыл бұрын

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

  • @bmejia220
    @bmejia2202 жыл бұрын

    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!

  • @AmitKumar-li4uy
    @AmitKumar-li4uy2 жыл бұрын

    Because of people like you, the dreams of people like us are fulfilled. 🤝

  • @notjustdev

    @notjustdev

    2 жыл бұрын

    I am blessed

  • @sinlap8384
    @sinlap8384 Жыл бұрын

    Thank you!!!! This was very helpful, I have learned a lot in this tutorial!

  • @kizzaroland3929
    @kizzaroland39292 жыл бұрын

    this is really dope keep up the spirit this channel will grow

  • @Nathan_Tsui0410
    @Nathan_Tsui0410 Жыл бұрын

    very good! This video helped me a lot to follow along step by step.

  • @hamzashaieb7016
    @hamzashaieb70162 жыл бұрын

    Really your channel content it so great , Thanks for your efforts to edit those tutorials,keep going 💪🙂

  • @shortflicks83
    @shortflicks838 ай бұрын

    I understand this concept in a very easy way thanks a lot

  • @volkankaban
    @volkankaban2 жыл бұрын

    Great explanation and helpful video for beginners!

  • @lubeats9989
    @lubeats99892 жыл бұрын

    you are awesome Vadim. thanks for your great videos

  • @ostennetto8251
    @ostennetto82512 жыл бұрын

    You are the best teacher I have seen so far

  • @jesusramirezmeza
    @jesusramirezmeza2 жыл бұрын

    Gran trabajo, gracias por tus aportes, me sirven mucho para iniciar en el mundo de apps con reactnative

  • @matthewcommerford1499
    @matthewcommerford14992 жыл бұрын

    Excellent tutorial dude! Keep it up!

  • @idontknow472
    @idontknow4722 жыл бұрын

    Thank you very much for all your videos.

  • @ajaykumaryadav6564
    @ajaykumaryadav65642 жыл бұрын

    Brother you're awesome, I learn a lot from you. Keep it up

  • @notjustdev

    @notjustdev

    2 жыл бұрын

    Thanks, will do!

  • @KiranKumar-sb3ti
    @KiranKumar-sb3ti Жыл бұрын

    Thanks for the value addition bro.

  • @sandeepkasundra
    @sandeepkasundra2 жыл бұрын

    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.

  • @xeyalteyyubov1175
    @xeyalteyyubov11752 жыл бұрын

    beautiful, thanks Vadim

  • @DigitalAndTradingSolutions
    @DigitalAndTradingSolutions Жыл бұрын

    really really amazing and appreciated video, very knowledgeable

  • @tamasbeszedics
    @tamasbeszedics2 жыл бұрын

    Thanks for your awesome explanation boi 👏. When will the next part come?

  • @teshell8317
    @teshell8317 Жыл бұрын

    Thank you for this tutorial !

  • @javidbasha8361
    @javidbasha83612 жыл бұрын

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

  • @AminurRahman-it1uq
    @AminurRahman-it1uq Жыл бұрын

    Great video. Please make a playlists and add in description box. It will be very helpful for us.

  • @javiermartin3902
    @javiermartin39022 жыл бұрын

    Nice one. Miss typescript till i saw the button component.

  • @DanielSilva-nr2cd
    @DanielSilva-nr2cd2 жыл бұрын

    Now THAT's a step by step tutorial.

  • @bao8212
    @bao8212 Жыл бұрын

    Thank you bro, you save my day

  • @racovitaalexei
    @racovitaalexei2 жыл бұрын

    Welcome back ! 💪🏼

  • @notjustdev

    @notjustdev

    2 жыл бұрын

    Let's gooo

  • @scottjordan6483
    @scottjordan64833 ай бұрын

    "Ok, let's import the style shit.." Lol. Love the accent man, made my day. Great video, too!

  • @notjustdev

    @notjustdev

    2 ай бұрын

    Hahaha, thanks 😁🙌

  • @walissonsouza9762
    @walissonsouza97622 жыл бұрын

    awesome! Thanks very much!!

  • @Akosiyawin
    @Akosiyawin2 жыл бұрын

    Wow I learned a lot!

  • @passsacaglia
    @passsacaglia2 жыл бұрын

    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.oyebanji9592 жыл бұрын

    Hey vadim, great job man. Quick question I do yo I fix my code so I can see the button after the pressable

  • @pampaman5205
    @pampaman52052 жыл бұрын

    Sen varya adamsın adam adam emeğine sağlık kral seviliyorsun

  • @jayasreeb8221
    @jayasreeb82212 жыл бұрын

    Thank you so much for your video

  • @satyamsingh-qp7fj
    @satyamsingh-qp7fj2 жыл бұрын

    Ayee Vadim good to see you 😎

  • @notjustdev

    @notjustdev

    2 жыл бұрын

    hey, nice to see you here

  • @user-xd2iz6os5g
    @user-xd2iz6os5g11 ай бұрын

    You are just awesome !

  • @vigneshwaran8289
    @vigneshwaran82892 жыл бұрын

    awesome explanation

  • @raybelmo
    @raybelmo2 жыл бұрын

    Welcome back!

  • @notjustdev

    @notjustdev

    2 жыл бұрын

    Thanks

  • @JamalVlogs
    @JamalVlogs8 ай бұрын

    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
    @mochammadfariz24882 жыл бұрын

    sir thank you for lesson!

  • @realtorBG
    @realtorBG2 жыл бұрын

    amazing mentor

  • @wethinkcloud8970
    @wethinkcloud89702 жыл бұрын

    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

  • @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!

  • @Gero141
    @Gero141 Жыл бұрын

    Excellent explaination

  • @ahmedmustafa907

    @ahmedmustafa907

    Жыл бұрын

    Have I seen you before?

  • @Gero141

    @Gero141

    Жыл бұрын

    @@ahmedmustafa907 HEHEHE BOAAYYYY

  • @vitorpeixoto915
    @vitorpeixoto9152 жыл бұрын

    28:28 rsrsrsrsrs!!!! You are the best, Man!!!

  • @almande1139
    @almande11392 жыл бұрын

    There is a difference when you use expo ? Cause my app.js don't found the other page

  • @joecolas
    @joecolas2 жыл бұрын

    very good tuto

  • @marwasalah5723
    @marwasalah57232 жыл бұрын

    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🤩🔥

  • @bengreat6889
    @bengreat68892 жыл бұрын

    Hey vadim welcome back

  • @notjustdev

    @notjustdev

    2 жыл бұрын

    hola

  • @TJAofficial
    @TJAofficial2 жыл бұрын

    Do you have a video showing how to set up the Facebook login?

  • @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?

  • @Dabayare
    @Dabayare2 жыл бұрын

    How was your emulator refreshing? Mine breaks and I have to rebuild again.

  • @sanjanachauhan8577
    @sanjanachauhan85772 жыл бұрын

    Thanks

  • @kimhyungchae
    @kimhyungchae2 жыл бұрын

    Good thx:)

  • @NguyenChiCong-sk3id
    @NguyenChiCong-sk3id2 ай бұрын

    Can you give me some recommend for the react native snippet

  • @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

  • @carlospatrick8937
    @carlospatrick8937 Жыл бұрын

    Legend says he's still not back..

  • @yonelajohannes
    @yonelajohannes2 жыл бұрын

    Thank you bro..

  • @notjustdev

    @notjustdev

    2 жыл бұрын

    Welcome

  • @HetalPatel-hg4wk
    @HetalPatel-hg4wk Жыл бұрын

    Do we need to know javascript before learning & developing app in react ?

  • @Dabayare
    @Dabayare2 жыл бұрын

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

  • @vivekc2303
    @vivekc23032 жыл бұрын

    Pls upload a video on Phone number Auth also using firebase and react native.

  • @marklemuelperia1925
    @marklemuelperia19259 ай бұрын

    Can I use this for my Inventory System App?

  • @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

  • @javeriaafsar4495
    @javeriaafsar4495 Жыл бұрын

    @notjustdev How i can put a password(hide and show) icon inside a Password TextInput Fields???

  • @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).

  • @jyotipatidar4838
    @jyotipatidar48382 жыл бұрын

    Are you doing stream this Friday

  • @bharatmishra250
    @bharatmishra2502 жыл бұрын

    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 ❤️

  • @colarov87
    @colarov872 жыл бұрын

    why a index.js in each screen directory? Why does it help?

  • @wons4724
    @wons47242 жыл бұрын

    I want to save it using Async Storage, How should I do?

  • @joaovitorsasso732
    @joaovitorsasso7322 жыл бұрын

    what theme is this? great content btw!!!

  • @notjustdev

    @notjustdev

    2 жыл бұрын

    Checkout the video about my vscode extensions and theme

  • @khalildaoud
    @khalildaoud Жыл бұрын

    Can you please tell us about your extensions

  • @aojiao3662
    @aojiao36622 жыл бұрын

    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

  • @alexisbustamante7950
    @alexisbustamante79502 жыл бұрын

    Thnaks!!!!!!1

  • @zainulabdinshaikh2758
    @zainulabdinshaikh27582 жыл бұрын

    I keep on getting "segmentation fault" when typing adb. Does anyone have a solution for this?

  • @lo-ficup
    @lo-ficup2 жыл бұрын

    Can i do the same on expo ?

  • @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?

  • @notjustadulting705
    @notjustadulting7052 жыл бұрын

    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

  • @mrweng4192
    @mrweng41922 жыл бұрын

    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

  • @radar_raps
    @radar_raps2 жыл бұрын

    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

    Жыл бұрын

    Same here, I'm not using his files but my own, and the same has happened.

  • @smellycheese5948

    @smellycheese5948

    Жыл бұрын

    what to do about this??

  • @bhushanjoshi9089
    @bhushanjoshi908910 ай бұрын

    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.

  • @P0ckatoo
    @P0ckatoo Жыл бұрын

    Does anyone know why he puts a index.js file for every time he makes a component?

  • @RamanandSingh
    @RamanandSingh2 жыл бұрын

    Vadim the UI is off Pradip Debnath KZread 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

  • @ronaldocerbo2878
    @ronaldocerbo2878 Жыл бұрын

    hi, Why type element not functioning?. thanks

  • @alisherkhan8851
    @alisherkhan8851 Жыл бұрын

    Mac or Window for development ?

  • @MangoFlamingo
    @MangoFlamingo2 жыл бұрын

    Is there a way to contact you? I need an advice on my architecture. Let me know what do you want in exchange

  • @vitopenza2313
    @vitopenza23132 жыл бұрын

    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

  • @victoronofiok520
    @victoronofiok5202 жыл бұрын

    Vadim😭👍🔥

  • @rahulkhandelwal6480
    @rahulkhandelwal64802 жыл бұрын

    sir please make otp best authentication in react-native

  • @abazudosen
    @abazudosen2 жыл бұрын

    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

  • @ryanreydumpasan1449
    @ryanreydumpasan14492 жыл бұрын

    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

  • @tsfgt9000
    @tsfgt90002 жыл бұрын

    i love watching this dude tutorial .....but i can't download assets man

  • @StehMa9
    @StehMa92 жыл бұрын

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

  • @eversnow.
    @eversnow.2 жыл бұрын

    please help my logo doesnt even show :(

  • @isaacsarte2708
    @isaacsarte27082 жыл бұрын

    Can this be done in expo cli as well?

  • @notjustdev

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

  • @joelv9810
    @joelv98102 жыл бұрын

    where can i find the code

  • @onelook1870
    @onelook18702 жыл бұрын

    Without Expo?

  • @muhammadimran-qx4oj
    @muhammadimran-qx4oj2 жыл бұрын

    My login page is not run after button

Келесі