Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap

Learn these React Login Input hooks for user form data, and create hooks that can be used in future projects, too. These custom React hooks will level up your login form controlled inputs.

⭐ 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_persist_login

Completed Source Code: https://github.com/gitdagray/react_login_hooks

Course Updates https://courses.davegray.codes/

React Login Input Hooks for User Form Data

(00:00) Intro
(00:27) Welcome
(00:40) Setup
(01:08) useLocalStorage hook - simple version
(04:08) Applying useLocalStorage to user input
(05:41) Adding more functionality to useLocalStorage
(09:49) useInput hook
(12:07) Applying useInput to user input
(14:54) Adding useLocalStorage to useInput
(16:33) useToggle hook
(22:27) Adding useToggle to the login form

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) React Login Authentication with JWT Access, Refresh Tokens, Cookies and Axios: https://youtu.be/nI8PYZNFtac

5) React Persistent User Login Authentication with JWT Tokens: https://youtu.be/27KeYk-5vJw

6) This video!

Node JS Full Course (with source code) for building the backend REST API: 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 Hooks for a Login form helpful? If so, please share. Let me know your thoughts in the comments.

#react #login #hooks