ПОДРОБНАЯ Full Stack JWT авторизация на React и Nest - связываем клиент и сервер [ЧАСТЬ_1]
В этом видео разберемся как настроить fullstack jwt авторизацию, используя React и Nest Мы будем разрабатывать проект с полного нуля, создадим формы логина и регистрации на клиенте, используя React, Typescript, Zustand, And-design, Axios На стороне сервера разберемся с механизмом JWT авторизации на Nest, научимся использовать access и refresh токены, JWT стратегии, Pasport.js, а в качестве базы данных будем использовать Postgres Сценарий ролика заранее я не писал, в основном лайвкодил и потом нарезал уже видео на фрагменты Я применял каждую технологию по мере необходимости, чтобы ты мог видеть как работает каждая из них Видео получилось длинным, моменты со своими затупами и оговорками я вырезал, а вот допущенные ошибки и неверные решения я оставил, чтобы ты видел, какие проблемы возникают в процессе разработки и как их можно решить И еще, примерно первый час иногда будут возникать проблемки со звуком и моментами немного жесткая нарезка получилась, но это только в начале Готовый проекта: https://github.com/Salimov-dev/auth-project Мой ТГ: https://t.me/Rogooo Канал на youtube: https://www.youtube.com/@salimov-dev 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
В этом видео разберемся как настроить fullstack jwt авторизацию, используя React и Nest Мы будем разрабатывать проект с полного нуля, создадим формы логина и регистрации на клиенте, используя React, Typescript, Zustand, And-design, Axios На стороне сервера разберемся с механизмом JWT авторизации на Nest, научимся использовать access и refresh токены, JWT стратегии, Pasport.js, а в качестве базы данных будем использовать Postgres Сценарий ролика заранее я не писал, в основном лайвкодил и потом нарезал уже видео на фрагменты Я применял каждую технологию по мере необходимости, чтобы ты мог видеть как работает каждая из них Видео получилось длинным, моменты со своими затупами и оговорками я вырезал, а вот допущенные ошибки и неверные решения я оставил, чтобы ты видел, какие проблемы возникают в процессе разработки и как их можно решить И еще, примерно первый час иногда будут возникать проблемки со звуком и моментами немного жесткая нарезка получилась, но это только в начале Готовый проекта: https://github.com/Salimov-dev/auth-project Мой ТГ: https://t.me/Rogooo Канал на youtube: https://www.youtube.com/@salimov-dev 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