Login Authentication Tutorial in React Native | JWT Authentication | AsyncStorage
Vložit
- čas přidán 7. 08. 2024
- In this tutorial, you'll learn how to implement login authentication in react native and here I have shown you this process with JWT authentication token. So you'll get to know the basic authentication flow for an app and how you can do REST API call in react native to implement login authentication.
Also, this tutorial is a part of a tutorial series in which I'm showing you different parts of react navigation v6.
React Navigation v6 Tutorial Series Link • React Navigation 6 Tut...
→ Social App with Firebase in React Native Playlist • Social App with Fireba...
→ React navigation v5 tutorial playlist • React Navigation 5 Tut...
→ Food Finder App in React Native Playlist • Food Finder App in Rea...
→ Music App UI Tutorial • Music App UI in React ...
► Timestamps
0:00 Introduction
2:41 Discussing the Fundamentals of Authentication Flow
3:35 Implementing Basic Features of Login Functionality
11:25 Storing The Login State with AsyncStorage
16:05 Adding JWT Authentication to Our App
GitHub repo URL bit.ly/3v0H9sH
If you found my tutorials helpful, you can buy me a coffee from this link paypal.me/itzpradip
Follow me on Twitter / itzpradip
Follow me on GitHub github.com/itzpradip
Subscribe to my Channel bit.ly/2PaUqOk
For more tutorials on WordPress, React JS, React Native and Flutter visit: www.pradipdebnath.com/blog/
This is helpful
I was very confuse on the implement of authen use navigation and this saved my life!
Your the best man! Im learning so much cause of u! Please teach us how to create a feed in the app and post stories by user with the JWT authentication flow
Thank bro, I am nabe to the React Native, by some youtube class, i created the react native app, but issue in auth and navigations , but yours one play list had solved all my problem's thanks a lot bro.
Absolutely perfect lecture for a beginner's student. Thank You sir.
Thank you, this was exactly what I needed 🎉
hi, thank you!! Excellent job.👍
you're amazing, you save my university project, thanks a lotttttttt
Wow! it's Amazing I did it well ! Perfect work !
thank you bro, you did a great job !
Absolutely perfect tutorial. Thank You very much and good wishes for you.
Great tutorials, many thanks
Congrats, awesome video!
This is a really great tutorial
Really clear! I have seen lot of tutorials without a real context. Here we can learn in a real example how to use Context, Navigation, LocalStorage and HTTP Requests using axios. Congratulations!
😃
You're very welcome!
Hey, teacher Pradip!
Congratulations for your excellent videos!
I was wondering how you did the reauthentication in case the user forgot the password? :)
Very helpfull video, thank you very much
its very informative videos thanks pradeep bro for such useful video
very nicely explain!!!!
Hi Pradip,
your videos really help me to learn something new and it's very easy to understand.
Sir, I've question that can we add gif img and button on splash screen on click of
that button, it takes me to home screen. I searched a lot to find out the solution
but nowhere in internet provided that solution, can you pls make one video for this.
Humble request 🙏.
Awesome man 👏
Great tutorial. SUBSCRIBED. 😊
Can you please make a tutorial on creating a general APICaller File from which we can make all API calls POST/GET etc? And consume it in any page with keeping APICall caching strategy in mind to optimize APICall speed and memory? And add Redux for generalized state management in your style? I'll be very thankful to you
Jwt code is not available in git repo plzz add the code.
thanks for the tutorial
you RE SUCH A GEM MAN can u make one series for Redux in react native with either thunk or saga
Excellent to-the-point guide. If this was nostr I'd zap you right now.
Hi Pradeep - I see that you store the access token on to a state..what's the best practice? is it to store into a state and keep referring to it when required or fetch from AsyncStorage when required? Would there be a security concern storing the access token on a state? Thanks
great job 🥰
Hi, thanks for great videos.
If i just do for Home screen not for nav drawer then?
very helpful ❤
Thank you very much
nice work sir
thank you sir
Great explanation. Thanks
You are welcome!
great video, helped me understand some concepts better :) , dropped a like and subscribed.
ps: the github is not up to date i believe, or is it on purpose ?
i think the github isn't updated with the last version
@@backcost yes there is no context folder
Did you create your api with springboot?
could you recommend a good tutorial for Api building.
thank you!
thi is whate i wante thnx PD
Thanks for your comment & support!
U BEST!!!
Wow, Awesome
Thank you! Cheers!
Hi can you also do form validation for this?
Nice tutorial, but correct me if i'm wrong, we never check if the jwt token is expired when we start the app right?
What about refresh token?
How can i implement refresh token?
While Signing up success how will navigate user from signup screen to Signin screen(since from context u cant navigate to screen).
thanks
Hi there, at 16:09, can you make a more in depth guide on JWT Authentication? Pretty Please? 😢 you're my only hope for my thesis. Or at least, can you tell us how you generated that initial link in postman?
I did as he wrote, but it return an error isLoading undefined in my app.js why?
hi pradip, how we can prevent with multiple login in above example
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?
❤❤Crazy Good
Hey Pradip, can you do twilio chat (Conversations API) for React Native. Coz no have posted any tutorial or anything. And Its need for everyone,
Thank You
Hey, Can you please make a video about Zoom call integration with React native?
is it possible to use Keycloak with react native?
could be update github acc ? because in my opinion doens have more files.
How to further access the stored token to fetch auth data with header
Navigation not working in AuthContext screen. Any idea?? How to solve this error
please make video also on register component from where get token and than use it login component
difference between useContext v/s redux?
Can you maje a video of roles in react-native pleaseeeeee🙏🏾
Can you make a video about the same but with expo router v2 instead of react navigation ? Great job !
Thanks for your comment. Expo router v2 tutorial is posted here czcams.com/video/ZG6GngLP3qo/video.htmlsi=_fi39UV93UqzBRs9
Hey Pradip, do you know any tutorial about how to make a NPM package for a React Native component? I'm strugglin to make my component a module to be export
Interesting! I haven't looked into this topic yet but I'll look into it and share some info or may be create a video about it in future.
@@itzpradip thank you so much!
You did not uncomment the AppStack? How does that work?
How to create that jwt api please tell
Hi my dear friend. Im creating a authentication with react native google sign in. How can i make a auth with react navigation
And can you please specify why did you preferred AXIOS over FETCH for REST API CALLING?
axios has more features than fetch
post video about React Native CLI from scratch to advanced concepts video series
Thanks for the amazing video
And in a situation whereby you're to make api calls with an expired token, because token do have expiration time.
I would really love you to assist me with a reply because I'm kind of stalked on a project with this situation
In that case, you'll have a refresh token API end point where you can provide the expired token to get a new one and you can do those checking in isLoggedin function.
you should have added refresh token part also
permission to ask, is it in this video that if the token expires then it is immediately directed to the login screen?
Did you manage to do this?
hi pradip ! I'm lost in the end of the video, how didi you do to make a jwt ???? because I don't have the same result ...
I finally use the same backend solution for my react app to generate a jwt token and it's a success ;) ! thanks for the tuto !
how do u handle the 401 error to logout the user? can u do that also. when the jet token expire how will logout the user from a global axios file
Did you manage to do the logout when the token expire?
Thanks for the video.
Can you show the how to implement forgot password
It's mainly a backend process and from the app you just need to do some API call and create 2 new screens for submitting the email/username to get email to reset password and the other one will be where you reset the password. So there's nothing much different than just doing some api calls. I don't have any plan to make a video about it.
Nice tut. But you should not store token with asyncstorage cause IT IS NOT SECURE. Please if the serie continue provide another solution to store and retrieve the token with encryption. And solution to refresh expired token. thanks.
Did you got any resources for refresh token implementation for react native apps
hi can someone please help? My logout function was working fine before but now doesn't work...i stay logged in when i reopen the app after logging out
I'm also getting the same issue.
Did you find any solution
Getting getItem is undefined error
Can you please help me
how do you handle it if the token expires on the backend?
Did you find a solution?
Return an unauthorized response to frontend and log the user out, or send a refresh token
Async storage is not working for me
Dada kemon acho?
10:00
yo, ever heard of redux? xd
At certain parts you go way to fast, maybe explain what certain parts do and take your time to display what you're doing. Making tutorials is not a race. If users find you going to slow they can easily skip through.
lazy loading video
Hello, how do I get postman to generate the token, I can't do the authentication because postman doesn't connect to my project, thanks
Please mention your insta here, i wanna follow's you there too, because you always post such a useful and industry trendy stuff.
Huge admiration for being my mentor, love from Pakistan
Thanks for your support & comment. I don't have instagram account.