Подробная Full Stack JWT авторизация на React и Nest - связываем клиент и сервер скачать в хорошем качестве

Подробная Full Stack JWT авторизация на React и Nest - связываем клиент и сервер

В этом видео разберемся как настроить fullstack jwt авторизацию, используя React и Nest Мы будем разрабатывать проект с полного нуля, создадим формы логина и регистрации на клиенте, используя React, Typescript, Zustand, And-design, Axios На стороне сервера разберемся с механизмом JWT авторизации на Nest, научимся использовать access и refresh токены, JWT стратегии, Pasport.js, а в качестве базы данных будем использовать Postgres В видео я применял каждую технологию по мере необходимости, чтобы ты мог видеть как работает каждая из них Видео получилось длинным, допущенные ошибки и неверные решения я оставил, чтобы ты видел, какие проблемы возникают в процессе разработки и как их можно решить И еще, примерно первый час иногда будут возникать проблемки со звуком и моментами немного жесткая нарезка получилась, но это только в начале Готовый проект: https://github.com/Salimov-dev/auth-p... Мой ТГ: https://t.me/Rogooo Мой канал на rutube: https://rutube.ru/channel/28468267/ 00:00 Вступление 01:16 [КЛИЕНТ] Инициализация клиента на vite 02:50 [КЛИЕНТ] Верстка хедера, форм логина и регистрации 37:55 [КЛИЕНТ] Создание абсолютных путей для компонентов 42:41 [СЕРВЕР] Инициализация сервера на nest 47:33 [СЕРВЕР] Создание модуля авторизации auth 52:13 [КЛИЕНТ] Связываем форму регистрации с модулем авторизации 57:33 [СЕРВЕР] Установка CORS 59:50 [СЕРВЕР] Создание DTO для register 01:03:42 [СЕРВЕР] Подключение PRISMA и создание моделей в prisma 01:14:56 [СЕРВЕР] Рефакторинг 01:17:30 [СЕРВЕР] Настройка валидации через class-validator 01:21:25 [СЕРВЕР] Хеширование пароля через bcrypt 01:24:00 [СЕРВЕР] Рефакторинг 01:26:47 [СЕРВЕР] Создание модуля пользователя user 01:30:32 [СЕРВЕР] Разрабатываем user.service и user.controller 01:39:39 [СЕРВЕР] Прорабатываем метод регистрации register 01:54:14 [КЛИЕНТ] Обрабатываем ошибки в форме регистрации и выводим на экран 02:11:40 [КЛИЕНТ] Рефакторинг 02:25:00 [КЛИЕНТ] Разрабатываем метод логина 02:32:48 [СЕРВЕР] Разрабатываем метод логина 02:42:25 [СЕРВЕР] Начало работы с JWT, установка зависимостей 02:46:12 [СЕРВЕР] Реализация JWT - модель токена, функция refreshToken 02:55:46 [СЕРВЕР] Рефакторинг 03:01:42 [КЛИЕНТ] Получаем accessToken и устанавливаем его в localStorage 03:07:51 [КЛИЕНТ] Прикрепляем accessToken к каждому запросу через axios.interceptors 03:10:50 [СЕРВЕР] Реализация JWT strategy 03:24:45 [СЕРВЕР] Рефакторинг 03:31:43 [КЛИЕНТ/СЕРВЕР] Подведение кратких итогов по проделанной работе в авторизации 03:37:38 [КЛИЕНТ] Обрабатываем ошибку 401 через axios.interceptors 03:45:51 [СЕРВЕР] Установка refreshToken в cookies 03:59:22 [СЕРВЕР] Получаем refreshToken в каждом ответе от сервера 04:05:36 [СЕРВЕР] Работаем с refreshToken и accessToken 04:13:41 [СЕРВЕР] Создание модуля для токена token и рефакторинг 04:24:10 [СЕРВЕР] Разносим модели prisma по разным файлам 04:26:27 [КЛИЕНТ] Дорабатываем http.service 04:28:43 [КЛИЕНТ] Подключение стора zustand и создание useAuthStore 04:39:00 [КЛИЕНТ] Разработка useTokenStore 04:42:00 [КЛИЕНТ] Создание отдельного сервиса authService 04:54:22 [КЛИЕНТ] Разрабатываем tokenService 04:55:39 [КЛИЕНТ] Разрабатываем userService 04:56:39 [КЛИЕНТ] Разрабатываем userStore 04:57:45 [КЛИЕНТ] Дорабатываем http.service 05:02:17 [КЛИЕНТ] Сохраняем состояние isAuth в сторе useAuthStore 05:06:28 [КЛИЕНТ] Создаем appLoader 05:07:41 [КЛИЕНТ] Выводим имя пользователя на клиенте и подключаем dropdown 05:19:03 [КЛИЕНТ/СЕРВЕР] Делаем автоматический login после регистрации 05:20:03 [КЛИЕНТ] Очищаем форму и закрываем модальное окно после запроса 05:23:21 [КЛИЕНТ] Рефакторинг 05:25:40 [КЛИЕНТ] Добавляем лоадер на имя пользователя 05:26:46 [КЛИЕНТ] Исправляем обработчик ошибок 05:28:07 [КЛИЕНТ] Конец