Login Authentication Tutorial in React Native | JWT Authentication | AsyncStorage
HTML-код
- Опубликовано: 13 июн 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!
Absolutely perfect lecture for a beginner's student. Thank You sir.
Thank you, this was exactly what I needed 🎉
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.
Congrats, awesome video!
hi, thank you!! Excellent job.👍
Wow! it's Amazing I did it well ! Perfect work !
thank you bro, you did a great job !
you're amazing, you save my university project, thanks a lotttttttt
This is a really great tutorial
Jwt code is not available in git repo plzz add the code.
Great tutorials, many thanks
Awesome man 👏
Hey, teacher Pradip!
Congratulations for your excellent videos!
I was wondering how you did the reauthentication in case the user forgot the password? :)
Absolutely perfect tutorial. Thank You very much and good wishes for you.
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
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!
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 🙏.
its very informative videos thanks pradeep bro for such useful video
Very helpfull video, thank you very much
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
Hi, thanks for great videos.
If i just do for Home screen not for nav drawer then?
Did you create your api with springboot?
could you recommend a good tutorial for Api building.
thank you!
you RE SUCH A GEM MAN can u make one series for Redux in react native with either thunk or saga
thanks for the tutorial
great job 🥰
Excellent to-the-point guide. If this was nostr I'd zap you right now.
I did as he wrote, but it return an error isLoading undefined in my app.js why?
Hi can you also do form validation for this?
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).
When I click on login button I get "TypeError: cyclical structure in JSON object" anyone has an idea what could be wrong? Same code as in this video.
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
Nice tutorial, but correct me if i'm wrong, we never check if the jwt token is expired when we start the app right?
Thank you very much
Great explanation. Thanks
You are welcome!
U BEST!!!
Navigation not working in AuthContext screen. Any idea?? How to solve this error
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 pradip, how we can prevent with multiple login in above example
thi is whate i wante thnx PD
Thanks for your comment & support!
How to further access the stored token to fetch auth data with header
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?
is it possible to use Keycloak with react native?
nice work sir
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!
Hey, Can you please make a video about Zoom call integration with React native?
Wow, Awesome
Thank you! Cheers!
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
could be update github acc ? because in my opinion doens have more files.
thank you sir
difference between useContext v/s redux?
You did not uncomment the AppStack? How does that work?
And can you please specify why did you preferred AXIOS over FETCH for REST API CALLING?
axios has more features than fetch
Hi my dear friend. Im creating a authentication with react native google sign in. How can i make a auth with react navigation
How to create that jwt api please tell
you should have added refresh token part also
please make video also on register component from where get token and than use it login component
Can you maje a video of roles in react-native pleaseeeeee🙏🏾
thanks
❤❤Crazy Good
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?
post video about React Native CLI from scratch to advanced concepts video series
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 ruclips.net/video/ZG6GngLP3qo/видео.htmlsi=_fi39UV93UqzBRs9
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 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.
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
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
Async storage is not working for me
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
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
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
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.