This project is the final React homework for the GOIT React course. It extends the classic Phonebook application by adding user authentication, authorization, and personal contact isolation using JWT.
Each registered user can access and manage only their own contacts. The application is built with Vite, React, Redux Toolkit, and React Router.
-
GitHub Repository:
https://github.com/YOUR_USERNAME/goit-react-hw-08 -
Live Demo (Vercel):
https://YOUR_PROJECT_NAME.vercel.app
- React
- Vite
- Redux Toolkit
- React Router DOM
- Redux Persist
- Axios
- Formik & Yup
- CSS Modules
- JWT Authentication
- User registration and login
- JWT-based authentication
- Protected routes (Private & Restricted routes)
- Personal contact list for each user
- Contacts CRUD operations (add, delete)
- Contacts filtering by name
- Session persistence using redux-persist
- Automatic user refresh on page reload
The application uses a ready-made backend API: https://connections-api.goit.global/
Authentication is handled via JSON Web Tokens (JWT). After login or registration:
- The token is stored in Redux state
- The token is persisted in localStorage using redux-persist
- The Authorization header is automatically set for all API requests
This guarantees that:
- Each user sees only their own contacts
- Unauthorized users cannot access the contacts page
- Session is restored after page refresh
/— Home page/register— User registration (RestrictedRoute)/login— User login (RestrictedRoute)/contacts— Contacts page (PrivateRoute)
src/ ├── components/ │ ├── App │ ├── AppBar │ ├── AuthNav │ ├── Contact │ ├── ContactForm │ ├── ContactList │ ├── Filter │ ├── Layout │ ├── LoginForm │ ├── Navigation │ ├── RegistrationForm │ ├── UserMenu │ ├── PrivateRoute.jsx │ └── RestrictedRoute.jsx ├── pages/ │ ├── Home │ ├── Login │ ├── Registration │ └── Contacts ├── redux/ │ ├── auth/ │ │ ├── slice.js │ │ ├── operations.js │ │ └── selectors.js │ ├── contacts/ │ │ ├── slice.js │ │ ├── operations.js │ │ └── selectors.js │ ├── filters/ │ │ ├── slice.js │ │ └── selectors.js │ └── store.js ├── main.jsx └── App.jsx
- Register a new user
- Add several contacts
- Log out
- Register or log in with another user
- Verify that the contact list is empty or contains only that user's contacts
- Refresh the page and confirm the session persists
All homework requirements are fully implemented. The application runs without console errors or warnings. Authentication, authorization, routing, and Redux architecture strictly follow the task specifications.
Happy coding! 🚀