ПОДРОБНАЯ Full Stack JWT авторизация на React и Nest - связываем клиент и сервер [ЧАСТЬ_2]
В этом видео разберемся как настроить 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 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 [КЛИЕНТ] Конец
В этом видео разберемся как настроить 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 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 [КЛИЕНТ] Конец