React Persistent User Login Authentication with JWT Tokens

Video Description

Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap 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. 💖 Support me on Patreon ➜ https://patreon.com/davegray ⭐ Become a full-stack web dev with Zero To Mastery Courses: - Advanced React: https://bit.ly/AdvReactDev - Jr to Senior Web Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr - Master FAANG Coding Interviews: https://bit.ly/FAANGInterview 🚩 Subscribe ➜ https://bit.ly/3nGHmNn 🚀 React JS for Beginners full course - 9 hours: https://youtu.be/RVFAyFWO4go 👀 React Login tutorial series playlist: https://www.youtube.com/playlist?list=PL0Zuz27SZ-6PRCpm9clX0WiBEMB70FWwd 🔗 Starter Source Code: https://github.com/gitdagray/react_jwt_auth 🔗 Completed Source Code: https://github.com/gitdagray/react_persist_login ❗ NOTE: Two updates in source code AFTER video tutorial completed: 1) Added persist to useEffect in PersistLogin component to prevent unwanted call to verifyRefreshToken. 2) RequireAuth component now checks auth.accessToken instead of auth.user to support the persistent login. If you want to leave this as auth.user, just retrieve the user again inside the useRefreshToken hook. 📬 Course Updates ➜ https://courses.davegray.codes/ 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 ☕ Buy Me A Coffee: https://www.buymeacoffee.com/davegray The React Login Authentication Series: 1) React Register Form with Validation, Axios and a11y: https://youtu.be/brcHK3P6ChQ 2) React User Login and Authentication with Axios: https://youtu.be/X3qyxo_UTR4 3) React Protected Routes | Role-Based Authorization: https://youtu.be/oUZjO00NkhY 4) React Login Authentication with JWT Access, Refresh Tokens, Cookies and Axios: https://youtu.be/nI8PYZNFtac 5) This video! 🔗 Node JS Full Course (with source code) for building the backend REST API: https://youtu.be/f2EqECiTBL8 🔗 React Router Version 6 in 20 minutes: https://youtu.be/XBRLVRjZ3CQ 🔗 FontAwesome for React: https://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react 🔗 RegExr for Regular Expressions: https://regexr.com/ 📚 JWT References: Intro to JSON Web Tokens: https://jwt.io/introduction All You Need to Know About Storing JWT in the Frontend: https://dev.to/cotter/localstorage-vs-cookies-all-you-need-to-know-about-storing-jwt-tokens-securely-in-the-front-end-15id Cross-Site Scripting (XSS): https://owasp.org/www-community/attacks/xss/ Cross-Site Request Forgery (CSRF): https://owasp.org/www-community/attacks/csrf 📚 Accessible Form References: WebAIM.org - Advanced Forms: https://webaim.org/techniques/forms/advanced WebAIM.org - Form Validation: https://webaim.org/techniques/formvalidation/ MDN - Aria Attributes: aria-invalid: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute aria-describedby: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby aria-live: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live aria-label: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label 🔗 ES7 React JS Snippets Extension for VS Code: https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets 🔗 React Dev Tools Extension for Chrome: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi 📚 References: ReactJS Official site: https://reactjs.org/ React Wikipedia: https://en.wikipedia.org/wiki/React_(JavaScript_library) React Jobs: https://www.ziprecruiter.com/candidate/search?search=react&location= ✅ Follow Me: Github: https://github.com/gitdagray Twitter: https://twitter.com/yesdavidgray LinkedIn: https://www.linkedin.com/in/davidagray/ Blog: https://yesdavidgray.com Reddit: https://www.reddit.com/user/DaveOnEleven 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