Продвинутая JWT авторизация на React и Node js. Access, refresh, активация по почте

В этом ролике мы разберем всю теорию связанную с JWT авторизацией и реализуем JWT access, refresh авторизацию на node js и react. Также реализуем подтверждение почты. Активация почты на node js.

Полезные ссылки ↓

Таймкоды:
00:00 ➝ Введение
01:30 ➝ JWT теория
07:30 ➝ [СЕРВЕР] Начало разработки
11:10 ➝ [СЕРВЕР] Создание базы данных MongoDB
13:40 ➝ [СЕРВЕР] Структура проекта
14:10 ➝ [СЕРВЕР] Схема и модель данных. User, Token.
16:55 ➝ [СЕРВЕР] Роутинг, маршрутизация, ендпоинты
18:40 ➝ [СЕРВЕР] UserController
21:40 ➝ [СЕРВЕР] Регистрация пользователя
26:59 ➝ [СЕРВЕР] Генерация JWT access, refresh токенов
36:44 ➝ [СЕРВЕР] PostMan. Тестирование функции регистрации
38:10 ➝ [СЕРВЕР] Отправка письма подтверждения на почту
43:40 ➝ [СЕРВЕР] Функция активации аккаунта
46:50 ➝ [СЕРВЕР] Мидлвейр для обработки ошибок. Error handler
52:59 ➝ [СЕРВЕР] Валидация тела запроса
55:40 ➝ [СЕРВЕР] Функция логина
58:46 ➝ [СЕРВЕР] Функция логаута
01:01:40 ➝ [СЕРВЕР] Функция для обновления токена (refresh)
01:05:50 ➝ [СЕРВЕР] Функция для получения пользователей
01:06:40 ➝ [СЕРВЕР] Middleware, проверяющий токен
01:12:35 ➝ [КЛИЕНТ] Начало разработки
01:13:59 ➝ [КЛИЕНТ] Настраиваем axios
01:14:59 ➝ [КЛИЕНТ] Interceptors и добавление токена к запросу
01:18:05 ➝ [КЛИЕНТ] AuthService, UserService
01:22:40 ➝ [КЛИЕНТ] Компонент LoginForm
01:23:59 ➝ [КЛИЕНТ] MobX и глобальный стейт
01:31:30 ➝ [КЛИЕНТ] Проверяем, авторизован ли пользователь
01:38:59 ➝ [КЛИЕНТ] Активация аккаунта
01:40:59 ➝ [КЛИЕНТ] Interceptors и обновление access токена

Поддержать меня и мой канал вы можете по ссылкам ниже.

[UlbiTV]

Таймкоды в описании, всем приятного просмотра :) Также оставляем идеи для следующих роликов в комментариях!

[ЛёхаИльич-чы]

Одни из лучших роликов на Ютубе по данной тематике. Канал с таким контентом полюбому перевалит за 100к, удачи автору, надеюсь не бросишь свое благое дело

[NameOfFool]

Для тех, кто столкнулся с проблемой при работе с nodemailer. После 30 мая 2022, закрыли доступ к настройке сторонних приложений. Чтобы решить эту проблему:
1) поставьте двух-этапную аутентификацию, если ее нет
2) вернитесь в настройки безопасности, под пунктом вход в аккаунт появится вкладка пароли приложений. Заходите, после выполнения всех махинаций, вам выдадут пароль для доступа к почте. Копируем, пихаем в проект вместо нашего обычного

[LEGONER]

Если у кого возникнут проблемы с gmail:
1. Переходим в настройки и включаем там двухфакторную аутентификацию
2. После включения 2fa переходит в их настройки
3. Листаем в самый низ и находим там "App passwords"
4. Добавляем новое приложение, скажем ваше имя приложения и создаём ключ
5. Этот ключ вставляем в .env вместо ваше и всё будет работать ;)

[kolyasotnichenko]

Привет, у меня ошибка (Error: 4092:error:1408F10B:SSL) при отправке ссылки активации на почту. Использую Gmail.

[FireORcolD]

Тимур можешь объяснить, я никак понять не могу, как ты вот отсюда const userData = получаешь userData.id, там же string возвращается или null или jwt? как в твоем случае jwt.verify(token, сравнение может вернуть из базы данные, что потом из того что вернулось забрать id?

[dmitriiforofontov]

Даже за год после выхода, никто из авторов не смог догнать эту тему по качеству... Браво

[devorer]

Очень высокое качество подачи контента. Не знаю, специально ты старался или уже "само" получается, но формат почти идеальный - функция/метод в высоту экрана, изложение материала, следующий скрин. Тимур, ты отличный преподаватель.

[unknownhero]

В чем смысл хранить рефреш токен в бд?

[vladov]

Подскажи как на клиенте валидировать accessToken если он хранится как httpOnly куки ? Я сделал немного иначе чем у тебя: при регистрации только генерирую пользователя и отсылаю письмо активации, а при логине я помещаю refreshToken и accessToken как httpOnly куки вместо localStorage.

[NikitaBatrak]

это то что мне нужно было, огромное спасибо мужик

[iskotar]

Единственное, что бы я поправил, я бы не отправлял обратно пару токенов в теле ответа. По идее это не безопасно. В теле оставить только токен доступа, а рефреш токен полетит на клиент в куках. Думаю так будет лучше. Поправь если я не прав.

[dmitrygorbatikov]

Раньше, когда был кипятильником, смотрел видосы Владлена Минина. Но когда дорос до чайника, пора бы знать как делается нормальная авторизация, спасибо ❤️ а то у меня акцесс токен генерировался, ставил на час, всё крашилось, выскакивала ошибка "нет авторизации" и приходилось убирать поле expiresin, чтобы эти ошибки меня не бесили

[ivansofronov]

Еще ругался TypeScript по типам ошибок приходилось ставить "any"

[nilsen]

Привет, спасибо за видео. Вопрос, зачем прокидывать через контекст, почему нельзя сделать так?

const store = new Store();

export default Store;

[matveiseliverstov]

Очень классный видеоролик, сделай видос про подключение оплаты к сайту, типо с нуля, как добавить возможность оплаты, таких роликов я не видел, а у тебя получается понятным языком объяснять непонятные вещи, короче, было бы классно, ну а так, как всегда лайк, продолжай в том же духе.

[gusbr]

А как на сегодняшний день дать доступ в GMAIL посторонним программам?
Застрял на моменте рассылок на почту вылетают ошибки (

[darkside]

Красавчик. 👍 P.S. Мне страшно представить сколько ты времени потратил на этот продвинутый гайд 😱

[catweb]

У меня в request.cookies приходит [Object: null prototype] {}, как решить?

[brawl_stars_killer]

Для тех кто делает SMTP через гугл сейчас, добавляйте на аккаунт гугла двухфакторную аутентификацию, создайте пароль для приложений(в настройках безопасности) и в файле .env поменяйте пароль от гугл аккаунта на пароль который вы сгенерировали