React Login Authentication with JWT Access, Refresh Tokens, Cookies and Axios
732.5 هزار بار بازدید -
2 سال پیش
-
Web Dev Roadmap for Beginners
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.
💖 Support me on Patreon ➜ Patreon: 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: React JS Full Course for Beginners | ...
👀 React Login tutorial series playlist: React Login, Registration, and Authen...
🔗 Starter Source Code: https://github.com/gitdagray/react_pr...
🔗 Completed Source Code: https://github.com/gitdagray/react_jw...
📬 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: React JS Form Validation | Axios User...
2) React User Login and Authentication with Axios: React User Login and Authentication w...
3) React Protected Routes | Role-Based Authorization: React Protected Routes | Role-Based A...
4) This video!
🔗 Node JS Full Course (with source code) for building the backend REST API that will receive your form submissions: Node.js Full Course for Beginners | C...
🔗 React Router Version 6 in 20 minutes: React Router v6 in 20 Minutes | RRv6 ...
🔗 FontAwesome for React:
https://fontawesome.com/v5.15/how-to-...
🔗 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...
Cross-Site Scripting (XSS): https://owasp.org/www-community/attac...
Cross-Site Request Forgery (CSRF): https://owasp.org/www-community/attac...
📚 Accessible Form References:
WebAIM.org - Advanced Forms: https://webaim.org/techniques/forms/a...
WebAIM.org - Form Validation: https://webaim.org/techniques/formval...
MDN - Aria Attributes:
aria-invalid: https://developer.mozilla.org/en-US/d...
aria-describedby: https://developer.mozilla.org/en-US/d...
aria-live: https://developer.mozilla.org/en-US/d...
aria-label: https://developer.mozilla.org/en-US/d...
🔗 ES7 React JS Snippets Extension for VS Code:
https://marketplace.visualstudio.com/...
🔗 React Dev Tools Extension for Chrome:
https://chrome.google.com/webstore/de...
📚 References:
ReactJS Official site: https://reactjs.org/
React Wikipedia: https://en.wikipedia.org/wiki/React_(...)
React Jobs: https://www.ziprecruiter.com/candidat...
✅ Follow Me:
Github: https://github.com/gitdagray
Twitter: Twitter: yesdavidgray
LinkedIn: LinkedIn: davidagray
Blog: https://yesdavidgray.com
Reddit: Reddit: 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 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.
💖 Support me on Patreon ➜ Patreon: 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: React JS Full Course for Beginners | ...
👀 React Login tutorial series playlist: React Login, Registration, and Authen...
🔗 Starter Source Code: https://github.com/gitdagray/react_pr...
🔗 Completed Source Code: https://github.com/gitdagray/react_jw...
📬 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: React JS Form Validation | Axios User...
2) React User Login and Authentication with Axios: React User Login and Authentication w...
3) React Protected Routes | Role-Based Authorization: React Protected Routes | Role-Based A...
4) This video!
🔗 Node JS Full Course (with source code) for building the backend REST API that will receive your form submissions: Node.js Full Course for Beginners | C...
🔗 React Router Version 6 in 20 minutes: React Router v6 in 20 Minutes | RRv6 ...
🔗 FontAwesome for React:
https://fontawesome.com/v5.15/how-to-...
🔗 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...
Cross-Site Scripting (XSS): https://owasp.org/www-community/attac...
Cross-Site Request Forgery (CSRF): https://owasp.org/www-community/attac...
📚 Accessible Form References:
WebAIM.org - Advanced Forms: https://webaim.org/techniques/forms/a...
WebAIM.org - Form Validation: https://webaim.org/techniques/formval...
MDN - Aria Attributes:
aria-invalid: https://developer.mozilla.org/en-US/d...
aria-describedby: https://developer.mozilla.org/en-US/d...
aria-live: https://developer.mozilla.org/en-US/d...
aria-label: https://developer.mozilla.org/en-US/d...
🔗 ES7 React JS Snippets Extension for VS Code:
https://marketplace.visualstudio.com/...
🔗 React Dev Tools Extension for Chrome:
https://chrome.google.com/webstore/de...
📚 References:
ReactJS Official site: https://reactjs.org/
React Wikipedia: https://en.wikipedia.org/wiki/React_(...)
React Jobs: https://www.ziprecruiter.com/candidat...
✅ Follow Me:
Github: https://github.com/gitdagray
Twitter: Twitter: yesdavidgray
LinkedIn: LinkedIn: davidagray
Blog: https://yesdavidgray.com
Reddit: Reddit: 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
2 سال پیش
در تاریخ 1400/11/08 منتشر شده
است.
732,518
بـار بازدید شده