ReactJS авторизация / регистрация. ReactJS Authentication. Fullstack NestJS ReactJS 2023. [eng subs]

🤟 Ссылка на исходники : bit.ly/nest-react-src
Регистрация и авторизация внутри приложения React.
🔥 Обе сборки можно получить по ссылке:
/ gulp-tailwindcss-sbork...
🏆 Поднять мотивацию и получить плюшки(исходники, чат со мной):
🔹 Patreon: / roman_timoshchuk
🔹 Buy me a coffee: www.buymeacoffee.com/tymoshchuk
🔹 Crypto:
👉 USDT(ERC20): 0xA4008910De17DB20c7505425316fF72d4C5Eed96
👉 USDT(BEP20): 0x4350c4E1C0bB35634C7fDE1cFB278BE0606E3822
👉 Binance Pay: 432902886
⏱️ Тайм-коды: ⏱️
00:00 Вступление
00:07 Auth компонент - верстка
12:04 Создаем instance axios
21:16 Auth Service
23:02 регистрация пользователя
43:50 поправляем косяк с interface` ом
47:34 устанавливаем Redux Toolkit
58:27 логин в систему
01:14:44 logout
01:17:07 итог
📨 Сотрудничество ► [e-mail]
📨 Business inquiries ► [e-mail]

[@lets_try_js]

12/16. Регистрация и авторизация в приложении. Поддержите лайкосом хотя-бы)

[@gregdmitriev2784]

гуд, зашло, давай ещё)

[@DoSmth]

Закончу дедлайны на проекте и приступлю к урокам, спасибо огромное!

[@user-sd4gj8us3x]

👍👍

[@black_light]

Столкнулся с такой фигней, что при смене пользователя axios продолжает отправлять в запросах токен от предыдущей авторизации, хотя в localStorage лежит новый токен. Авторизация проходит как положено, всё логинится, но на бэке в реквесте висят данные о старом пользователе. UPD: порешал через axios interceptors.

[@Virisound]

Я думал бэкенд тяжелый, а тут авторизация во фронтенде - запутаешься. И этот диспатч уже везде мерещится). P.S. Нужно отдохнуть) спс

[@lets_try_js]

ахаахахх))

[@Virisound]

@@lets_try_js ))))

[@user-iy8eh2sb5r]

В мене питання наскільки безпечно світити пароль в пейлоад в консолі в нетворк?

[@user-ju4be3qp3o]

Спасибо большое! Но очень запутанно объясняете для начинающих. Буду пересматривать, чтобы все понять про аутентификацию.

[@user-ju4be3qp3o]

Со второго раза разобрался. Но, как я понимаю, токены в основном идут по 2: аксэсс и рифрэф. И нам надо добавлять логику отправки рифреша, если сервак нам пришлет код 4ХХ(вроде, 402).что мы не авторизованы

[@svloex]

1:13:00 в dispatch(login(data)) почему в login параметром data идёт если datat это IUser а IUser это id, token, email, а в login мы ожидаем пароль и логин ?

[@svloex]

А этот login не из services а из slice

[@SergioDev001]

Что за расширение в VSC, которое подсказывает стили при их вводе?

[@lets_try_js]

tailwind что-то там

[@SergioDev001]

@@lets_try_js спасибо

[@aizim8503]

если мы используем store, так зачем токен хранить в LocalStorage? не безопасней ли token хранить в store?

[@lets_try_js]

А зачем его скрывать? И что тогда делать после перезагрузки страницы ?)

[@aizim8503]

@@lets_try_js согласен, посмотрел одну работу. там я тоже записывал токен в ЛС только посредством персист

[@yevhenfodorov121]

когда логинюсь, выскакивает предупреждение : Смените пароль. Пароль, который вы только что использовали, был раскрыт в результате утечки данных. Измените его прямо сейчас в Google Менеджере паролей почему так происходит? и как с этим бороться?

[@lets_try_js]

это к этому курсу никакого отношения не имеет, это от браузера

[@romanmed9035]

можно ли сделать предварительную загрузку содержимого стора перед его созданием?

[@lets_try_js]

не совсем понял) стор - это хранилище, и что бы там что-то было, сперва туда нужно что-то поместить)какие данные вы хотите подгружать ?)

[@romanmed9035]

@@lets_try_jsобычно хранилище сначала создается а потом уже акшенами загружаются данные. но какие-то простейшие задаются заранее при создании. но хочется заранее поместить туда список который загружается из апи.

[@EugeneKh.]

Исходя из Вашего комментария, положить в стор, которого нет, какие-либо данные, невозможно. Для этого существует т.н. начальное состояние - initial state - которым вы определяете начальное содержимое. И да, редьюсер - это чистая функция, и что-либо подгружать нужно через асинхронную санку или использовать ртк квери. Обычно, чтобы наполнить стор сущностями при загрузке приложения, в корневом App компоненте и дергается эта санка для загрузки данных с апи.

[@romanmed9035]

@@EugeneKh. именно initial state и заполнить прежде чем создавать стор. и тогда он создастся уже с данными которые в initial state были загружены. дергать в апп или еще где-то совсем другая история.

[@galaxyalfa2197]

Почему-то мой редактор ругается на тип any

[@lets_try_js]

Правильно делает. Использовать тип any плохая практика. Но есть такие моменты, когда этого не избежать. Простой пример : вы используете какой нибудь пакет/зависимость который попросту еще не перешел на typescript, и в таком случае вероятно придется в каких то моментах использовать тип any. Но если вы пишите просто код, без всяких зависимостей из вне то any нужно избегать

[@Virisound]

34:28 - Видео про "FormEvent": kzbin.info/www/bejne/eIrWgnhpg81sf6c

[@lets_try_js]

Спасибо за поддержку комментами )

[@Virisound]

@@lets_try_js =)

[@Bugagych]

Я исключил password таким образом. Есть ли более элегантный вариант? @Controller('user') export class UserController { constructor(private readonly userService: UserService) {} @Post() @UsePipes(new ValidationPipe()) async create(@Body() createUserDto: CreateUserDto) { const { user, token } = await this.userService.create(createUserDto); const userResponse = plainToClass(UserResponseDto, user, { excludeExtraneousValues: true, }); return { user: userResponse, token }; } }