JWT Authentication in React
About
This module will equip learners with the foundational skills and knowledge to implement JSON Web Token (JWT) authentication in React applications. By exploring JWT mechanics, building essential authentication components, and integrating with a back-end, students will develop a comprehensive understanding and practical skills in managing user authentication.
By the end of this module, students will have constructed a robust authentication codebase that can serve as a template for future projects.
Content
| Lesson | Skills |
|---|---|
| Setup | Set up the development environment. |
| Concepts | Describe the use of JWT authentication within a React application. |
| Build Sign-Up Functionality | Add sign-up functionality to a React app, allowing users to create accounts. |
The useContext() Hook |
Manage state using React’s useContext() hook. |
Use localStorage to Persist Sessions |
Use a JWT in localStorage to persist user sessions. |
| Build Sign-Out Functionality | Remove a JWT from localStorage to end user sessions. |
| Build Sign-In Functionality | Add sign-in functionality utilizing a JWT in a React application. |
| Conditionally Render in a Route | Implement a route that displays different components. |
| Make Authenticated Requests | Make authenticated requests to a back-end server with the JWT. |
References
Internal
Prerequisites
- React State Management
- Controlled Forms in React
- Lifting State in React Components
- Fetching Data in React
- React Router DOM
- JWT Authentication in Express APIs
Starter code
This module requires an existing Express API with JWT Authentication set up.
Course landing pages
Resources
Find a 👾 bug 👾 or have suggestions? Let us know!