Авторизация в React-приложении с Firebase и Redux-Toolkit

Регистрация и авторизация через Google Firebase в React-приложении с использованием Redux-Toolkit. В версиях JavaScript и TypeScript.

00:00 Постановка задачи
01:29 Зависимости проекта
02:32 Настройка роутинга
07:04 Redux стор и слайс
11:26 Кастомный хук useAuth
12:53 Подключение Firebase
17:47 Компоненты с формами
20:45 Логика авторизации и регистрации
35:49 Рефакторинг для TypeScript

Мои курсы по вебу с купонами:

📢 Поддержка канала:

[TheS]

Была бы номинация для лучшего русскоязычного блогера. Я бы точно голосовал за Михаила Непомнящего. То что вы делаете, это бесценная информация!

[lejyown]

Спасибо что дал общее понимание как работает цепочка firebase - redux - react :)
Развиваемся! 👍🏻💪🏼🎉

[Sylar]

Смотрю Ваш контент и поражаюсь как круто Вы учите. Огромное спасибо

[idpliev]

Суперприятно слушать, отличная подача, манера, затягивает невероятно, спасибо!

[konglomora]

Прям то что мне сейчас нужно, спасибо!!!

[mikhailrypta]

Спасибо за столь полезные видосы по Реакту :)

[dhlxltp]

Долго искал подходящий вариант регистрации, наконец-то нашел! Спасибо большое за видео)

[ddzsnjn]

Огромное спасибо благодаря вашим роликам можно узнать очень много полезного )

[rpoykfd]

Михаил спасибо. Многому научился благодаря твоим видосам

[xdayx]

Пушка, Михаил, просто пушка. Вы мне этот react, redux тупо вдолбили, спасибо)

[powersx]

4:05
на 2023 год код должен выглядеть так
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/login" element={<LoginPage />} />
<Route path="/register" element={<RegisterPage />} />
</Routes>

5:12 код должен выглядеть так
const HomePage = () => {
return (
<div>
<h2>HomePage</h2>
<Navigate to="/login" />
</div>
);
};

[denissavast]

Благодарю за отличнейшую работу и подачу материала!

[ubohigw]

Спасибо за ваш труд, очень интересно, пробую повторить :)

[vmdbcqg]

Очень крутой канал! весь контент на высоте! Спасибо Михаил, продолжайте в том же духе))

[andteslenko]

Спасибо большое. с удовольствием смотрю твои видео, все просто и понятно)

[xqqkssi]

Пара ложек дёгтя к ролику. Если где я ошибся - пожалуйста прокомментируйте.
1) Сама идея определять залогинен ли пользователь чисто по данным из store ошибочна. Данные в store не могут в текущем виде являться этому подтверждением. Актуальность этих данных необходимо контролировать. Для этого можно использовать хук onAuthStateChanged из библиотеки firebase/auth.
2) Так же удаление данных о пользователе из store не является фактом того, что сессия авторизации закрыта в том числе и на сервере базы данных. Логаут на сервере можно выполнять с помощью метода signOut из библиотеки firebase/auth.
Пожелание. Есть специализированная библиотека react-redux-firebase. Было бы здорово, если бы в теме про react и firebase рассказали стоит ли её использовать в сравнении с официальным SDK firebase.
Вместе с тем хочу отметить, что ваши ролики о redux-toolkit - это лучшее, что мне удалось найти на русском языке. Поэтому буду благодарен, если в своих роликах, где используется redux-toolkit, также будете использовать библиотеку redux-persist или её специализированный форк reduxjs-toolkit-persist, или другой способ кеширования. А то уж слишком часто приходится бороться с ошибками из-за redux-persist.

[eg]

Спасибо большое за видео. Очень полезно и подробно. А будет видео, где можно получать данные получать данные, которые пользователь добавил в бд(к примеру у каждого пользователя возможность на сайте добавить закладки, они хранятся в firebase и при авторизации, каждый пользователь будет получать свои закладки)

[MrMomomoy]

Михаил, спасибо за видео. Может снимете еще видео про авторизацию с помощью гугл аккаунта или соцсетей? думаю, многим такое будет интересно.

[edgeofeternity]

FirebaseError: Firebase: Error VPN не помогает, все равно ошибка остается, все проверил, никак не исправлется(

[matveyd]

В 6 версии react-router-dom хук useHistory не доступен.

Вместо import { useHistory } from 'react-router-dom'
Сделайте import { useNavigate } from 'react-router-dom';

В компоненте:
const navigate = useNavigate();
И в функции:
navigate('/')