Login Authentication Tutorial in React Native | JWT Authentication | AsyncStorage

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/

[@np3514]

This is helpful I was very confuse on the implement of authen use navigation and this saved my life!

[@user-nx4yu7sy4q]

Absolutely perfect lecture for a beginner's student. Thank You sir.

[@clown_bunny6325]

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.

[@stephanodev]

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

[@Wicked-Developer]

Thank you, this was exactly what I needed 🎉

[@bhazer2381]

Wow! it's Amazing I did it well ! Perfect work !

[@user-gu8ch6fi9j]

you're amazing, you save my university project, thanks a lotttttttt

[@gianpaolop.8525]

Congrats, awesome video!

[@MedlegNem]

Absolutely perfect tutorial. Thank You very much and good wishes for you.

[@ricardosenabr]

hi, thank you!! Excellent job.👍

[@M4nudu45]

thank you bro, you did a great job !

[@ishaqabdulfatahi9732]

This is a really great tutorial

[@mariafernandaguarinmorales703]

Hey, teacher Pradip! Congratulations for your excellent videos! I was wondering how you did the reauthentication in case the user forgot the password? :)

[@mohanwijesena6272]

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

[@BalaramGayen]

Great tutorials, many thanks

[@arbelaezdiego]

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

[@itzpradip]

You're very welcome!

[@arupgorai7778]

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

[@kewlkeat]

Hi, thanks for great videos. If i just do for Home screen not for nav drawer then?

[@rahmankamara1418]

Awesome man 👏

[@himanshusinha2250]

its very informative videos thanks pradeep bro for such useful video

[@tanmaymishra4826]

you RE SUCH A GEM MAN can u make one series for Redux in react native with either thunk or saga

[@FahadQureshimastermind]

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

[@l0gical998]

Did you create your api with springboot? could you recommend a good tutorial for Api building. thank you!

[@saneeshmaheshwari4847]

Jwt code is not available in git repo plzz add the code.

[@29ankitsondkar69]

very nicely explain!!!!

[@RuitherBorba]

Excellent to-the-point guide. If this was nostr I'd zap you right now.

[@homerreal]

Very helpfull video, thank you very much

[@meenaalekhya3380]

Hi can you also do form validation for this?

[@laurentk2033]

Nice tutorial, but correct me if i'm wrong, we never check if the jwt token is expired when we start the app right?

[@friendly4466]

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 ?

[@backcost]

i think the github isn't updated with the last version

[@mnarimohamedwebdev1059]

@@backcost yes there is no context folder

[@andicheadir2681]

thanks for the tutorial

[@ragavendram8874]

While Signing up success how will navigate user from signup screen to Signin screen(since from context u cant navigate to screen).

[@Helios_93]

great job 🥰

[@elabinnovations]

What about refresh token? How can i implement refresh token?

[@mahmoudkhodor2295]

I did as he wrote, but it return an error isLoading undefined in my app.js why?

[@bachudeepak3003]

Great explanation. Thanks

[@itzpradip]

You are welcome!

[@mvn3949]

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.

[@auto-diciplime237]

Thank you very much

[@rahutina8772]

hi pradip, how we can prevent with multiple login in above example

[@SuperAdil08]

is it possible to use Keycloak with react native?

[@umeshtandon459]

How to further access the stored token to fetch auth data with header

[@SomagondaPatil]

Navigation not working in AuthContext screen. Any idea?? How to solve this error

[@uwuMeowMeow]

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?

[@dzlifestyle1434]

thi is whate i wante thnx PD

[@itzpradip]

Thanks for your comment & support!

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

[@anti_duhring]

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

[@itzpradip]

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.

[@anti_duhring]

@@itzpradip thank you so much!

[@mdhossen7082]

Wow, Awesome

[@itzpradip]

Thank you! Cheers!

[@-Deku7]

U BEST!!!

[@kalidass5968]

Hey, Can you please make a video about Zoom call integration with React native?

[@chandresh097]

thank you sir

[@nishitpatel3659]

nice work sir

[@abrarrajput4406]

please make video also on register component from where get token and than use it login component

[@prasanthvijaykumar1317]

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

[@74n3r]

could be update github acc ? because in my opinion doens have more files.

[@rahmankamara1418]

Can you maje a video of roles in react-native pleaseeeeee🙏🏾

[@user-tt6nc6mo7k]

You did not uncomment the AppStack? How does that work?

[@JeanPierreCasanovaFuentes]

difference between useContext v/s redux?

[@NewChannel-nd8sm]

How to create that jwt api please tell

[@jauharadib8272]

permission to ask, is it in this video that if the token expires then it is immediately directed to the login screen?

[@j0s3805]

Did you manage to do this?

[@FahadQureshimastermind]

And can you please specify why did you preferred AXIOS over FETCH for REST API CALLING?

[@Dhsidhsusjs]

axios has more features than fetch

[@nishitpatel3659]

thanks

[@miloniemaz1485]

Can you make a video about the same but with expo router v2 instead of react navigation ? Great job !

[@itzpradip]

Thanks for your comment. Expo router v2 tutorial is posted here kzbin.info/www/bejne/kHiZeKGdgbVmp9Esi=_fi39UV93UqzBRs9

[@lxonthemix834]

Hi my dear friend. Im creating a authentication with react native google sign in. How can i make a auth with react navigation

[@emmanuel-xm8ho]

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

[@emmanuel-xm8ho]

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 !

[@hendoitechnologies]

post video about React Native CLI from scratch to advanced concepts video series

[@rahmathirshad9480]

you should have added refresh token part also

[@gokulraj-ru1fv]

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

[@j0s3805]

Did you manage to do the logout when the token expire?

[@dileeshaabilash5562]

❤❤Crazy Good

[@gbemidaniel9608]

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

[@itzpradip]

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.

[@blaszen5663]

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

[@asishtammana5305]

I'm also getting the same issue. Did you find any solution

[@venkateshvadlamudi9612]

Thanks for the video. Can you show the how to implement forgot password

[@itzpradip]

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.

[@okoliugo5766]

how do you handle it if the token expires on the backend?

[@j0s3805]

Did you find a solution?

[@okoliugo5766]

Return an unauthorized response to frontend and log the user out, or send a refresh token

[@user-rp3js9td3v]

Getting getItem is undefined error Can you please help me

[@zare775]

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.

[@felixanto1443]

Did you got any resources for refresh token implementation for react native apps

[@siddiquizaid4315]

Async storage is not working for me

[@arunavadebnath]

Dada kemon acho?

[@gtasa0629]

10:00

[@ulisesluna5028]

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

[@pineappleus3031]

yo, ever heard of redux? xd

[@xyzxyzxyzxyz]

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.

[@rushikeshvayandeshkar4902]

lazy loading video

[@ibilalchaudhary]

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

[@itzpradip]

Thanks for your support & comment. I don't have instagram account.