В предыдущей части нам удалось добавить firebase/firestore в наше реагирующее приложение. В этой части мы добавим аутентификацию Firebase в наше приложение вместе с react-router-dom.

Шаг 1. Сначала мы настроим базовую маршрутизацию в нашем приложении с помощью React Router dom.

  1. /(начальный маршрут нашего приложения)
  2. /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