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