Published On Jan 14, 2022
Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap
React Protected Routes allows you to make part of your React app exclusive to authorized users. Role-Based Authorization allows different levels of access based upon the assigned user roles. This tutorial utilizes React Router v6.
š Support me on Patreon ā Ā Ā /Ā 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
š React JS for Beginners full course - 9 hours: Ā Ā Ā ā¢Ā ReactĀ JSĀ FullĀ CourseĀ forĀ BeginnersĀ |Ā ...Ā Ā
š Source Code: https://github.com/gitdagray/react_pr...
š¬ Course Updates ā https://courses.davegray.codes/
React Protected Routes | Role-Based Authorization | React Router v6
(00:00) Intro
(00:53) Welcome and Startup
(01:27) Install React Router v6
(02:17) Update index.js with RRv6
(03:38) Basic Routing Setup
(07:41) useAuth hook
(10:06) RequireAuth component v1
(14:38) Manage browser history
(18:50) Testing with backend authentication
(21:00) RequireAuth component v2
(24:26) Applying Role-Based Routing
(26:35) Object lookup for roles
(28:15) Testing role-based routes
(29:37) Last note on the Unauthorized component
ā Buy Me A Coffee: https://www.buymeacoffee.com/davegray
š React Router Version 6 in 20 minutes: Ā Ā Ā ā¢Ā ReactĀ RouterĀ v6Ā inĀ 20Ā MinutesĀ |Ā RRv6Ā ...Ā Ā
š React User Login and Authentication with Axios: Ā Ā Ā ā¢Ā ReactĀ UserĀ LoginĀ andĀ AuthenticationĀ w...Ā Ā
š React Register Form with Validation, Axios and a11y: Ā Ā Ā ā¢Ā ReactĀ JSĀ FormĀ ValidationĀ |Ā AxiosĀ User...Ā Ā
š 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...Ā Ā
š FontAwesome for React:
https://fontawesome.com/v5.15/how-to-...
š RegExr for Regular Expressions: https://regexr.com/
š 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: Ā Ā /Ā yesdavidgrayĀ Ā
LinkedIn: Ā Ā /Ā davidagrayĀ Ā
Blog: https://yesdavidgray.com
Reddit: Ā Ā /Ā daveonelevenĀ Ā
Was this tutorial about creating protected routes and role-based user authorization in React with React Router v6 helpful? If so, please share. Let me know your thoughts in the comments.
#react #protected #routes