Скачать или смотреть Подробная 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 [КЛИЕНТ] Конец