Аутентификация пользователя с помощью Firebase Auth
В этом разделе я расскажу вам об аспекте аутентификации в системе управления продажами. Вы узнаете, как входить в приложение и выходить из него, а также как защитить страницы, содержащие конфиденциальные данные, от неавторизованных пользователей.
Сначала создайте файл utils.ts, который будет содержать функции, и импортируйте их в необходимые компоненты.
Вход в приложение
Приведённая ниже функция позволяет пользователю получить доступ к приложению. Она принимает адрес электронной почты и пароль пользователя и возвращает пользовательский объект, содержащий всю информацию о пользователе.
Вы можете создать нового пользователя на консоли Firebase и выполнить приведенную ниже функцию при отправке формы входа.
import { AppRouterInstance } from "next/dist/shared/lib/app-router-context";
import { signInWithEmailAndPassword } from "firebase/auth";
import { auth } from "./firebase";
export const LoginUser = (email: string, password: string, router: AppRouterInstance) => {
signInWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
const user = userCredential.user;
//👇🏻 logs user's details
console.log("User >>", user);
successMessage("Authentication successful 🎉");
router.push("/dashboard");
})
.catch((error) => {
console.error(error);
errorMessage("Incorrect Email/Password ❌");
});
};
Приведённый выше фрагмент кода проверяет учётные данные пользователя и возвращает объект, содержащий всю информацию, связанную с пользователем. Если процесс прошел успешно, он перенаправляет пользователя на страницу информационной панели; в противном случае возвращает ошибку.
Выход пользователей из приложения
Firebase также предоставляет функцию выхода, которая позволяет пользователям выходить из приложения.
Вот как это работает:
import { AppRouterInstance } from "next/dist/shared/lib/app-router-context";
import { signOut } from "firebase/auth";
import { auth } from "./firebase";
export const LogOut = (router: AppRouterInstance) => {
signOut(auth)
.then(() => {
successMessage("Logout successful! 🎉");
router.push("/");
})
.catch((error) => {
errorMessage("Couldn't sign out ❌");
});
};
Приведённый выше фрагмент кода позволяет пользователям выходить из приложения, получая сведения об активном пользователе и выходя из него с помощью функции signOut.
Защита страниц от неавторизованных пользователей
Для этого вы можете сохранить объект сведений о пользователе в состоянии после входа в систему или использовать хук Firebase onAuthStateChanged.
Использование хука onAuthStateChanged:
"use client"
import { auth } from '@/firebase'
import { onAuthStateChanged } from "firebase/auth";
import { useState, useCallback, useEffect } from "react"
const isUserLoggedIn = useCallback(() => {
onAuthStateChanged(auth, (user) => {
if (user) {
setUser({ email: user.email, uid: user.uid });
//👉🏻 Perform an authenticated request
} else {
return router.push("/");
}
});
}, [router]);
useEffect(() => {
isUserLoggedIn();
}, [isUserLoggedIn]);
Хук onAuthStateChanged проверяет, активен ли пользователь, и возвращает объект, содержащий все сведения о пользователе. Вы можете выполнить функцию при загрузке страницы для всех роутов, кроме страницы входа.
Продолжение следует...
Перевод с некоторыми авторскими заголовками. Автор оригинала: David Asaolu.
