С момента записи видео успел обновиться react-router-dom. Поэтому дабы повторение кода по видео работало, надо установить пятую версию данной библиотеки. Для шестой версии роутинга решил записать отдельный цикл видео, первое из цикла ruclips.net/video/0auS9DNTmzE/видео.html
Пара ложек дёгтя к ролику. Если где я ошибся - пожалуйста прокомментируйте. 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.
@@zipri9576 по идее состояние "залогиненности" должно где-то сохраняться, вместо того, чтобы при каждом роуте дергать firebase. Как вариант можно использовать context, вместо редакса.
"onAuthStateChanged". Это, конечно, круто, но в большинстве случаев имеешь дело с самопальным бекендом, у которого ничего такого нет в принципе. А от идей типа "в любой непонятной ситуации отправляй запрос на бекенд" нужно жестко отучать. У JWT токенов есть exp date. Вот её и нужно проверять, а если протух - удалять из стора и local storage. Для роутинга этого достаточно. Дальше - по обстановке, в зависимости от того, применяется ли refresh token, например. Базовый вариант (без refresh token) - редирект на страницу логина. Но дергать бекенд при каждом переходе по роуту - это дичь.
Михаил, спасибо большое за время и труд! Мне кажется подход раскрыт не до конца. Есть минус вашего подхода, который не сразу понятен. Сам минус: Что будет если авторизованный юзер откроет ещё вкладку? Будет то, что стейт в редаксе пуст, нужно логиниться заново. Вопрос: Как измениться подход авторизации при множественном выборе вкладок в сравнении с данным проектом? Хранить ли информацию о юзере и токенах в редаксе или же использовать localStorage? Буду признателен за ответ. PS. Ролик сделан на высшем уровне
В 6 версии react-router-dom хук useHistory не доступен. Вместо import { useHistory } from 'react-router-dom' Сделайте import { useNavigate } from 'react-router-dom'; В компоненте: const navigate = useNavigate(); И в функции: navigate('/')
const user = await signInWithEmailAndPassword(auth, email, password); const newUser = user as unknown as OAuthCredential; в newUser уже будет доступен accessToken
Спасибо большое за видео. Очень полезно и подробно. А будет видео, где можно получать данные получать данные,которые пользователь добавил в бд(к примеру у каждого пользователя возможность на сайте добавить закладки, они хранятся в firebase и при авторизации, каждый пользователь будет получать свои закладки)
Окей, а как работает то, чтобы например юзер регается - входит и у него своя личная инфа на сайте? Допустим, личный список задач, а у другого юзера другой - свой список задач уже, это автоматом определяется уже на firebase или ручками как-то?:)
Кто нибудь сталкивался с ошибкой на 27:00 "reducer" is a required argument, and must be a function or an object of functions that can be passed to combineReducers
у тебя есть классный туториал по реакт роутингу, и оттуда ссылка на этот урок, когда ты делаешь авторизацию. Было бы здорово, если бы ты сделал новый урок, который бы расширил тот (с реакт роутингом), так как в этом используется синтаксис старого роутера.
Ребята,я даю совет, который мне дали месяца два назад. Может вы не просили, но мне помог, авось вам тоже. Учитесь использовать новый синтаксис сами. Иначе вы будете выпадать постоянно на роботе, искать видосы по использованию нового синтаксиса- это куча времени, которое должно идти на совсем другого рода роботу. П.С. Читайте документацию, то очень много и подробно описано, по роутингу там буквально свитч изменился и exact кажется. Все остальное Вам пока не понадобиться. П.С.С. Я тоже так же искал, а потом прозрел, используя документацию, вы учитесь быстрее, нежели на ютуб видосах.
незачем городить такую конструкцию - вот что на эту тему мне написал YouChat: "В Firebase Authentication в версии SDK 9.0.0 была внесена некоторая путаница в терминах и методиках получения Access Token. До этого пользовательский доступный токен (Access Token) можно было получить через свойство accessToken объекта User." А также дополнил: "Однако в версии SDK 9.0.0 свойство accessToken было заменено на метод getIdToken(), который возвращает Promise с идентификатором токена доступа (Access Token ID). Новый метод getIdToken() позволяет получить актуальный токен доступа для конкретного пользователя, который может использоваться для доступа к другим сервисам Firebase API, а также имеет большую гибкость в отношении управления жизненным циклом токена доступа."
После деплоя на vercel консоль выдает ошибку firebaseerror: firebase: error (auth/invalid-api-key) Upd: надо было на vercel переменные апишки отдельно импортировать.
Привет! А как сделать кастомные страницы подтверждения почты и сброса пароля? В шаблонах firebase есть возможность указать свою action URL для письма, но ссылка становится общей для всех действий, различия лишь в mode=... который идет в query параметрах. Просто страницы с формами то разные для различных действий, а ссылка одна.
Здравствуйте Михаил. Вопрос: куда можно вынести эти действия которые мы делаем в handler'e нажатия на кнопку? Чтобы не нагромаждать сильно код в компоненте. (я про саму логику авторизации. когда мы в функции обработчике вызываем все эти методы авторизации)
Я деталей из видео уже не помню, но когда мы говорим про реакт компоненты и вынос логики, то лучшее решение - кастомный хук. Он может, например, возвращать только хэндлер.
вот-вот, сам долго с этим возился - заменил все process.env на import.meta.env, а также в самом файле .env.local прописал все ключи через VITE_. Ужасно, потратил на это целый час
@@Nafumoto 1. Внутри .env файла нужно написать переменную, которая будет начинаться с "VITE", например, VITE_BASE_URL=localhost:5173 2. В любом другом файле для использования переменной используешь import.meta.env.VITE_BASE_URL
Здравствуйте, спасибо большое, использовал ваше видео для реализации пет проекта. Всё предельно ясно, объясняете как бог ) один вопрос, у меня при вводе, пароль видимый, как это исправить?
Михаил, здравствуйте! Простите за небольшой оффтоп, очень интересно узнать название пака иконок, которую Вы используете в vscode, подскажите пожалуйста ?
Люди, кто знает как решить эту ошибку? export 'userReducer' (imported as 'userReducer') was not found in './slices/userSlice' (possible exports: default, removeUser, setUser)
При регистрации ошибка FirebaseError: Firebase: Need to provide options, when not being deployed to hosting via source. (app/no-options). Подскажите как исправить пожалуйста
Скорее всего у вас форма просто отправляется штатным образом, т.е. с перезагрузкой страницы. Если отменить это поведение, то должно вести себя также как div. Собственно, div использован для упрощения.
Михаил добрый день)Скажите пожалуйста у меня немного не по теме и достаточно спецефический вопрос)Возможно ли стать React Native разработчиком, понимая неплохо реакт но не имея коммерческого опыта по реакту!?...
Добрый день, Михаил! Спасибо за урок! Подскажите пожалуйста, у меня перекидывает на страницу с "Welcome", только после второго входа. Первый вход записались данные в state, и только со второго он их читает и понимает, что у нас есть пользователь и условие в HomePage срабатывает. В чем может быть проблема?
Есть разные подходы к этому вопросу. В любом случае решение будет идти в связке с бэкендом. Есть варианты хранить сессию в куках, она автоматом будет уходить на сервер при каждом запросе. Есть вариант хранения токена в localStorage и отправка этого токена в запросах за конкретными ресурсами.
привет. Сохраняй все в локал сторедж и когда страница будет релоудиться, то пушь данные с локал стораге в редакс. Можешь попробовать библиотеку react persist, которая сама сохраняет стор редакса в локал стораге
Добрый день! Скачал исходник, далее все настроил под себя, запустил проект, заполнил поле email и password нажимаю на кнопку register, после чего сайт тупо зависает не знаете в чем проблема?
Hello Sir, thank you for this tutorial. I am trying to implement writing an AsyncThunk middleware which works with all the methods that you have used - 'signInWithEmailAndPassword' for login for example. I noticed that you prefer to await the results and synchronously then dispatch your reducers. Do you have experience with doing the same but asynchronously with the async thunks? Thank you in advance!
У меня приложение просто превращается в белый экран, если в main.ts импортирую './firebase.ts'. С чем это связано? (на данный момент саму логику авторизации и регистрации, начиная с 20:46 как на видео, не делал, вдруг это влияет)
Слышал много про замену небольшого бека для фронтенда с помощью firebase'a. Сильно ли он ограничен по функционалу если сравнивать с бэком для среднего по объему интернет-магазина? Хочу попробовать сделать проект для себя, а в бэке я дуб дубом
Там есть несколько вариантов работы с базой данных со своими API. Можно как раз сочетать с авторизацией. Но я глубоко с firebase не работал, у меня есть определенные вопросы к нему. В ютубе есть примеры проектов интернет-магазинов на firebase, так что, вероятно, мои вопросы решаемы - вопрос времени и тщательного изучения документации.
Помогите пожалуйста, только что делал приложение по примеру, во-первых немного обновился роутер дом(6 версия), поэтому на главной странице redirect пришлось изменить на useNavigate, но теперь когда я авторизовываюсь, открывается главная страница, но при её обновлении пользователь как бы "стирается"(не авторизован) и вместо редиректа на страницу логина отображается пустая страница, т.е при обновлении страницы данные которые берутся из хука useAuth обнуляются и страница не рендерится. В консоли пишет что я должен использовать navigate в useEffect. Подскажите как исправить это
Attempted import error: 'Switch' is not exported from 'react-router-dom'. Это из-за того, что у меня 6-ая версия react-router-dom, а в видео используется 5-ая? Подскажите, как решить данную проблему?
@@mishanep Да, установлены, однако при их установке в консоли выдаёт много ошибок в которых даже 2 критических присутствуют.. npm audit fix не решает проблему
Я бы начал поиски отсюда reactrouter.com/docs/en/v6/upgrading/v5 Первое, что бросается в глаза, компонент Redirect больше нельзя использовать внутри Switch. Можно заменить редирект методом replace из хука useHistory.
@@mishanep Я включил vpn и теперь я получаю эту ошибку: Firebase: Error (auth/admin-restricted-operation). Я искал в Интернете, но я не мог найти ответ. Вы знаете решение?
@@ayaznamazov8328 Привет. Решил этот вопрос? Потому что мне не помог файл env.local, и все ключи с firebase пришлось хранить в открытом доступе, что не очень.
Здраствуйте Михаил, я полностью переписала ваш код, на экран ничего не выходит, просто белый экран. Мне кажется он не может читать: const app = initializeApp(firebaseConfig); из firebase.js. что делать в таком случае? очень надеюсь на обратную связь))
В данном случае разлогиниться да. Как правило, то что мы храним в стейте, дополнительно кладётся в localStorage или sessionStorage. И оттуда initialState берётся, если там что-то есть. Соответственно при разлогинивании, сторедж вычищается.
Очень может быть, но не попадалась. Мне кажется здесь вопрос политики безопасности. В простейшем варианте кажется, что должно храниться в сторедже, чтобы не делать дополнительный запрос к серверу.
@@nazario9537 нужно хранить состояние авторизации в localStorage и при инициализации js-приложения брать данные оттуда. Для redux здесь есть вариант автоматизации с библиотекой redux-persist. У меня есть соответствующий ролик про нее.
It's just a simple question of storing a user session to localStorage. I assumed that devs, who would watch this, are already familiar with persistence in a browser
Честно, мало понимаю логику автора: писать асинхронные функции в компоненте а потом их диспатчить? Смысл тогда асинхронной логики Redux? Поверхностно показали примерчики из документации двух библиотек по отдельности, а связать их нормально так и не смогли. Я имею ввиду, что должны быть отдельные асинхронные actions, которые все бы делали не внутри React компонентов, а внутри redux логики. А это что? Мухи с котлетами кушать. А в документации firebase до onAuthStateChanged, похоже, автор даже не дочитал. Подгорело у меня знатно, видя, что человек учит так связывать redux и firebase. Лучше бы уже показал react-firebase-hooks.
Redux не обязует нас использовать всю логику приложения через себя. В данном случае вполне имеет место быть предложенное решение. Потом это бегиннерс гайд и уверен, многие получили пользу от его просмотра. Разумеется, от базового примера можно расширяться по самым разным нюансам, добавляя дополнительную логику, в том числе и через дополнительные инструменты. Но мешать всё в кучу смысла не вижу. Честно, мало понимаю логику хейтить бесплатный контент.
@@mishanep хейта нету, я просто говорю что вижу. А вижу я, что связка redux-firebase работает, но все лежит в куче, а так никто не делает и такому учить не должен. Не зря же создали thunk, не зря же его требуют в объявлениях на работу, не зря же все пишут асинхронку в redux-thunk. Хотите может поспорить, что я не прав?
@@СергейВер-и9ю нет конечно, спорить смысла не вижу. Я вообще против споров в сети, так как они редко бывают направлены на поиск истины. У redux-thunk полно альтернатив, включая встроенные в сам redux-toolkit. Но опять же, это не исключает точечного использования хэндлеров без привязки к редаксу. Возможно в Реакте у нас слишком много свободы в плане выбора того, что и как делать, но спорить какой из подходов единственно верный было бы глупо. Мне видится куда полезнее собрать свой пример и выложить его в комментариях, нежели убеждать автора отказаться от своей манеры подачи.
@@mishanep извините конечно, если вам показалось это грубо, но говорю, как вижу. Да, видос хороший, но только как отдельный поверхностный разбор Redux-toolkit и firebase-auth ПО ОТДЕЛЬНОСТИ. Но как вы их "связали", это глупо. Да, оно работает, но это неправильно по той простой причине, что вы засрали компоненту, которая не должна вообще видеть что-то из асинхронной логики. А представьте, если запрос в одном компоненте не один, а например 3. У большинства программистов просто кровь из глаз пойдёт от большого количества асинхронной логики в компанеете. Именно поэтому, так делать можно, но это плохо, очень плохо.
C токенами все же неясно, какой использовать в дальнейшем для работы с юзером. accessToken и refreshToken отличаются. Рефреш есть в типизации ответа, а вот accessToken приходится с тс брать через странную констуркцию const response: any = res.user.toJSON(), token: response.stsTokenManager.accessToken
![ARGENTINA vs. PERÚ [1-0] | RESUMEN | ELIMINATORIAS SUDAMERICANAS | FECHA 12](http://i.ytimg.com/vi/xtI25ENDDSY/mqdefault.jpg)
Была бы номинация для лучшего русскоязычного блогера. Я бы точно голосовал за Михаила Непомнящего. То что вы делаете, это бесценная информация!
Спасибо что дал общее понимание как работает цепочка firebase - redux - react :)
Развиваемся! 👍🏻💪🏼🎉
С момента записи видео успел обновиться react-router-dom. Поэтому дабы повторение кода по видео работало, надо установить пятую версию данной библиотеки. Для шестой версии роутинга решил записать отдельный цикл видео, первое из цикла ruclips.net/video/0auS9DNTmzE/видео.html
Спасибо за видео,очень все подробно.....подскажите пожалуйста, какое видео по редакс посмотреть.
@@shoxerpetrosyan8678 ruclips.net/video/C0fBnil_Im4/видео.html вот это =)
@@mishanep Спасибо за обратную связь
@@shoxerpetrosyan8678 Barev Dzez, im mot chi asxhatum, grum a invalid API key, inchich klini?
А как сейчас используется Redirect ?
Суперприятно слушать, отличная подача, манера, затягивает невероятно, спасибо!
Пушка, Михаил, просто пушка. Вы мне этот react, redux тупо вдолбили, спасибо)
Смотрю Ваш контент и поражаюсь как круто Вы учите. Огромное спасибо
Михаил спасибо. Многому научился благодаря твоим видосам
Прям то что мне сейчас нужно, спасибо!!!
Лайк и смотрим
Долго искал подходящий вариант регистрации, наконец-то нашел! Спасибо большое за видео)
Спасибо за столь полезные видосы по Реакту :)
Благодарю за отличнейшую работу и подачу материала!
Огромное спасибо благодаря вашим роликам можно узнать очень много полезного )
Благо дарим, Михаил!!! Удачи Вам!
Пара ложек дёгтя к ролику. Если где я ошибся - пожалуйста прокомментируйте.
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.
то есть при создании auth в приложении не обязательно создавать для этого редьюсер - можно обойтись чисто функциями firebase?
@@zipri9576 по идее состояние "залогиненности" должно где-то сохраняться, вместо того, чтобы при каждом роуте дергать firebase. Как вариант можно использовать context, вместо редакса.
"onAuthStateChanged". Это, конечно, круто, но в большинстве случаев имеешь дело с самопальным бекендом, у которого ничего такого нет в принципе. А от идей типа "в любой непонятной ситуации отправляй запрос на бекенд" нужно жестко отучать. У JWT токенов есть exp date. Вот её и нужно проверять, а если протух - удалять из стора и local storage. Для роутинга этого достаточно. Дальше - по обстановке, в зависимости от того, применяется ли refresh token, например. Базовый вариант (без refresh token) - редирект на страницу логина.
Но дергать бекенд при каждом переходе по роуту - это дичь.
Спасибо, очень интересно и доступно.
Спасибо за ваш труд, очень интересно, пробую повторить :)
Круто! Спасибо за урок!
Спасибо большое. с удовольствием смотрю твои видео, все просто и понятно)
Очень крутой канал! весь контент на высоте! Спасибо Михаил, продолжайте в том же духе))
Очень крутой канал!
Спасибо большое!
4:05
на 2023 год код должен выглядеть так
5:12 код должен выглядеть так
const HomePage = () => {
return (
HomePage
);
};
Супер. Спустя два года код не изменился)
Молодец
Спасибо!!!
Михаил, спасибо большое за время и труд! Мне кажется подход раскрыт не до конца. Есть минус вашего подхода, который не сразу понятен.
Сам минус: Что будет если авторизованный юзер откроет ещё вкладку? Будет то, что стейт в редаксе пуст, нужно логиниться заново.
Вопрос: Как измениться подход авторизации при множественном выборе вкладок в сравнении с данным проектом? Хранить ли информацию о юзере и токенах в редаксе или же использовать localStorage?
Буду признателен за ответ.
PS. Ролик сделан на высшем уровне
FirebaseError: Firebase: Error (auth/network-request-failed). VPN не помогает, все равно ошибка остается, все проверил, никак не исправлется(
Супер, саул
В 6 версии react-router-dom хук useHistory не доступен.
Вместо import { useHistory } from 'react-router-dom'
Сделайте import { useNavigate } from 'react-router-dom';
В компоненте:
const navigate = useNavigate();
И в функции:
navigate('/')
с этими вправками тоже не работает(
const user = await signInWithEmailAndPassword(auth, email, password);
const newUser = user as unknown as OAuthCredential;
в newUser уже будет доступен accessToken
Спасибо большое за видео. Очень полезно и подробно. А будет видео, где можно получать данные получать данные,которые пользователь добавил в бд(к примеру у каждого пользователя возможность на сайте добавить закладки, они хранятся в firebase и при авторизации, каждый пользователь будет получать свои закладки)
О, вовремя , щас глянемс
oчень крутое видео
Михаил, спасибо за видео. Может снимете еще видео про авторизацию с помощью гугл аккаунта или соцсетей? думаю, многим такое будет интересно.
Можно сделать видео по добавлению cookie на данную регистрацию/авторизацию?
Спасибо за видео, а есть такая возможность, чтобы добавить какие-то параметры у пользователя, допустим: аватарку и описания профиля, как это сделать ?
Классное видео. А есть гайд где объясняется как создать базу данных привязанную к конкретному пользователю в firebase?
Окей, а как работает то, чтобы например юзер регается - входит и у него своя личная инфа на сайте? Допустим, личный список задач, а у другого юзера другой - свой список задач уже, это автоматом определяется уже на firebase или ручками как-то?:)
Как называется расширение для снипитов React?
Кто нибудь сталкивался с ошибкой на 27:00 "reducer" is a required argument, and must be a function or an object of functions that can be passed to combineReducers
у тебя есть классный туториал по реакт роутингу, и оттуда ссылка на этот урок, когда ты делаешь авторизацию. Было бы здорово, если бы ты сделал новый урок, который бы расширил тот (с реакт роутингом), так как в этом используется синтаксис старого роутера.
Поддерживаю, вот именно сейчас настраиваю роутинг к авторизации, правда вместо redux использую mst
Ребята,я даю совет, который мне дали месяца два назад. Может вы не просили, но мне помог, авось вам тоже. Учитесь использовать новый синтаксис сами. Иначе вы будете выпадать постоянно на роботе, искать видосы по использованию нового синтаксиса- это куча времени, которое должно идти на совсем другого рода роботу. П.С. Читайте документацию, то очень много и подробно описано, по роутингу там буквально свитч изменился и exact кажется. Все остальное Вам пока не понадобиться. П.С.С. Я тоже так же искал, а потом прозрел, используя документацию, вы учитесь быстрее, нежели на ютуб видосах.
У кого проблемы с accessToken создайте новый интерфейс и используйте его:
export interface IUser extends User {
accessToken: string;
}
незачем городить такую конструкцию - вот что на эту тему мне написал YouChat:
"В Firebase Authentication в версии SDK 9.0.0 была внесена некоторая путаница в терминах и методиках получения Access Token. До этого пользовательский доступный токен (Access Token) можно было получить через свойство accessToken объекта User."
А также дополнил:
"Однако в версии SDK 9.0.0 свойство accessToken было заменено на метод getIdToken(), который возвращает Promise с идентификатором токена доступа (Access Token ID). Новый метод getIdToken() позволяет получить актуальный токен доступа для конкретного пользователя, который может использоваться для доступа к другим сервисам Firebase API, а также имеет большую гибкость в отношении управления жизненным циклом токена доступа."
Михаил, будет ли обновленная авторизация на Route 6?
Огромное спасибо! А планируется что-нибудь по SSR?
Со временем запишу. Видел на соседнем канале цикл по NextJS идёт, поэтому пока повторяться не хочется.
@@mishanep не подскажешь название соседа?)
Да, запросто ruclips.net/video/M1Y7JmaslkU/видео.html&ab_channel=webDev
Нужно ли делать запросы в бд фаирбейза в санках? или в самих компонентах это норм подход?
найс
А как правильно хранить авторизацию при перезагрузке, если localStorage и cookie - это небезопасно ?
объясни пожалуйста в чем разница делать авторизацию твоим способом либо же через java spring. Пишу диплом и вот стоит выбор
Было бы круто если бы вы сняли видео для обновленной версии react-router-dom
У меня есть отдельный плейлист с подробным разбором шестой версии react-router-dom.
16:43
про env
После деплоя на vercel консоль выдает ошибку firebaseerror: firebase: error (auth/invalid-api-key)
Upd: надо было на vercel переменные апишки отдельно импортировать.
Привет! А как сделать кастомные страницы подтверждения почты и сброса пароля? В шаблонах firebase есть возможность указать свою action URL для письма, но ссылка становится общей для всех действий, различия лишь в mode=... который идет в query параметрах. Просто страницы с формами то разные для различных действий, а ссылка одна.
Здравствуйте Михаил. Вопрос: куда можно вынести эти действия которые мы делаем в handler'e нажатия на кнопку? Чтобы не нагромаждать сильно код в компоненте.
(я про саму логику авторизации. когда мы в функции обработчике вызываем все эти методы авторизации)
Я деталей из видео уже не помню, но когда мы говорим про реакт компоненты и вынос логики, то лучшее решение - кастомный хук. Он может, например, возвращать только хэндлер.
Если у кого на Vite ругается на api key, то нужно данные забивать в таком формате: VITE_apiKey = и т. д.
А вместо process.env используете import.meta.env? Я вроде бы так сделал и VITE_...... указал, но ничего не поменялось((
вот-вот, сам долго с этим возился - заменил все process.env на import.meta.env, а также в самом файле .env.local прописал все ключи через VITE_. Ужасно, потратил на это целый час
тоже самое, но я вот думаю, а зачем собственно так делать, данные-то не секретные
@@mashush9197 здравствуйте, есть ли возможность написать одну строку кода для примера как писать в env и firebase, благодарю вас
@@Nafumoto
1. Внутри .env файла нужно написать переменную, которая будет начинаться с "VITE", например, VITE_BASE_URL=localhost:5173
2. В любом другом файле для использования переменной используешь import.meta.env.VITE_BASE_URL
А что будет, если превысить лимиты бесплатные в firebase? Он перестанет запросы принимать?
a jwt токен есть возможность использовать в firebase? с куки я так понял он не работает?
работает
Здравствуйте, спасибо большое, использовал ваше видео для реализации пет проекта. Всё предельно ясно, объясняете как бог ) один вопрос, у меня при вводе, пароль видимый, как это исправить?
Для инпута атрибут type должен равняться password
Некоторые компоненты в библиотеках были изменены с загрузки данного видео (ОБРАЩАЙТЕ НА ЭТО ВНИМАНИЕ)
Михаил, здравствуйте! Простите за небольшой оффтоп, очень интересно узнать название пака иконок, которую Вы используете в vscode, подскажите пожалуйста ?
Material icons
здравствуйте, можете снимать видео о react crud и авторизация вместе ???
спасибо
Люди, кто знает как решить эту ошибку? export 'userReducer' (imported as 'userReducer') was not found in './slices/userSlice' (possible exports: default, removeUser, setUser)
почему у вас внукция handleClick была не написана но у вас все еще работает?
Не понимаю о чем вы. Код сниппет набросайте, о котором идет речь.
а эти данные о пользователях можно скачать?
Не знаете почему на этапе первого запуска(27:58) вот такая ошибка:
FirebaseError: Firebase: Error (auth/user-not-found).?
проверь свою страницу регистрации, возможно ты используешь не тот хук от файрбэйса типо signIN... либо createUser...
Зашел в комментарии поискать информацию об интерцепторах токена, на функциях, но так и не нашел информации😢
Подскажите пожалуйста, для чего нужен AppDispatch? что будет если использовать базовый useDispatch?
AppDispatch это типизированная версия хука. Можно не использовать. Но если typescript, то каждому хуку придётся тип указывать.
@@mishanep пытаюсь понять почему у нас нету проблем с использование базового dispatch:)
@@fishko5346 так это ж типизация, а не функционал. Автодополнение просто где-то не работает скорее всего))
При регистрации ошибка FirebaseError: Firebase: Need to provide options, when not being deployed to hosting via source. (app/no-options). Подскажите как исправить пожалуйста
Михаил, почему ты используешь формат файлов jsx, вместо js?
Потому что файлы содержат jsx разметку. И потому что такое расширение также даёт редактору знать, что сниппеты для разметки здесь тоже актуальны.
@@mishanep Спасибо!
Пожалуйста сними RTK Query + Firebase =)
Может подскажете, почему компонент Form это div. Там 2 инпута и кнопка. И если заменить на div на form то авторизация перестает работать
Скорее всего у вас форма просто отправляется штатным образом, т.е. с перезагрузкой страницы. Если отменить это поведение, то должно вести себя также как div. Собственно, div использован для упрощения.
Всем привет! можете кто нибудь сказать для чего нужен access token в firebase?
Михаил добрый день)Скажите пожалуйста у меня немного не по теме и достаточно спецефический вопрос)Возможно ли стать React Native разработчиком, понимая неплохо реакт но не имея коммерческого опыта по реакту!?...
Здравствуйте. Не работал с React Native, поэтому не могу ответить.
ребят, если в тайпскрипт проект засунуть jsx, будет ли он работать?
Расширения файлов тогда должны быть .tsx
Как сделать чтобы авторизация сохранялась после обновления страницы?
Хранить сессию в localstorage или sessionstorage
@@mishanep понятно, но тут же используется firebase, зачем LS?
Добрый день, Михаил! Спасибо за урок! Подскажите пожалуйста, у меня перекидывает на страницу с "Welcome", только после второго входа. Первый вход записались данные в state, и только со второго он их читает и понимает, что у нас есть пользователь и условие в HomePage срабатывает. В чем может быть проблема?
как сделать чтобы при обновлении страницы не приходилось заново логиниться? если localStorage, то где и что нужно сохранить в него?
Есть разные подходы к этому вопросу. В любом случае решение будет идти в связке с бэкендом. Есть варианты хранить сессию в куках, она автоматом будет уходить на сервер при каждом запросе. Есть вариант хранения токена в localStorage и отправка этого токена в запросах за конкретными ресурсами.
Привет смог допилить этот не достаток? Если да то как?)
нашел ответ?
@@insafsuz8864
прив. спасибо за видос. все круто.
а как сделать так, чтобы при релоад страницы не нужно было опять вводить емейл и пароль?
привет. Сохраняй все в локал сторедж и когда страница будет релоудиться, то пушь данные с локал стораге в редакс. Можешь попробовать библиотеку react persist, которая сама сохраняет стор редакса в локал стораге
@@frolovv3 спасибо. Попробую, отпишусь
Добрый день! Скачал исходник, далее все настроил под себя, запустил проект, заполнил поле email и password нажимаю на кнопку register, после чего сайт тупо зависает не знаете в чем проблема?
Добрый день.
Нет, не знаю. Надо смотреть консоль.
Hello Sir, thank you for this tutorial. I am trying to implement writing an AsyncThunk middleware which works with all the methods that you have used - 'signInWithEmailAndPassword' for login for example. I noticed that you prefer to await the results and synchronously then dispatch your reducers. Do you have experience with doing the same but asynchronously with the async thunks? Thank you in advance!
У меня приложение просто превращается в белый экран, если в main.ts импортирую './firebase.ts'. С чем это связано? (на данный момент саму логику авторизации и регистрации, начиная с 20:46 как на видео, не делал, вдруг это влияет)
Слышал много про замену небольшого бека для фронтенда с помощью firebase'a. Сильно ли он ограничен по функционалу если сравнивать с бэком для среднего по объему интернет-магазина? Хочу попробовать сделать проект для себя, а в бэке я дуб дубом
Там есть несколько вариантов работы с базой данных со своими API. Можно как раз сочетать с авторизацией. Но я глубоко с firebase не работал, у меня есть определенные вопросы к нему. В ютубе есть примеры проектов интернет-магазинов на firebase, так что, вероятно, мои вопросы решаемы - вопрос времени и тщательного изучения документации.
А как сбросить пароль, кто может подсказать?
Uncaught TypeError: Cannot destructure property 'email' of '(0 , react_redux__WEBPACK_IMPORTED_MODULE_0__.useSelector)(...)' as it is undefined.
Выглядит так будто не создан редакс стор.
@@mishanep спасибо большое , все исправил
Помогите пожалуйста, только что делал приложение по примеру, во-первых немного обновился роутер дом(6 версия), поэтому на главной странице redirect пришлось изменить на useNavigate, но теперь когда я авторизовываюсь, открывается главная страница, но при её обновлении пользователь как бы "стирается"(не авторизован) и вместо редиректа на страницу логина отображается пустая страница, т.е при обновлении страницы данные которые берутся из хука useAuth обнуляются и страница не рендерится. В консоли пишет что я должен использовать navigate в useEffect. Подскажите как исправить это
в чем может быть причина, что не могу залогиниться?
Можно залогинить ошибку и почитать её сообщение. Скорее всего пароль неверный. Либо firebase настроен некорректно.
Attempted import error: 'Switch' is not exported from 'react-router-dom'.
Это из-за того, что у меня 6-ая версия react-router-dom, а в видео используется 5-ая?
Подскажите, как решить данную проблему?
А импорт компонента Switch в файле присутствует?
Зависимости установлены?
@@mishanep Да, но насколько я понял в 6-ой версии react-router-dom он не поддерживается.
@@mishanep Да, установлены, однако при их установке в консоли выдаёт много ошибок в которых даже 2 критических присутствуют.. npm audit fix не решает проблему
Я бы начал поиски отсюда reactrouter.com/docs/en/v6/upgrading/v5
Первое, что бросается в глаза, компонент Redirect больше нельзя использовать внутри Switch. Можно заменить редирект методом replace из хука useHistory.
Привет Михаил, подскажите как это исправить?
FirebaseError: Firebase: Error (auth/network-request-failed).
Как знать, возможно сам Firebase блокирует запросы из вашего региона. Сейчас всё может быть. Можно попробовать из-под VPN.
@@mishanep Я включил vpn и теперь я получаю эту ошибку: Firebase: Error (auth/admin-restricted-operation).
Я искал в Интернете, но я не мог найти ответ. Вы знаете решение?
@@mustafoyakubov1198 не сталкивался, потому решения нет.
Аналогичная проблема (
привет, включи анонимный вход в настройках консоли firebase
У меня аналогичная проблема Firebase: Error (auth/invalid-api-key).
FirebaseError: Firebase: Error (auth/invalid-api-key).
как ее решить?
@@ayaznamazov8328 Привет. Решил этот вопрос? Потому что мне не помог файл env.local, и все ключи с firebase пришлось хранить в открытом доступе, что не очень.
Здраствуйте Михаил, я полностью переписала ваш код, на экран ничего не выходит, просто белый экран. Мне кажется он не может читать:
const app = initializeApp(firebaseConfig);
из firebase.js.
что делать в таком случае?
очень надеюсь на обратную связь))
Нашли решение?
@@JackShepards нашли решение? У меня апп is assigned but never used и зависате при нажатии на кнопку регистер
@@drbkso2 нет. видео старое. решение проекта тоже старое
А если будет рефреш страницы, юзер разлогинится?
В данном случае разлогиниться да. Как правило, то что мы храним в стейте, дополнительно кладётся в localStorage или sessionStorage. И оттуда initialState берётся, если там что-то есть. Соответственно при разлогинивании, сторедж вычищается.
@@mishanep Вроде у firebase есть функция чтобы проверить залогинен ли пользователь
Очень может быть, но не попадалась. Мне кажется здесь вопрос политики безопасности. В простейшем варианте кажется, что должно храниться в сторедже, чтобы не делать дополнительный запрос к серверу.
А как сделать так чтобы при рефреш страницы чтоб юзер не разлогинилс
@@nazario9537 нужно хранить состояние авторизации в localStorage и при инициализации js-приложения брать данные оттуда. Для redux здесь есть вариант автоматизации с библиотекой redux-persist. У меня есть соответствующий ролик про нее.
Ты брат Яна Непомнящего
Кто-нибудь сталкивался с ошибкой : Firebase: Error (auth/network-request-failed)? Повторял всё по видео и показывает данную ошибку.Что делать?
Над этой ошибкой есть ещё строка с инфо об ошибке, что там?
@@ruslanaliev2933 только это на красном фоне показывает
@@murderousvortex при настройке SDK, web выбрал или для мобильных? Если включен vpn попробуй отключить. Попробуй перезапустить приложение
@@ruslanaliev2933 web
Пробовал перезапускать
@@murderousvortex если есть репозиторий, скинь, посмотрю
when you reload the page, you will be logged out of your account (this is a big minus
It's just a simple question of storing a user session to localStorage. I assumed that devs, who would watch this, are already familiar with persistence in a browser
Если есть ошибка с элементом Redirect на странице, то замените его на Navigate
а что с useHistory?
Разрешение видео очень плохое.. 360p всего
у меня HD
Ютубчик сегодня шалит. Полдня видео обрабатывал. Сейчас должно быть в HD.
@@mishanep Все ок... и работа ваша отличная
видео безнадежно устарело, нет смысла смотреть
Честно, мало понимаю логику автора: писать асинхронные функции в компоненте а потом их диспатчить? Смысл тогда асинхронной логики Redux? Поверхностно показали примерчики из документации двух библиотек по отдельности, а связать их нормально так и не смогли. Я имею ввиду, что должны быть отдельные асинхронные actions, которые все бы делали не внутри React компонентов, а внутри redux логики. А это что? Мухи с котлетами кушать.
А в документации firebase до onAuthStateChanged, похоже, автор даже не дочитал.
Подгорело у меня знатно, видя, что человек учит так связывать redux и firebase. Лучше бы уже показал react-firebase-hooks.
Redux не обязует нас использовать всю логику приложения через себя. В данном случае вполне имеет место быть предложенное решение. Потом это бегиннерс гайд и уверен, многие получили пользу от его просмотра. Разумеется, от базового примера можно расширяться по самым разным нюансам, добавляя дополнительную логику, в том числе и через дополнительные инструменты. Но мешать всё в кучу смысла не вижу. Честно, мало понимаю логику хейтить бесплатный контент.
@@mishanep хейта нету, я просто говорю что вижу. А вижу я, что связка redux-firebase работает, но все лежит в куче, а так никто не делает и такому учить не должен. Не зря же создали thunk, не зря же его требуют в объявлениях на работу, не зря же все пишут асинхронку в redux-thunk. Хотите может поспорить, что я не прав?
@@СергейВер-и9ю нет конечно, спорить смысла не вижу. Я вообще против споров в сети, так как они редко бывают направлены на поиск истины.
У redux-thunk полно альтернатив, включая встроенные в сам redux-toolkit. Но опять же, это не исключает точечного использования хэндлеров без привязки к редаксу. Возможно в Реакте у нас слишком много свободы в плане выбора того, что и как делать, но спорить какой из подходов единственно верный было бы глупо. Мне видится куда полезнее собрать свой пример и выложить его в комментариях, нежели убеждать автора отказаться от своей манеры подачи.
@@mishanep извините конечно, если вам показалось это грубо, но говорю, как вижу. Да, видос хороший, но только как отдельный поверхностный разбор Redux-toolkit и firebase-auth ПО ОТДЕЛЬНОСТИ. Но как вы их "связали", это глупо. Да, оно работает, но это неправильно по той простой причине, что вы засрали компоненту, которая не должна вообще видеть что-то из асинхронной логики. А представьте, если запрос в одном компоненте не один, а например 3. У большинства программистов просто кровь из глаз пойдёт от большого количества асинхронной логики в компанеете. Именно поэтому, так делать можно, но это плохо, очень плохо.
@@СергейВер-и9ю можно вас попросить дать пример кода с правильной связкой?
Если кто-нибудь захочет использовать react-router-dom v. 6, то useHistioy замените на useNavigate "const navigate = useNavigate(); navigate("/");"
Не работает (
C токенами все же неясно, какой использовать в дальнейшем для работы с юзером. accessToken и refreshToken отличаются. Рефреш есть в типизации ответа, а вот accessToken приходится с тс брать через странную констуркцию const response: any = res.user.toJSON(), token: response.stsTokenManager.accessToken
Для работы нужен access token. Refresh используется для получения нового access токена, если прежний устарел.