Full Stack JWT Авторизация - Создаем Приложение | Access, Refresh | React, Node, Express, JavaScript

  Переглядів 12,813

sentiero

sentiero

День тому

Fullstack JWT Авторизация Для Начинающих
🛠️ Скачать Node.js: nodejs.org/en
💻 Скачать Visual Studio Code: code.visualstudio.com/
🐘 Скачать PostgreSQL: www.enterprisedb.com/download...
💼 Исходный код проекта: github.com/sentieroJsDev/jwt-...
🕒 Содержание:
00:00 Вступление
01:43 Теория
05:04 Подготовка окружения
06:15 Демо начальной версии
09:48 Подключение Postgres
11:21 Регистрация
24:55 Управление JWT на клиенте
27:21 Защищенный endpoint
32:23 Выход из аккаунта
34:55 Вход в аккаунт
37:26 Рефреш
44:36 Роуты на клиенте
48:25 Про кражу токенов
49:38 Про авторизацию с неск. устройств
50:11 Заключение

КОМЕНТАРІ: 37
@petruhinmaxim
@petruhinmaxim 5 місяців тому
Бро, я даже на 1,25 не вывозил. Спасибо, субъективно для меня, нужный темп и ровный по концентрации инфы.
@GigaGhad-vr2fm
@GigaGhad-vr2fm 4 місяці тому
реально доходчиво обьяснил , мне кажется я не единственный кто хочет больше такого качественнго контента,продолжай в том же духе
@user-sc5vu6ks8s
@user-sc5vu6ks8s 22 дні тому
Сейчас пытаюсь реализовать аунтификацию с помощью accessToken и refreshToken, access храню на клиенте в переменной, refreshToken в cookies с флагом httpOnly:true так же использую refreshSession таблицу в базе данных где храню fingerprint и refreshToken каждого пользователя. так же у меня уже реализована функция обновления access токена на клиенте когда он истёк. проблема заключается в том что делать если пользователь обновил страницу , не понимаю как сделать так что бы его не выбрасывало из системы так как при обновление токен в памяти удаляется а к refreshToken я не имею доступ с js кода, есть варианты?
@userfhhoyhgfdgg
@userfhhoyhgfdgg 3 місяці тому
Ай да и не плохо. Подписка однозначно. Спасибо за качество
@_c.ute.wolf_1576
@_c.ute.wolf_1576 5 місяців тому
Замечательный урок! Кратко и лаконично, давно такого не видел)
@yevheniipolovinchuk5326
@yevheniipolovinchuk5326 3 місяці тому
Я фанат UlbiTV, но твой контент ничем не уступает. Очень приятный голос и доходчивое пояснение. Лайк + подписка
@user-nr1uo8li2c
@user-nr1uo8li2c 2 місяці тому
Лайк, подписка! Очень круто! Спасибо за урок! Лучший!
@vasiliisisilii
@vasiliisisilii 5 місяців тому
Прекрасный урок, спасибо автору ❤
@omur7ak0v
@omur7ak0v 5 місяців тому
Тот человек, который знает, что делает, и делает это идеально! Супер!!!!!
@webhero42
@webhero42 5 місяців тому
Вот бы гайд авторизации на nest js интересно бы было глянуть Наконец-то нашол профессиональный обучающий контент
@likluklak
@likluklak 5 місяців тому
Шикарно!
@user-xm1hd8fe9m
@user-xm1hd8fe9m 5 місяців тому
Большое спасибо
@maksymshypytsia5217
@maksymshypytsia5217 5 місяців тому
Огонь всем советую
@user-rb5ju5se3y
@user-rb5ju5se3y 5 місяців тому
Супер
@user-gg7vn9gh8b
@user-gg7vn9gh8b 2 місяці тому
можно склонировать и использовать этот код для своих проектов?
@Klerfe
@Klerfe Місяць тому
Как сделать так, чтобы твой проект запускал вместе бек и фронт если бек из вашего репозитория, а фронт свой? И как можно задеплоить все на github pages?
@dec232
@dec232 Місяць тому
Все сработало кроме одновременного выхода с двух вкладок. Не знает кто? Может что поменяли?
@agent_khuseinov
@agent_khuseinov 3 місяці тому
Ролик топ, было еще круче сделать по этому проекту другое видео, где применяется какая-нибудь orm и стейт менеджер, такой видос был бы ну очень крутой
@EugeneKh.
@EugeneKh. 29 днів тому
В чем проблема, замени стандартный драйвер node-postgres на любую orm, а вместо контекста используй хранилище. Суть точно та же, просто разные инструменты.
@silverlr3130
@silverlr3130 4 місяці тому
Можешь подсказать, у тебя работает HTTP only Cookie при том условии, что фронт и бэк находятся на одном домене? Я правильно понял? При разных доменах работать не будет?
@sentieroJsDev
@sentieroJsDev 4 місяці тому
Да, все верно. Если апи и клиент на разных доменах, то хорошим вариантом будет редирект запросов средствами nginx
@EugeneKh.
@EugeneKh. 29 днів тому
Настрой Cors
@unicoxr5tj417
@unicoxr5tj417 4 місяці тому
вообще, очень важный урок. Потом еще фейк апи с Джисон файлом надо уметь делать.
@krahmaletskrakmalets7587
@krahmaletskrakmalets7587 2 місяці тому
Я правильно понимаю, что пр каждом открытии страницы идет запрос "refresh"?
@EugeneKh.
@EugeneKh. 29 днів тому
Абсолютно верно. Минус такого подхода, как хранение токена в памяти приложения в замыкании или в любом стэйт-менеджере в том, что после перезагрузки страницы мы теряем информацию о токене и пользователе. Тут правила диктуют сфера использования приложения и возможные риски в случае кражи токенов. Если оно хранит "super sensitive data", тогда стоит хранить токен секьюрно, если нет, почему бы не использовать локальное хранилище. То, что токен хранится в замыкании, не гарантирует того, что он не будет перехвачен в процессе запроса посредством CSRF.
@likluklak
@likluklak 4 місяці тому
Есть какая-то альтернатива fingerprint-express?
@likluklak
@likluklak 4 місяці тому
подозреваю что большая часть этих фингерпринтов будет одинаковая, особенно на устройствах apple
@EugeneKh.
@EugeneKh. 29 днів тому
Да, генерировать fingerprint на клиенте. Загугли соответствующие библиотеки. Проблема express-fingerprint в том, что он генерирует хэш на основе заголовков (а именно свойства user-agent, заголовков типа accept и ip локации), которые можно подделать. Клиентские же библиотеки могут формировать отпечаток из таких параметров, как языки пользователя браузера, размеры вьюпорта и еще много чего. В качестве учебного примера допустимо и так.
@archee7309
@archee7309 5 місяців тому
поч type для input пароля не password?🧐
@sentieroJsDev
@sentieroJsDev 5 місяців тому
Изначально type был password, но когда начал записывать, на мой взгляд, немного потерялась наглядность😊
@zoki5388
@zoki5388 4 місяці тому
I'm sorry for comment in English, it would be nice if you made second part of this, with dashboard or with email verification for new user.
@whiteltd5970
@whiteltd5970 2 місяці тому
Спасисибо за ролик, а у меня задача с авторизацией только по почте (без использования пароля) на почту приходит код, затем берем код из почты и вписываем в input и авторизовываемся , то как такое реализовывается ?
@user-fn6xx7db1r
@user-fn6xx7db1r Місяць тому
Поищи есть вроде
@EugeneKh.
@EugeneKh. 29 днів тому
В чем сложность? Генерируй код, тем же uuid-v4. Используй любой npm пакет для отправки писем с node. Зашиваешь в письмо код, в базу сохраняешь код вместе с данными пользователя. С клиента отправляешь код и сравниваешь с тем, что в бд.
@erkanat_iman
@erkanat_iman 3 місяці тому
Как новичок , не много не понятно)))
@iznaur_18
@iznaur_18 4 місяці тому
Автор расскажи про то как внедрить cms на проект реакт в хостинге, нигде не нашел инфы об этом
JWT как строить архитектуру
28:36
S0ER
Переглядів 27 тис.
Stray Kids "Lose My Breath (Feat. Charlie Puth)" M/V
02:53
JYP Entertainment
Переглядів 13 млн
Get a knife! | Standoff 2
01:06
Standoff 2 Live
Переглядів 1,5 млн
WebStorm 2024.1 EAP/3 review | WebStorm News | ENG Subtitles
6:54
alex lumper
Переглядів 1,2 тис.
Что такое JWT и как его создать
14:32
Listen IT
Переглядів 37 тис.
Аутентификация. Сессии и JWT
23:37
Сеньор Фронтенд
Переглядів 4,2 тис.
Node JS & PostgreSQL полный курс 2021 Rest API
20:08
Ulbi TV
Переглядів 149 тис.
How tRPC really works
20:51
Christopher Ehrlich
Переглядів 32 тис.
ExpressJS Быстрый Курс
1:09:11
Владилен Минин
Переглядів 195 тис.