Login Authentication Tutorial in React Native using AsyncStorage | useReducer, useContext, useMemo

แชร์
ฝัง
  • เผยแพร่เมื่อ 6 ม.ค. 2025

ความคิดเห็น • 249

  • @adamfrank9400
    @adamfrank9400 4 ปีที่แล้ว +10

    What I like most about this video is that you took it in two steps, so that allows me and my team to understand the context api first and THEN the reducer, which IMO are two separate and equally difficult concepts to understand.
    Thanks!

  • @thepeacesofsomething
    @thepeacesofsomething 3 ปีที่แล้ว

    Man, thank you!!! You just save my life! I spend about a day read articles, but all of the articles about auth is is not explaining what's happening in details, but with your video I make it just for the 1 our! THAAAAAANX A LOOOOOT!!!!

  • @BrunoCarvalhomCTM
    @BrunoCarvalhomCTM 4 ปีที่แล้ว +9

    Thank you for the tutorial, it was very helpful, even the way that it is presented: you dont just throw codes on our faces, you took the care to explain what each function does and how to use them. Greetings from Brazil!

    • @itzpradip
      @itzpradip  4 ปีที่แล้ว

      Glad it was helpful!

  • @hypersudo8092
    @hypersudo8092 4 ปีที่แล้ว +59

    He covered almost everything in react-navigation version 5. I highly recommend this video for development. lots of learning from it. Thank you so much. Looking more tutorials from you.

    • @itzpradip
      @itzpradip  4 ปีที่แล้ว +2

      Thanks for your comment & support.

    • @hypersudo8092
      @hypersudo8092 4 ปีที่แล้ว +1

      @@itzpradip How can I implement this auth flow with redux??

  • @neerajsaxena8108
    @neerajsaxena8108 4 ปีที่แล้ว +5

    This is by far one of the best tutorials for authentication flow using v5. Amazing work. Keep it up

    • @itzpradip
      @itzpradip  4 ปีที่แล้ว +1

      Wow, thanks!

    • @rajatgoyal8162
      @rajatgoyal8162 4 ปีที่แล้ว +2

      @@itzpradip Hey Bro, your videos are really awesome and you explained each and everything in a very easy way, can you please extend this tutorial and connect this app with firebase (for Authentication and all) please

  • @Yahookudi
    @Yahookudi 4 ปีที่แล้ว +16

    Thank you for your effort. You did a great job and by far, the best and most simplistic tutorial on the internet for this topic!

    • @itzpradip
      @itzpradip  4 ปีที่แล้ว

      Wow, thanks!

  • @chaudharypraveen98
    @chaudharypraveen98 3 ปีที่แล้ว

    Thank you so much. You saved me. I searched a lot but unable to find a good resource for beginner learning auth.

  • @jesuserwinsuarez65
    @jesuserwinsuarez65 2 ปีที่แล้ว

    I've been searching the authentication tutorial of react native and this video is the solution! keep up the good work man!

  • @unknownman1
    @unknownman1 4 ปีที่แล้ว +2

    Just discovered your channel and I must admit your videos are great. Thanks

  • @4You190
    @4You190 3 ปีที่แล้ว +1

    You are the legend of ReactNative thank you for your effort and the way how you explain and simplify it. 👍🏼

  • @ajmalhasan9759
    @ajmalhasan9759 4 ปีที่แล้ว +1

    Sir thank you very much, I am professional react native developer but watching your tutorial for getting knowledge about new RN features. I must say u explained and mentioned everything latest. Thanks again for your great playlist :)

    • @itzpradip
      @itzpradip  4 ปีที่แล้ว

      Glad to hear that

  • @skatelouis6033
    @skatelouis6033 10 หลายเดือนก่อน

    3 years later still saved my ass thank you so much

    • @itzpradip
      @itzpradip  10 หลายเดือนก่อน

      I'm glad that it helped you. 😀

  • @chandikalakshan468
    @chandikalakshan468 3 ปีที่แล้ว

    This still useful for me in 2022. Well organised content that I can absorb easily.

  • @vigneshlokeshbabu1686
    @vigneshlokeshbabu1686 2 ปีที่แล้ว

    Sir, this is something that I exactly wanted. This is literally saving my life. Thank you so so much.

  • @nikhilemmanuelmusic
    @nikhilemmanuelmusic 3 ปีที่แล้ว

    This is the simplest tutorial I found so far. Great job. Thanks a ton.

  • @keld7151
    @keld7151 3 ปีที่แล้ว

    Wonderful tutorial, i'm so glad i found your video.
    I've been struggling for hours, and you're literally the only one that made it simple!
    Thank you so much !!

  • @ajayb8730
    @ajayb8730 2 ปีที่แล้ว

    Very Very useful video bro! Keep Going ... I'll give my full support !

  • @LADodgerBlue
    @LADodgerBlue 4 ปีที่แล้ว

    I have watched many videos on this topic and yours is the most succinct. Thank you!

    • @itzpradip
      @itzpradip  4 ปีที่แล้ว

      Wow, thank you!

  • @sandupaegodage8163
    @sandupaegodage8163 3 ปีที่แล้ว

    you are awesome. I learned a lot. Reaally informative keep up the good work much love from Sri Lanka

  • @TheSHQNKS
    @TheSHQNKS 4 ปีที่แล้ว

    I really love your tutorials man. You help me so much as I am a web developper and I'm developping my first ever mobile app thanks to you.

  • @alexandr999kulpanov
    @alexandr999kulpanov 3 ปีที่แล้ว

    Thank you so much for the work you have done!💪👍 Your videos are very helpful and informative! Greetings from Ukraine!

  • @manojgp1991
    @manojgp1991 3 ปีที่แล้ว

    Awesome login authentication sir,
    This video help me to implement my first app login and auth.
    Thanks sir

  • @girishparate6410
    @girishparate6410 3 ปีที่แล้ว +5

    This playlist is amazing.

  • @NickKubde
    @NickKubde 4 ปีที่แล้ว +1

    Really again Lucky to have you for this tutorial

  • @chukwuemekaedeh30
    @chukwuemekaedeh30 4 ปีที่แล้ว

    Thank you very much sir. I must confess that your tutorials has really helped me in many projects and i can't thank you enough. Keep the good work going. Meanwhile, on your login tutorials, i would like you to add more details like, how to accept custom fields from the registration page. I want to learn how to collect users country and display name and add them to the firebase console. Please make tutotrial on this.

  • @kevink263
    @kevink263 3 ปีที่แล้ว

    thank you! from Vietnam with love

  • @jidnyeshaj9219
    @jidnyeshaj9219 3 ปีที่แล้ว

    Cant thank you enough. Thanks man for such a clean explaination

  • @HelianGamePiano
    @HelianGamePiano 2 ปีที่แล้ว

    Thank you, please allow me to note for my works !
    8:37 - Sign out in DRAWER screen.
    19:35 - Async. 20:51 - explanation.

  • @grkraogajini6027
    @grkraogajini6027 4 ปีที่แล้ว +1

    Nice concept explaining us, thank you . And we need more tutorials from you

    • @itzpradip
      @itzpradip  4 ปีที่แล้ว

      Thanks, keep supporting for more tutorials like this.

  • @jaydeepdas9326
    @jaydeepdas9326 4 ปีที่แล้ว

    thinks from making this video...I will gain lot of knowledge.. from ur video

  • @meven90
    @meven90 3 ปีที่แล้ว

    Thanks , i follow step by step and manage to use jwt token in my react native app ... cheers

  • @chiderapaulugwuanyi9843
    @chiderapaulugwuanyi9843 4 ปีที่แล้ว +1

    Thank you so much for this. It really helped to clarify things for me in react Navigation v5.

    • @itzpradip
      @itzpradip  4 ปีที่แล้ว

      Glad it helped!

  • @jaysolanki593
    @jaysolanki593 3 ปีที่แล้ว

    You are awesome.... Saved my heap of days.

  • @artwellnjanji
    @artwellnjanji ปีที่แล้ว +1

    best tutorial ever

  • @techcodification2815
    @techcodification2815 3 ปีที่แล้ว

    That was a great tutorial my friend , thanks for the knowledge

  • @preetikasingh6611
    @preetikasingh6611 2 ปีที่แล้ว

    Awesome Learning. Thank you so much for this gift !! Greetings !!

  • @thanhtrungvu8895
    @thanhtrungvu8895 4 ปีที่แล้ว

    Thank you so much! This is what i'm looking for and my code worked!!

  • @rudraItSolutions2299
    @rudraItSolutions2299 3 ปีที่แล้ว +2

    Can explain me how can I use redux store in my app after login using react navigation 5 with authcontext and
    there is possibility I can use authcontext in different module and import to app.js file
    I confuse how can I manage all auth and main app store in app
    thank you for your help.

  • @alimodz6253
    @alimodz6253 4 ปีที่แล้ว

    I love the app design man!

    • @itzpradip
      @itzpradip  4 ปีที่แล้ว

      Glad you like it!

  • @vishoodicooray2389
    @vishoodicooray2389 4 ปีที่แล้ว

    Thank you very much. I learned a lot of things from this video list

  • @AhsanAli-gg7tk
    @AhsanAli-gg7tk 4 ปีที่แล้ว

    Nice teaching Sir, I g through all the tutorials of mosh but can't implement the authentication, now I implemented the authentication working fine,
    Also If you do some code into different files it will understandable good

  • @deepanshmakkar5118
    @deepanshmakkar5118 4 ปีที่แล้ว

    Thanks a lot Sir! Your tutorials are helping me a lot!!

    • @itzpradip
      @itzpradip  4 ปีที่แล้ว

      Glad to hear that

  • @oscarparedez1417
    @oscarparedez1417 3 ปีที่แล้ว +2

    Hi Pradip. I have a question for you: After a user logging in, how can i set the drawer menu's username to be the one captured by the authContext?

  • @FabianD1991
    @FabianD1991 2 ปีที่แล้ว

    Thank you so much !! great tutorial.

  • @hassanforever11
    @hassanforever11 4 ปีที่แล้ว

    Find it very useful, Thankyou keep up the good work :)

    • @itzpradip
      @itzpradip  4 ปีที่แล้ว

      Glad to hear that!

  • @jiamingtan9756
    @jiamingtan9756 4 ปีที่แล้ว

    Your tutorial is really useful, thank you so much

    • @Ali-jg1ut
      @Ali-jg1ut 4 ปีที่แล้ว

      hey im getting error after this step 18:30 and error is "can't find variable: userName" help pls?

  • @ahsanhussain5161
    @ahsanhussain5161 4 ปีที่แล้ว +1

    Hi Pradeep,
    I am trying to run your code but I am getting this error:
    Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    Check the render method of App.
    Also my react version is 16.13.1 as opposed to your 16.9.0

  • @unknownman1
    @unknownman1 4 ปีที่แล้ว +1

    can you use firebase for storing data ??

  • @rushclintakam7621
    @rushclintakam7621 2 ปีที่แล้ว

    Very nice tutorial 😍

  • @jagdish_2326
    @jagdish_2326 4 ปีที่แล้ว

    you are too good for teaching concepts.

    • @itzpradip
      @itzpradip  4 ปีที่แล้ว

      Glad you think so!

  • @reycerio7465
    @reycerio7465 2 ปีที่แล้ว

    Thank you Pradip.

  • @Rifzulzul
    @Rifzulzul 3 ปีที่แล้ว

    great explanation bro 👍👍

  • @cristianecheverria3995
    @cristianecheverria3995 4 ปีที่แล้ว

    This Playlist is pure GOLD!

    • @itzpradip
      @itzpradip  4 ปีที่แล้ว

      WOW! thanks for your appreciation.

  • @amirnazir2998
    @amirnazir2998 3 ปีที่แล้ว

    I have follwed the same step but i got an errors that is "TypeError: undefined is not an object (evaluating 'loginState.isLoading')"?

  • @nkeirukawhenu4600
    @nkeirukawhenu4600 2 ปีที่แล้ว

    What do we do for the SignUp action?

  • @stefanirimia5758
    @stefanirimia5758 3 ปีที่แล้ว

    when i create more screens in the app, how do i keep the bottom tab navigator visible? Thank you in advanced.

  • @codewithmesfin
    @codewithmesfin 3 ปีที่แล้ว

    Thank you, very helpful tutorial.

  • @paulochaves3612
    @paulochaves3612 4 ปีที่แล้ว

    Great content! Lots of learning from it. Thank you

    • @itzpradip
      @itzpradip  4 ปีที่แล้ว

      Glad to hear it!

  • @amonperes1755
    @amonperes1755 4 ปีที่แล้ว

    You're awesome, bro! Very usefull tutorial!!

    • @itzpradip
      @itzpradip  4 ปีที่แล้ว

      Glad it was helpful!

  • @anujbidkar7512
    @anujbidkar7512 3 ปีที่แล้ว

    @react-native-community/async-storage is deprecated ? what to use

  • @raymondmichael4987
    @raymondmichael4987 4 ปีที่แล้ว

    This is good brother.
    But hopefully you can group well your videos in a numbered manner for those which belong to a Playlist.
    You mentioned several series, upon checking I found videos are not in a clear sequence.
    Btw, yoir teaching and UI are really great, keep up the good work brother.
    Greetings from Tanzania 🇹🇿

    • @itzpradip
      @itzpradip  4 ปีที่แล้ว +1

      Videos are organized in order, you can check it in "react navigation 5 tutorials" playlist

    • @raymondmichael4987
      @raymondmichael4987 4 ปีที่แล้ว

      Pradip Debnath, sure.
      I saw it; one request though, can you work on how to setup android studio from scratch with those avd, I'm very beat here.
      Consider both mac & windows users.
      Greetings from Tanzania 🇹🇿

  • @poragjyoti4190
    @poragjyoti4190 3 ปีที่แล้ว

    How to use firebase as backend in this project. Please help

  • @hestiaproject2942
    @hestiaproject2942 4 ปีที่แล้ว

    can you explain why you are using react memo for the object that will be pass as context?

  • @MrAddiiee
    @MrAddiiee 3 ปีที่แล้ว

    Hello Pradip, Login and logout are working fine, when the app is foreground.. But when I logged in and close the app for 2 times. It does not logout . It stuck on same screen and then I need to close the app when open it then It logged out.

  • @akashkumarmishra5260
    @akashkumarmishra5260 4 ปีที่แล้ว +5

    can you make one more tutorial with a sample API?
    I am not getting this point,, whether we have to call our API from signInScreen or App.js , if we call our API in app.js then how can we handle error handling like, no account found or incorrect password.
    If you can make another tutorial on this, then it will be really helpful

    • @yeguacelestial8304
      @yeguacelestial8304 4 ปีที่แล้ว

      I connected this interface with a Python Flask API, and I think it's a best practice to call to your API from each Screen, using useState, helpers and whatnot.
      You can have your own config.js with your endpoint URL, and then export it to your screens. That's what I did.
      And if you use Expo or you struggle making requests to your API, use ngrok for echoing your local server to Internet. It's very simple to setup.
      Cheers!

  • @anirudhmishra3453
    @anirudhmishra3453 4 ปีที่แล้ว

    Awesome Bro .. You clear my doubt Thanks

    • @itzpradip
      @itzpradip  4 ปีที่แล้ว

      Glad to hear that

  • @melihozgor7927
    @melihozgor7927 4 ปีที่แล้ว

    Excellent job bro,Your videos are very helpful,im waiting for new videos.

    • @itzpradip
      @itzpradip  4 ปีที่แล้ว

      Glad to hear that

  • @44roel44
    @44roel44 4 ปีที่แล้ว

    Subscribed! Thank you for this!

    • @itzpradip
      @itzpradip  4 ปีที่แล้ว +1

      Thanks for the sub!

  • @baselqhawiesh3660
    @baselqhawiesh3660 3 ปีที่แล้ว

    thanks so much for these tutorials , helped alot , i have a question , i working on a project but iam using SQL instead of AsycStorage , meaning my user details will be saved in sql tables
    so do i need to use all those useEffect+useReducer+useMemo ,etc...???
    hoping you can answer me soon , THANKS

  • @mattiacolaci7211
    @mattiacolaci7211 4 ปีที่แล้ว +1

    I have a question, if i would use instead a API call to do the login how i can write that? Thanks you

    • @meerapatel183
      @meerapatel183 4 ปีที่แล้ว

      I tried this out, and it's pretty much the same as he does it except replace the lines
      const userToken = String(foundUser[0].userToken);
      const userName = foundUser[0].username;
      with a fetch request to your server. You can then store and dispatch the token that the server returns. For me the fetch request looked like the below, where the user contains email and password. I added some conditions on the server side to send back 401 status if the username/password was invalid hence the checking of the status once I get a response back.
      function fetchToken (user) {
      return fetch(url + '/users', {
      method: 'POST',
      headers: {'Content-Type':'application/json'},
      body: JSON.stringify(user)
      })
      .then(res => res.status > 401 || res.status == 400 ? Promise.reject(res) : res)
      .then(res => res.status !== 401 ? res.json() : res.text());
      }

  • @rajanayel7447
    @rajanayel7447 3 ปีที่แล้ว +1

    Sir could you please tell me how I can implement firebase with this GUI?

  • @AkshitSylvester
    @AkshitSylvester 4 ปีที่แล้ว +1

    Hi pradip can you please demonstrate with backend data base authentication for user and token to update global state from mongo db

  • @leolynn89
    @leolynn89 3 ปีที่แล้ว

    Great tutorial, there is just one thing missing: how do you handle signup/signin errors that would occur in the backend and show them to the user with the given structure of code ? I can't find a way to pass the errorMessage in the loginState down to the signup or signin screen.

  • @ATageH
    @ATageH 4 ปีที่แล้ว

    great tutorial, thanks for sharing!

  • @mythicles
    @mythicles 3 ปีที่แล้ว

    can you help me, i got this error : undefined is not an object (evaluating 'loginState.isLoading')

  • @iraisaguirrevalente677
    @iraisaguirrevalente677 4 ปีที่แล้ว

    Hello, i was doing the same steps has you but i have an error when i compile, in App.js in the useEffect i have an error that says "warning: can't perform a react state update on an unmounted component. this is a no-op, but it indicates a memory leak in your application. to fix, cancel all subscriptions and asynchronous tasks in %s.%s, a useeffect cleanup function" i try to fix this error with clearTimeOut but this method dont fix the error, i would be great if you can help me

  • @robertocandales08
    @robertocandales08 4 ปีที่แล้ว

    Excellent video, thank you very much for sharing your knowledge

    • @itzpradip
      @itzpradip  4 ปีที่แล้ว

      My pleasure!

  • @sarannithissh2597
    @sarannithissh2597 4 ปีที่แล้ว

    i have find a error in the undefined is not an object (evaluting loginstate.isloading)

  • @ManishAtri
    @ManishAtri 4 ปีที่แล้ว

    You are doing great job. Please add google and Facebook auth in the series :)

    • @itzpradip
      @itzpradip  4 ปีที่แล้ว +1

      I'll do it soon.

  • @TrialsFromTly
    @TrialsFromTly 3 ปีที่แล้ว

    for the first launch hoe the retrive token work? by using that how can I implement onboarding screen?

  • @shaurtv2856
    @shaurtv2856 3 ปีที่แล้ว

    Thank you, We learned a lot

  • @angelgabrielhernandezherna3861
    @angelgabrielhernandezherna3861 4 ปีที่แล้ว

    thanks for all bro, it worths , i just have a question... i have already made the first 10:23 minutes and then i tried to do it on my own, so ,do you think that i would have a trouble in the future without the another part of the code of the video?, thanks bro

  • @priyanshubaluni2801
    @priyanshubaluni2801 3 ปีที่แล้ว

    Hi Pradip, can you tell how can we access the states in files?

  • @josuasimatupang5855
    @josuasimatupang5855 2 ปีที่แล้ว

    how to get the initialState in global in my screens?

  • @ankitjaishwal2165
    @ankitjaishwal2165 4 ปีที่แล้ว

    You are doing great but Please make a video to elaborate what if i use Firebase for Authentication. I have done the Authentication using firebase but i'm not able to navigate to homescreen after authentication, since i don't have Authentication token in case of firebase.

  • @matthewwillis2201
    @matthewwillis2201 3 ปีที่แล้ว

    This was fantastic. What theme/font/style are you using for VScode - I like it a lot!

  • @jensysantana8663
    @jensysantana8663 4 ปีที่แล้ว

    Hola, tengo una pregunta. Quiero hacer una app tipo eBay y pienso que usar sockets podría ser bien. Pero aún no me queda claro de cómo integrarlo con redux en proyectos grandes por cuestión de performance. Podrías darme alguna idea o bien si tienes Algún código que me pueda ayudar a entenderlo mejor. Gracias.

  • @alejandrosorto6827
    @alejandrosorto6827 4 ปีที่แล้ว +2

    Great video! Can you do a tutorial on how to implement IBM Watson services and Microsoft Azure machine learning services to react native apps? There are not many tutorials about these topics out there.

    • @itzpradip
      @itzpradip  4 ปีที่แล้ว

      Great suggestion! I'll try to do these in future.

  • @immanueldiaz5710
    @immanueldiaz5710 4 ปีที่แล้ว +1

    Hey bro i have a question, the "React context" it's similar if you use redux? you can have a data persisting ?

  • @tamilarasan5761
    @tamilarasan5761 3 ปีที่แล้ว

    Bro i need one help react native alert how will add navigation on alert ok onpress pls help

  • @tusharraj9785
    @tusharraj9785 4 ปีที่แล้ว

    Thank you love from india.... :)

  • @sumanthegde3766
    @sumanthegde3766 2 ปีที่แล้ว

    Your Videos are very Useful. Can you make a video on Mobile OTP verification in React Native?

  • @mastersolihin5480
    @mastersolihin5480 2 ปีที่แล้ว

    hello brother, can you show me how to make login authentication with laravel api,?
    i have a laravel project and ready with API,
    i have react native ui login

  • @vikasgupta4459
    @vikasgupta4459 4 ปีที่แล้ว +1

    in signOut function i got this error " TypeError: undefined is not an object (evaluating 'Context._context') "

    • @Eric-hp8zq
      @Eric-hp8zq 4 ปีที่แล้ว

      I had the same error, my issue was a typo... Instead of context I had content in some parts.
      For example instead of I had
      Check for any typos :) I was stuck on this for an hour till I realized.

    • @vikasgupta4459
      @vikasgupta4459 4 ปีที่แล้ว

      @@Eric-hp8zq i also had typo it is fixed thanks

  • @dolls.ahya3
    @dolls.ahya3 2 ปีที่แล้ว

    how we can get user token .divice token?

  • @Hridey10
    @Hridey10 3 ปีที่แล้ว

    Why have you created a seprate AuthContext in another folder ?

  • @ferilauw
    @ferilauw 4 ปีที่แล้ว +1

    Great jobs sir. It will more perfect if you combine with axios and jwt please.

    • @itzpradip
      @itzpradip  4 ปีที่แล้ว

      Great suggestion!

  • @tobiasvinsensius4133
    @tobiasvinsensius4133 4 ปีที่แล้ว

    how to use this login function to send parameters to login API?

  • @exlntsoftwarellc4287
    @exlntsoftwarellc4287 4 ปีที่แล้ว

    @Pradip Debnath - Great tutorial. I watched the whole series and you explained it really well. I followed and implemented all of your code until video #7 in the series. After that I added in my firebase authentication code. In the SignIn screen on the button click I call my firebase login method. Soon as I implemented that code, I keep getting this error: "Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.
    " Any ideas on how to resolve this error?

  • @hypersudo8092
    @hypersudo8092 4 ปีที่แล้ว

    Can I implement this auth flow with redux??