В предыдущей части нам удалось добавить firebase/firestore в наше реагирующее приложение. В этой части мы добавим аутентификацию Firebase в наше приложение вместе с react-router-dom.
Шаг 1. Сначала мы настроим базовую маршрутизацию в нашем приложении с помощью React Router dom.
/
(начальный маршрут нашего приложения)/login
(Маршрут входа или наше приложение)
Чтобы реализовать простую маршрутизацию, нам нужно добавить файл routes.js
и новый каталог pages
внутри каталога компонентов. После этого мы добавим два файла Dashboard.js
и Login.js
во вновь созданный каталог pages. Мы также добавим файл style.css
в наш каталог компонентов.
После добавления всех этих файлов структура нашего проекта будет выглядеть так:
Теперь маршрутизация готова и может быть протестирована в браузере путем маршрутизации по этим двум маршрутам /
и /login
.
Шаг 2:Теперь нам нужно внести некоторые изменения в консоль firebase, чтобы использовать аутентификацию firebase. Сначала нам нужно включить аутентификацию по электронной почте / паролю в консоли Firebase, а после этого мы добавим тестового пользователя в раздел пользователей. Мы будем использовать эту информацию о тестовом пользователе для входа в систему.
Шаг 3: Для входа в firebase используется следующий метод из react-redux-firebase.
const firebase = getFirebase(); await firebase .auth() .signInWithEmailAndPassword(email, password) .then(res => { // Login success }) .catch(error => { // Login Errors });
Шаг 4. Теперь, когда наш/login
маршрут готов, мы создадим простую форму входа в файл Login.js
и добавим CSS в файл style.css
. Мы также соответствующим образом изменим Dashboard.js
.
Теперь наша аутентификация firebase готова, мы можем проверить ее, выполнив следующую команду.
npm start
В следующей части мы узнаем, как мы создаем и выполняем операции с коллекциями firestore.
Важные ссылки:
Github: https://github.com/piyushkalasariya/react-firebase-firestore
Часть 1: https://medium.com/@ piyushkalsariya/how-to-get-started-with-react-firebase-login-and-firestore-part-1-cc93ed00e4e5
Часть 3: https://medium.com /@piyushkalsariya/how-to-get-start-with-react-firebase-login-and-firestore-part-3-ab257ea2a654