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.

⭐ 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