Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap

React Login Authentication with JWT uses access and refresh tokens to authenticate users. You will use Axios and learn how to handle and store JWT access and refresh tokens. Also, why secure cookies are better than localStorage.

⭐ 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_protected_routes

Completed Source Code: https://github.com/gitdagray/react_jwt_auth

Course Updates https://courses.davegray.codes/

React Login Authentication with JWT Access, Refresh Tokens, Cookies and Axios

(00:00) Intro
(00:41) Welcome Discussion
(01:43) JWT Authentication
(04:37) Update NPM Packages
(05:40) Users Component
(08:38) Users Request
(13:27) Requests Needs the Access Token
(14:25) useRefreshToken hook
(17:55) Testing useRefreshToken
(20:05) Private Axios Instance
(22:31) useAxiosPrivate with interceptors
(32:28) Updating the Users component
(35:11) Handling an expired refresh token
(39:56) JWT Strategy Revisited

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) This video!

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

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 React Login Authentication with JWT Access and Refresh Tokens helpful? If so, please share. Let me know your thoughts in the comments.

#react #login #authentication