Критерії приймання

@
  • Створено репозиторій goit-react-hw-08-phonebook
  • При здачі домашньої роботи є посилання на вихідні файли та робочі сторінки кожного проекту на GitHub Pages
  • При запуску коду завдання, в консолі немає помилок та попереджень...
  • Для кожного компонента є окрема папка з файлом компонента React та файлом стилів
  • Для компонентів описано propTypes

Книга контактів

Додай у програму «Книга контактів» можливість реєстрації, логіна та оновлення користувача, а також роботу з приватною колекцією контактів.

Бекенд

Для цього завдання є готовий бекенд. Ознайомся з документацією. Він підтримує всі необхідні операції з колекцією контактів, а також реєстрацію, логін та оновлення користувача за допомогою JWT. Використовуй його замість твого бекенда створеного через сервіс mockapi.io.

Маршрутизація

Додай маршрутизацію з бібліотекою React Router. У програмі має бути кілька сторінок:

- /register - публічний маршрут реєстрації нового користувача з формою.

- /login - публічний маршрут логіна існуючого користувача з формою

- /contacts - приватний маршрут для роботи зі списком контактів користувача

Додай компонент навігації Navigation з посиланнями для переходу по маршрутах.

Меню користувача

Створи компонент UserMenu, що відображає пошту користувача і кнопку виходу з облікового запису. Ось як може виглядати його розмітка.

image

Стилізація

Це фінальна версія програми, тому попрацюй над оформленням інтерфейсу. Можна використовувати бібліотеку стилізації або компонентів, наприклад Chakra UI або Material UI.


JSON Web Token

Один із механізмів авторизації це JWT (JSON Web Token). Токени надають собою засіб авторизації для кожного запиту від фронтенду до бекенду. Токени створюються на бекенді ґрунтуючись на секретному ключі, який зберігається на сервері, та якихось унікальних для користувача даних, наприклад пошта тощо. Токен у результаті зберігається на фронтенді і використовується за необхідності авторизації будь-якого запиту.

Кожен токен це унікальний зашифрований рядок, який містить три блоки: заголовок (header), набір полів (payload) та сигнатуру. При спробі зловмисником підмінити дані в header або payload, токен стане не валідним, оскільки сигнатура не відповідатиме початковим значенням. А можливість згенерувати нову сигнатуру у зловмисника відсутня, оскільки секретний ключ для зашифрування лежить на сервері.

image