Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap
Add React.js User Login and Registration with Auth0 to your React app quickly and easily. In this tutorial, we’ll apply a simple login system to a React app to get you started with Auth0.
⭐ 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: https://www.youtube.com/playlist?list=PL0Zuz27SZ-6PRCpm9clX0WiBEMB70FWwd
Source Code: https://github.com/gitdagray/react_login_auth0
Course Updates https://courses.davegray.codes/
React.js User Login and Registration with Auth0
(00:00) Intro
(00:12) Welcome
(00:24) Create an Auth0 account and app
(04:55) Install the Auth0 npm package
(06:06) Environment variables
(08:43) Auth0Provider context
(10:41) Create login and logout buttons
(13:51) App component
(15:17) Testing the login and logout buttons
(16:22) Profile component
(21:25) Auth0 loading and error states
(24:32) Auth0 – Good or Bad
Buy Me A Coffee: https://www.buymeacoffee.com/davegray
Hide Secret Variables with these tutorials:
Serverless Function Relay: https://youtu.be/J7RKx8f4Frs
Node Relay: https://youtu.be/uk9pviyvrtg
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 Auth0 User Login and Registration in React helpful? If so, please share. Let me know your thoughts in the comments.
#react #login #auth0
