React Persistent User Login Authentication with JWT Tokens

Learn how to add persistent user login authentication with JWT tokens to your React app. We will not store JWT tokens in local storage or session storage. That's not secure! The user login will persist when the React app is refreshed, reloaded, or revisited unless the user logs out or the refresh token has expired.

⭐ Become a full-stack web dev with Zero To Mastery Courses:

❗ NOTE: Two updates in source code AFTER video tutorial completed:

1) Added persist to useEffect in PersistLogin component to prevent unwanted call to verifyRefreshToken.

React Persistent User Login Authentication with JWT Tokens

(00:00) Intro
(00:45) Welcome Discussion
(01:22) Current state of the app
(03:02) Why want a persistent login?
(04:05) PersistLogin component
(10:52) useRefreshToken update
(12:39) Add PersistLogin to App
(14:34) Test the Persistent Login
(16:07) Security Issue #1
(16:42) useLogout hook
(19:47) Add logout to Home
(21:35) Test with no refresh cookie
(22:44) Test with a refresh token
(23:34) Test with an expired refresh token
(26:04) Security Issue #2
(27:13) Adding new state to AuthProvider
(28:54) PersistLogin update
(30:18) Login update
(33:41) Test Trust Device toggle
(35:10) Fix a memory leak

The React Login Authentication Series:

5) This video!

🔗 FontAwesome for React:

📚 JWT References:

📚 Accessible Form References:
MDN - Aria Attributes:

🔗 ES7 React JS Snippets Extension for VS Code:

🔗 React Dev Tools Extension for Chrome:

📚 References:

✅ Follow Me:

Was this tutorial about Persistent User Login Authentication with JWT Tokens in React helpful? If so, please share. Let me know your thoughts in the comments.

#react #login #persistent

[victoronwe]

This is simply a top notch premium content. Maintain this path and soon you will be the biggest react channel on YouTube. To be honest most paid courses on udemy do not give as much value as you have. Thanks for your great job Dave.

[ebratz]

This kind of intermediate/advanced tutorials are much appreciated. Keep the awesome job coming!

[mitpancholi]

This tutorial has it all you need to create standard login flow, and I realized that this is how it should be done. In real situation security is often overlooked. Every bit of this video is precious with advanced material.

Thanks for sharing 👍. I binge watched this series of tutorials 😂

[Darklrd]

Started the series sometime last evening and continuing this first thing early in the morning. Great work Dave! And thank you very much for this.

[timothyclarke]

Thanks Dave, your videos are great! You're really the only one out there who addresses security to this level while going through tutorials.

[dpuerto]

This is so much fun! I have been rewriting this for Azure CosmosDB NoSQL API and Azure Table and removing axios in lieu of fetch to remove dependencies. Next is to use TypeScript. I wish I started this tutorial by making it typeScript, but after this auth series I'll have a couple foundations to work with! Thanks for the backend! I am learning a lot about Node.js and I love it!

[angel]

Hi, I just wanted to say thank you a lot of this series. Really insightful and easy to follow along.

[jhanmateo]

I would recommend this playlist it's so informative. Well explained and the example code is clean.

[tosandeepyandra]

i started learning REACT .. i have seen many videos, but i am not able to connect to any content ... but with your content .. i am very much connected .. YOU ARE REALLY GENIUS ... Thanks a lot .. looking forward for additional videos on react

[roberaabera]

I feel like you are the only youtuber who post what I'm looking for my projects. Great Job👍👍👍!

[sundayucheawaji]

Thank God I came across this channel. I really learnt a lot. Thank you very much, Dave. You are truly an inspiration to many.

[makarikevin]

This being your last edition to React Login Authentication Series, I have to put my comment here. I have used all of your 5 series to develop a full working React JS Admin Web application (deployed on Digital Ocean) with little-to-zero background in React JS. Since I used Spring Boot as the backend, access token refresh withCredentials=true (cookies) didn't work for me (as I have other custom headers, and an Android app consuming the same APIs) and therefore opted to go with storing the refresh token in the local storage. I know this is a huge security flaw by design but as of now it is working fine for me and I'm okay with it (as I explore a more secure way to do it).

I must admit that your tutorials are so straightforward, simple to follow, relevant and so resourceful (to an extend that I have added them all to my playlist). All my credit therefore comes back to you, in retribution, for the wonderful work (I wish I could buy you coffee 😊) and will continue watching more of your videos, Sir !

[mikejones]

You are very clear and thorough in your explanations. Very much appreciate your content!

[mikutaa]

This is the best explanation of the authentication mechanism I've ever seen. Thanks!🙏

[pavankulal]

thank you so much dave sir for this video🙏. I learned nodeJs recently and did not know how use access and refresh token . I used it for my todo app and because of ease of teaching i could debug errors easily and customised code according to me .

[HarmanSingh-tpxs]

Great Content Sir ! Best Playlist to understand JWT handling on Frontend. Recently finished your Nodejs Course, loved it !😇

[heygarryification]

Hey Dave, this is one of the best tutorials I've ever watched. Thanks for the good job!

[rshabhnegi]

this was an amazing lecture, I learned a lot from you Dave.

[ravenMK_]

Best Series out there! Thank you Dave. Loving your content

[Lykkos]

amazing tutorial sir, so well explained that even the backend logic in some sections of this video that you're explaining is very clear that I'm applying to Spring Boot to make a logout and login functionality without the necessity of watching external tutorials for it! 10/10!!