Firebase предоставляет службы аутентификации, которые позволяют легко регистрировать и входить пользователей. Вы можете использовать электронную почту, пароли, номера телефонов и поставщиков удостоверений, таких как Google и Facebook.

В этом руководстве вы узнаете, как использовать аутентификацию Firebase в React для аутентификации пользователей с использованием электронной почты и пароля. Вы будете хранить пользовательские данные, собранные в Firestore, облачной базе данных NoSQL, также из Firebase.

Обратите внимание, что в этом руководстве используются Firebase v9 и React Router v6.

Создайте приложение Firebase

Чтобы подключить ваше приложение к Firebase, зарегистрируйте свое приложение в Firebase, чтобы получить объект конфигурации. Это то, что вы будете использовать для инициализации Firebase в вашем приложении React.

Чтобы создать приложение Firebase, выполните следующие действия.

  1. Направляйтесь к Консоль Firebase и нажмите Создайте проект.
  2. Дайте вашему проекту имя и нажмите Создайте чтобы начать процесс.
    3. instagram viewer
  3. Нажать на Интернет значок (
  4. Дайте вашему приложению имя по вашему выбору и нажмите Зарегистрировать приложение. Вам не нужно включать Firebase Hosting.
  5. Скопируйте объект конфигурации в Добавить Firebase SDK.

Создать React-приложение

Использовать создать-реагировать-приложение для создания шаблона приложения React.

npx создать-реагировать-приложение реагировать-auth-firebase

Перейдите в папку и запустите приложение.

компакт-диск реагировать-auth-firebase
запуск запуска нпм

Аутентифицировать пользователей с помощью функций Firebase

Прежде чем использовать Firebase, установите его.

нпм я firebase

Создайте новый файл, firebase.js, и инициализируйте Firebase.

импортировать {initializeApp} из "firebase/app";
константа firebaseConfig = {
 ключ API: ,
 authDomain: ,
 идентификатор проекта: ,
 хранилищеВедро: ,
 идентификатор отправителя сообщений: ,
 идентификатор приложения: 
};
// Инициализировать Firebase
const app = initializeApp (firebaseConfig);

Используйте объект конфигурации, который вы скопировали при регистрации приложения.

Затем импортируйте модули Firebase, которые вы будете использовать.

импорт {
 получитьАут,
 создать пользователя с электронной почтой и паролем,
 вход с электронной почтой и паролем,
 выход,
} из "firebase/auth";
импортировать {getFirestore, addDoc, collection} из "firebase/firestore";
константная база данных = getFirestore();
константная авторизация = getAuth();

К аутентифицировать пользователей, вам нужно создать три функции: signUp, signIn и signOut.

То зарегистрироваться функция передает адрес электронной почты и пароль создатьUserWithEmailAndPassword для регистрации нового пользователя. создатьUserWithEmailAndPassword возвращает данные пользователя, которые вы будете использовать для создания новой записи пользователя в базе данных.

const signUp = async (адрес электронной почты, пароль) => {
 пытаться {
 const userCredential = await createUserWithEmailAndPassword(
 авторизация,
 Эл. адрес,
 пароль
 );
 постоянный пользователь = userCredential.user;
 await addDoc (коллекция (db, «пользователи»), {
 uid: user.uid,
 электронная почта: user.email,
 });
 вернуть истину
 } поймать (ошибка) {
 вернуть {ошибка: error.message}
 }
};

Обратите внимание, что перед регистрацией вы не проверяете, используется ли электронная почта, потому что Firebase сделает это за вас.

Далее, в войти передать адрес электронной почты и пароль войти с электронной почтой и паролем функция входа зарегистрированного пользователя.

const signIn = async (адрес электронной почты, пароль) => {
 пытаться {
 const userCredential = await signInWithEmailAndPassword(
 авторизация,
 Эл. адрес,
 пароль
 );
 постоянный пользователь = userCredential.user;
 вернуть истину
 } поймать (ошибка) {
 вернуть {ошибка: error.message}
 }
};

Обе функции signUp и signOut возвращают true в случае успеха и сообщение об ошибке, если возникает ошибка.

Функция signOut довольно проста. Он называет выход() функция из Firebase.

const signOut = async() => {
 пытаться {
 ожидание выхода (авторизация)
 вернуть истину
 } поймать (ошибка) {
 вернуть ложь
 }
};

Создание реагирующих форм

Формы входа и регистрации будут собирать адрес электронной почты и пароль от пользователя.

Создать новый компонент Signup.js и добавьте следующее.

импортировать {useState} из "реагировать";
импортировать {Link} из "react-router-dom";
импортировать {signUp} из "./firebase";
const Регистрация = () => {
 const [электронная почта, setEmail] = useState("");
 const [пароль, setPassword] = useState("");
 const [ошибка, seterror] = useState("");
 const handleSubmit = async (e) => {
 e.preventDefault();
 если (пароль !== пароль2) {
 seterror("Пароли не совпадают");
 } еще {
 установить электронную почту("");
 Установка пароля("");
 const res = await signUp (электронная почта, пароль);
 если (рез.ошибка) seterror (рез.ошибка)
 }
 };
 вернуть (
 <>
Зарегистрироваться




 {ошибка? 
{ошибка}
: нулевой}


 тип = "электронная почта"
 имя = "электронная почта"
 значение = {электронная почта}
 placeholder="Ваш адрес электронной почты"
 требуется
 onChange={(e) => setEmail (e.target.value)}
 />
 тип = "пароль"
 имя = "пароль"
 значение = {пароль}
 placeholder="Ваш пароль"
 требуется
 onChange={(e) => setPassword (e.target.value)}
 />






 уже зарегистрирован? Авторизоваться






 );
};
экспортировать регистрацию по умолчанию;

Здесь вы создаете форму регистрации и отслеживаете адрес электронной почты и пароль, используя состояние. После того, как вы отправите форму, onSubmit событие запускает обработатьОтправить() функция, которая вызывает зарегистрироваться() функция от firebase.js. Если функция возвращает ошибку, обновите состояние ошибки и отобразите сообщение об ошибке.

Для формы входа создайте Вход.js и добавьте следующее.

импортировать {useState} из "реагировать";
импортировать {signIn} из "./firebase";
постоянный Логин = () => {
 const [электронная почта, setEmail] = useState("");
 const [пароль, setPassword] = useState("");
 const [ошибка, seterror] = useState("");
 const handleSubmit = async (e) => {
 e.preventDefault();
 установить электронную почту("");
 Установка пароля("");
 const res = await signIn (электронная почта, пароль);
 если (рез.ошибка) seterror (рез.ошибка);
 };
 вернуть (
 <>
 {ошибка? 
{ошибка}
: нулевой}


 тип = "текст"
 имя = "электронная почта"
 значение = {электронная почта}
 placeholder="Ваш адрес электронной почты"
 onChange={(e) => setEmail (e.target.value)}
 />
 тип = "пароль"
 имя = "пароль"
 значение = {пароль}
 placeholder="Ваш пароль"
 onChange={(e) => setPassword (e.target.value)}
 />





 );
};
экспортировать логин по умолчанию;

Форма входа очень похожа на страницу регистрации, за исключением того, что отправка вызывает войти() функция.

Наконец, создайте страницу профиля. Это страница, на которую приложение будет перенаправлять пользователей после успешной аутентификации.

Создавать Профиль.js и добавьте следующее.

импортировать {signOut} из "./firebase";
константный профиль = () => {
 const handleLogout = асинхронный () => {
 ждать выхода();
 };
 вернуть (
 <>
Профиль



 );
};
экспорт профиля по умолчанию;

В этом компоненте у вас есть заголовок «Профиль» и кнопка выхода. То по щелчку обработчик на кнопке запускает ручкаВыход из системы функция, которая выходит из системы.

Создание маршрутов аутентификации

Чтобы страницы, которые вы создали, отображались в браузере, настройте rакт-роутер-дом.

Установить реакция-маршрутизатор-дом:

npm я реагирую-роутер-дом

В индекс.js, настроить реакция-маршрутизатор-дом:

импортировать React из «реагировать»;
импортировать ReactDOM из «react-dom»;
импортировать {BrowserRouter, Routes, Route} из "react-router-dom";
импортировать приложение из "./App";
импортировать логин из "./Login";
импортировать Профиль из "./Профиль";
ReactDOM.render(




} />
} />
} />



,
 документ.getElementById("корень")
);

До этого момента приложение может зарегистрировать пользователя, зарегистрировать его и выйти из него. Так как же узнать, вошел ли пользователь в систему или нет?

В следующем разделе этого руководства вы увидите, как можно использовать контекст React для отслеживания статуса аутентификации пользователя в приложении.

Управление аутентификацией с помощью React Context API

React Context — это инструмент управления состоянием, который упрощает обмен данными между приложениями. Это лучшая альтернатива детализации пропеллеров, когда данные передаются по дереву от родителя к дочернему элементу, пока не достигнут того компонента, который в них нуждается.

Создать контекст аутентификации

в источник папка, добавить AuthContext.js файл и создавать и экспортировать Аутконтекст.

импортировать {createContext} из «реагировать»;
const AuthContext = createContext();
экспортировать AuthContext по умолчанию;

Затем создайте поставщика в AuthProvider.js. Это позволит компонентам использовать Аутконтекст.

импортировать {getAuth, onAuthStateChanged} из "firebase/auth";
импортировать {useState, useEffect} из «реагировать»;
импортировать AuthContext из './AuthContext'
постоянная авторизация = getAuth()
экспортировать константу AuthProvider = ({ дочерние элементы }) => {
 const [пользователь, setUser] = useState (null);
 использоватьЭффект(() => {
 onAuthStateChanged (авторизация, (пользователь) => {
 setUser (пользователь)
 })
 }, []);
вернуть (
{дети}
 );
 };

Здесь вы получаете пользовательскую ценность, используя onAuthStateChanged() метод из Firebase. Этот метод возвращает пользовательский объект, если он аутентифицирует пользователя, и null, если он не может. С помощью хук useEffect(), значение пользователя обновляется каждый раз, когда изменяется статус проверки подлинности.

В index.js, оберните маршруты Провайдер авторизации чтобы все компоненты обращались к пользователю в контексте:

импортировать { AuthProvider } из "./AuthProvider";
ReactDOM.render(




} />
} />
} />



 ,
,
 документ.getElementById("корень")
);

Создание защищенных маршрутов

К защитить конфиденциальные маршруты, проверьте статус аутентификации пользователя, пытающегося перейти на защищенную страницу, например на страницу профиля.

Изменить Профиль.js для перенаправления пользователя, если он не аутентифицирован.

импортировать {useContext} из "реагировать";
импортировать AuthContext из "./AuthContext";
import {useNavigate, Navigate} из "react-router-dom";
импортировать {signOut} из "./firebase";
константный профиль = () => {
 const { пользователь } = useContext (AuthContext);
 константная навигация = useNavigate();
 const handleLogout = асинхронный () => {
 ждать выхода();
 };
 если (!пользователь) {
 вернуть ;
 }
 вернуть (
 <>
Профиль



 );
};
экспорт профиля по умолчанию;

Приложение условно отображает страницу профиля, перенаправляя пользователя на страницу входа, если он не прошел проверку подлинности.

Идем дальше с аутентификацией Firebase

В этом руководстве вы использовали Firebase для аутентификации пользователей с использованием их электронной почты и пароля. Вы также создали записи пользователей в Firestore. Firebase предоставляет функции для работы с поставщиками аутентификации, такими как Google, Facebook и Twitter.

10 лучших практик React, которым нужно следовать в 2022 году

Читать далее

ДелитьсяТвитнутьДелитьсяЭл. адрес

Похожие темы

  • Программирование
  • Реагировать
  • Программирование
  • JavaScript

Об авторе

Мэри Гатони (опубликовано 12 статей)

Мэри Гатони — разработчик программного обеспечения, страстно любящий создавать технический контент, который не только информативен, но и привлекателен. Когда она не программирует и не пишет, ей нравится проводить время с друзьями и гулять на свежем воздухе.

Еще от Мэри Гатони

Подписывайтесь на нашу новостную рассылку

Подпишитесь на нашу рассылку технических советов, обзоров, бесплатных электронных книг и эксклюзивных предложений!

Нажмите здесь, чтобы подписаться