React Login Authentication with JWT Access, Refresh Tokens, Cookies and Axios
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://bit.ly/3q2FKjt
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
Видео React Login Authentication with JWT Access, Refresh Tokens, Cookies and Axios канала Dave Gray
⭐ 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://bit.ly/3q2FKjt
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
Видео React Login Authentication with JWT Access, Refresh Tokens, Cookies and Axios канала Dave Gray
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
![](https://i.ytimg.com/vi/b1Wgel5AjtM/default.jpg)
![What Is JWT and Why Should You Use JWT](https://i.ytimg.com/vi/7Q17ubqLfaM/default.jpg)
![](https://i.ytimg.com/vi/HuNMyqVVnLo/default.jpg)
![React Redux Login Authentication Flow with JWT Access, Refresh Tokens, Cookies](https://i.ytimg.com/vi/-JJFQ9bkUbo/default.jpg)
![Refreshing Tokens With Axios Interceptors](https://i.ytimg.com/vi/16-1mTdGBoM/default.jpg)
![React Protected Routes | Role-Based Authorization | React Router v6](https://i.ytimg.com/vi/oUZjO00NkhY/default.jpg)
![React Axios API Requests | Axios with React JS Tutorial](https://i.ytimg.com/vi/ZEKBDXGnD4s/default.jpg)
![Authentication & Refreshing Tokens Implementation](https://i.ytimg.com/vi/xjMP0hspNLE/default.jpg)
![JWT Authentication Tutorial - Node.js](https://i.ytimg.com/vi/mbsmsi7l3r4/default.jpg)
![Secure JWT Authentication - Where to store the JWT Token. How to store JWT token in httpOnly cookies](https://i.ytimg.com/vi/894seNhONF8/default.jpg)
![I built the same app 10 times // Which JS Framework is best?](https://i.ytimg.com/vi/cuHDQhDhvPE/default.jpg)
![How JWT Works - Client and Server](https://i.ytimg.com/vi/QCCmWNlEkdY/default.jpg)
![How to Store JWT for Authentication](https://i.ytimg.com/vi/iD49_NIQ-R4/default.jpg)
![React Persistent User Login Authentication with JWT Tokens](https://i.ytimg.com/vi/27KeYk-5vJw/default.jpg)
![The Ultimate guide to JWT client side authentication (Stop Using Local Storage !!!)](https://i.ytimg.com/vi/d2gfJ8UVPDo/default.jpg)
![React Hooks useContext Tutorial (Storing a User)](https://i.ytimg.com/vi/lhMKvyLRWo0/default.jpg)
![React Native Axios, AsyncStorage and JSON Web Token (JWT) for Login Authentication](https://i.ytimg.com/vi/hMpcOLgLdlw/default.jpg)
![Cookies, Sessions, JSON Web Tokens (JWT) and More 🍪🔐](https://i.ytimg.com/vi/uXDnS5PcjCA/default.jpg)
![JWT Authentication Tutorial - Node.js and React](https://i.ytimg.com/vi/Yh5Lil03tpI/default.jpg)
![Authentication With JWT Tutorial - React, NodeJS | How To](https://i.ytimg.com/vi/KgXT63wPMPc/default.jpg)