React Redux Login Authentication Flow with JWT Access, Refresh Tokens, Cookies

Video Description

Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap Learn React Redux Login Authentication Flow with JWT Access, Refresh Tokens, Cookies and more. This tutorial sets up a React Redux login and auth flow that uses JWT access and refresh tokens, secure cookies and an RTK Query base query reauthentication wrapper. 💖 Support me on Patreon ➜ https://patreon.com/davegray ⭐ Become a full-stack web dev with Zero To Mastery Courses: - Advanced React & Redux: 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 🚀 Modern Redux full course - 4 hours: https://youtu.be/NqzdVN2tyvQ 👀 React Login tutorial series playlist: https://www.youtube.com/playlist?list=PL0Zuz27SZ-6PRCpm9clX0WiBEMB70FWwd 🔗 Completed Source Code: https://github.com/gitdagray/redux_jwt_auth 🔗 Backend Node.js REST API Source Code: https://github.com/gitdagray/nodejs_jwt_auth 📬 Course Updates ➜ https://courses.davegray.codes/ React Redux Login Authentication Flow and JWT Access, Refresh Tokens, Cookies (00:00) Intro (00:46) Welcome (01:36) Starter Code and Dependencies (02:30) Begin Redux: authSlice (05:50) baseQuery (09:06) baseQuery with re-authorization wrapper (14:57) apiSlice (15:51) Extend the apiSlice to auth (17:27) Configure the Redux store (19:46) Begin React: index.js (22:33) Layout component (23:28) Public component (24:11) Redux: Export useLoginMutation (24:54) Login component (31:48) RequireAuth component (34:33) Welcome component (37:12) App.js routing (40:56) Node.js Backend Review (43:20) Test the Login flow (44:16) Redux: Extend the apiSlice to users (47:20) React: UsersList component (49:16) Update App.js routing (49:57) JWT Auth Flow and RTK Query Cache ☕ Buy Me A Coffee: https://www.buymeacoffee.com/davegray 🔗 Node JS Full Course (with source code) for building the backend REST API that will receive your form submissions: https://youtu.be/f2EqECiTBL8 🔗 React Router Version 6 in 20 minutes: https://youtu.be/XBRLVRjZ3CQ 📚 Modern Redux Authentication References: 🔗 Redux Toolkit Authentication: https://redux-toolkit.js.org/rtk-query/usage/examples#authentication 🔗 baseQuery function arguments: https://redux-toolkit.js.org/rtk-query/api/createApi#basequery-function-arguments 🔗 Automatic re-authorization by extending fetchBaseQuery: https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#automatic-re-authorization-by-extending-fetchbasequery 📚 General Redux Toolkit References: 🔗 Official Site for Redux Toolkit: https://redux-toolkit.js.org/ 🔗 Redux Devtools: https://github.com/reduxjs/redux-devtools 📚 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 ✅ 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 Redux Login Authentication with JWT Access and Refresh Tokens helpful? If so, please share. Let me know your thoughts in the comments. #redux #login #authentication