Xác thực người dùng bằng Firebase & React
Firebase cung cấp các dịch vụ xác thực cho phép bạn dễ dàng đăng ký và đăng nhập người dùng. Bạn có thể sử dụng email, mật khẩu, số điện thoại và các nhà cung cấp danh tính như Google và Facebook.
Trong hướng dẫn này, bạn sẽ tìm hiểu cách sử dụng Xác thực Firebase trong React để xác thực người dùng bằng email và mật khẩu. Bạn sẽ lưu trữ dữ liệu người dùng được thu thập trong Firestore, một cơ sở dữ liệu đám mây NoSQL cũng từ Firebase.
Lưu ý rằng hướng dẫn này sử dụng Firebase v9 và React Router v6.
Mục Lục
Tạo ứng dụng Firebase
Để kết nối ứng dụng của bạn với Firebase, hãy đăng ký ứng dụng của bạn với Firebase để nhận đối tượng cấu hình. Đây là những gì bạn sẽ sử dụng để khởi tạo Firebase trong ứng dụng React của mình.
Để tạo một ứng dụng firebase, hãy làm theo các bước sau.
- Đi tới bảng điều khiển Firebase và nhấp vào Tạo một dự án.
- Đặt tên cho dự án của bạn và nhấp vào tạo ra để bắt đầu quá trình.
- Bấm vào Web biểu tượng () trên trang tổng quan về dự án của bạn để đăng ký ứng dụng.
- Đặt tên cho ứng dụng của bạn và nhấp vào Đăng ký ứng dụng. Bạn không cần phải bật Lưu trữ Firebase.
- Sao chép đối tượng cấu hình dưới Thêm SDK Firebase.
Tạo một ứng dụng React
Sử dụng tạo-phản ứng-ứng dụng để xây dựng một ứng dụng React.
npx create-react-app react-auth-firebase
Điều hướng đến thư mục và khởi động ứng dụng.
cd react-auth-firebase
npm run start
Xác thực người dùng bằng các chức năng của Firebase
Trước khi sử dụng Firebase, hãy cài đặt nó.
npm i firebase
Tạo một tệp mới, firebase.js, và khởi tạo Firebase.
import { initializeApp } from "firebase/app";
const firebaseConfig = {
apiKey: <api_key>,
authDomain:<auth_domain> ,
projectId: <project_id>,
storageBucket: <storage_bucket>,
messagingSenderId: <messaging_sender_id>,
appId: <app_id>
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
Sử dụng đối tượng cấu hình bạn đã sao chép khi đăng ký ứng dụng.
Tiếp theo, nhập các mô-đun Firebase mà bạn sẽ sử dụng.
import {
getAuth,
createUserWithEmailAndPassword,
signInWithEmailAndPassword,
signOut,
} from "firebase/auth";
import { getFirestore, addDoc, collection } from "firebase/firestore";
const db = getFirestore();
const auth = getAuth();Để xác thực người dùng, bạn cần tạo ba chức năng: signUp, signIn và signOut.
Các đăng ký chức năng chuyển email và mật khẩu tới createUserWithEmailAndPassword để đăng ký một người dùng mới. createUserWithEmailAndPassword trả về dữ liệu người dùng mà bạn sẽ sử dụng để tạo bản ghi người dùng mới trong cơ sở dữ liệu.
const signUp = async (email, password) => {
try {
const userCredential = await createUserWithEmailAndPassword(
auth,
email,
password
);
const user = userCredential.user;
await addDoc(collection(db, "users"), {
uid: user.uid,
email: user.email,
});
return true
} catch (error) {
return {error: error.message}
}
};
Lưu ý rằng bạn không kiểm tra xem email đã được sử dụng hay chưa trước khi đăng ký vì Firebase sẽ xử lý điều đó cho bạn.
Tiếp theo, trong đăng nhập chức năng chuyển email và mật khẩu vào signInWithEmailAndPassword chức năng đăng nhập một người dùng đã đăng ký.
const signIn = async (email, password) => {
try {
const userCredential = await signInWithEmailAndPassword(
auth,
email,
password
);
const user = userCredential.user;
return true
} catch (error) {
return {error: error.message}
}
};
Cả hai hàm signUp và signOut đều trả về true nếu thành công và thông báo lỗi nếu xảy ra lỗi.
Hàm signOut khá đơn giản. Nó gọi là đăng xuất() chức năng từ Firebase.
const signOut = async() => {
try {
await signOut(auth)
return true
} catch (error) {
return false
}
};
Tạo biểu mẫu phản ứng
Biểu mẫu đăng nhập và đăng ký sẽ thu thập email và mật khẩu từ người dùng.
Tạo một thành phần mới Signup.js và thêm phần sau.
import { useState } from "react";
import { Link } from "react-router-dom";
import { signUp } from "./firebase";
const Signup = () => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [error, seterror] = useState("");
const handleSubmit = async (e) => {
e.preventDefault();
if (password !== password2) {
seterror("Passwords do not match");
} else {
setEmail("");
setPassword("");
const res = await signUp(email, password);
if (res.error) seterror(res.error)
}
};
return (
<>
<h2>Sign Up</h2>
<div>
{error ? <div>{error}</div> : null}
<form onSubmit={handleSubmit}>
<input
type="email"
name="email"
value={email}
placeholder="Your Email"
required
onChange={(e) => setEmail(e.target.value)}
/>
<input
type="password"
name="password"
value={password}
placeholder="Your Password"
required
onChange={(e) => setPassword(e.target.value)}
/>
<button type="submit">Submit</button>
</form>
<p>
already registered? <Link to="/login">Login</Link>
</p>
</div>
</>
);
};
export default Signup;
Tại đây bạn đang tạo một biểu mẫu đăng ký và theo dõi trạng thái sử dụng email và mật khẩu. Sau khi bạn gửi biểu mẫu, onSubmit sự kiện kích hoạt handleSubmit () hàm gọi đăng ký() chức năng từ firebase.js. Nếu hàm trả về lỗi, hãy cập nhật trạng thái lỗi và hiển thị thông báo lỗi.
Đối với biểu mẫu đăng nhập, hãy tạo Signin.js và thêm phần sau.
import { useState } from "react";
import { signIn } from "./firebase";
const Login = () => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [error, seterror] = useState("");
const handleSubmit = async (e) => {
e.preventDefault();
setEmail("");
setPassword("");
const res = await signIn(email, password);
if (res.error) seterror(res.error);
};
return (
<>
{error ? <div>{error}</div> : null}
<form onSubmit={handleSubmit}>
<input
type="text"
name="email"
value={email}
placeholder="Your Email"
onChange={(e) => setEmail(e.target.value)}
/>
<input
type="password"
name="password"
value={password}
placeholder="Your Password"
onChange={(e) => setPassword(e.target.value)}
/>
<input type="submit" value="submit" />
</form>
</>
);
};
export default Login;
Biểu mẫu đăng nhập khá giống với trang đăng ký ngoại trừ việc gửi đó gọi là đăng nhập() chức năng.
Cuối cùng, tạo trang Hồ sơ. Đây là trang mà ứng dụng sẽ chuyển hướng người dùng đến sau khi xác thực thành công.
Tạo ra Profile.js và thêm phần sau.
import { signOut } from "./firebase";
const Profile = () => {
const handleLogout = async () => {
await signOut();
};
return (
<>
<h1>Profile</h1>
<button onClick={handleLogout}>Logout</button>
</>
);
};
export default Profile;
Trong thành phần này, bạn có tiêu đề Hồ sơ và nút đăng xuất. Các trong một cái nhấp chuột trình xử lý trên nút kích hoạt xử lý chức năng đăng xuất người dùng.
Tạo các tuyến đường xác thực
Để cung cấp các trang bạn đã tạo cho trình duyệt, hãy thiết lập react-router-dom.
Cài đặt react-router-dom:
npm i react-router-dom
Ở trong index.js, cấu hình react-router-dom:
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import App from "./App";
import Login from "./Login";
import Profile from "./Profile";
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<AuthProvider>
<Routes>
<Route path="/" element={<App />} />
<Route path="login" element={<Login />} />
<Route path="profile" element={<Profile />} />
</Routes>
</AuthProvider>
</BrowserRouter>
</React.StrictMode>,
document.getElementById("root")
);
Cho đến thời điểm này, ứng dụng có thể đăng ký người dùng, đăng ký và đăng xuất họ. Vì vậy, làm thế nào để bạn biết liệu một người dùng đã đăng nhập hay chưa?
Trong phần tiếp theo của hướng dẫn này, bạn sẽ thấy cách bạn có thể sử dụng ngữ cảnh React để theo dõi trạng thái xác thực của người dùng trên ứng dụng.
Quản lý xác thực với API ngữ cảnh React
React Context là một công cụ quản lý trạng thái giúp đơn giản hóa việc chia sẻ dữ liệu giữa các ứng dụng. Nó là một giải pháp thay thế tốt hơn cho việc khoan chống đỡ, nơi dữ liệu được truyền từ cây mẹ sang cây con cho đến khi nó đến được thành phần cần nó.
Tạo bối cảnh xác thực
bên trong src thư mục, thêm AuthContext.js tập tin và tạo và xuất AuthContext.
import { createContext } from "react";
const AuthContext = createContext();
export default AuthContext;
Tiếp theo, tạo nhà cung cấp trong AuthProvider.js. Nó sẽ cho phép các thành phần sử dụng AuthContext.
import { getAuth, onAuthStateChanged } from "firebase/auth";
import { useState, useEffect } from 'react';
import AuthContext from './AuthContext'
const auth = getAuth()
export const AuthProvider = ({ children }) => {
const [user, setUser] = useState(null);
useEffect(() => {
onAuthStateChanged(auth,(user) => {
setUser(user)
})
}, []);return (
<AuthContext.Provider value={{ user }}>{children}</AuthContext.Provider>
);
};
Ở đây, bạn đang nhận được giá trị người dùng bằng cách sử dụng onAuthStateChanged () từ Firebase. Phương thức này trả về một đối tượng người dùng nếu nó xác thực người dùng và null nếu nó không thể. Bằng cách sử dụng hook useEffect (), giá trị người dùng được cập nhật mỗi khi trạng thái xác thực thay đổi.
Ở trong index.jsbọc các tuyến đường với AuthProvider để đảm bảo tất cả các thành phần truy cập người dùng trong ngữ cảnh:
import { AuthProvider } from "./AuthProvider";
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<AuthProvider>
<Routes>
<Route path="/" element={<App />} />
<Route path="login" element={<Login />} />
<Route path="profile" element={<Profile />} />
</Routes>
</AuthProvider>
</BrowserRouter>
,
</React.StrictMode>,
document.getElementById("root")
);
Tạo các tuyến đường được bảo vệ
Để bảo vệ các tuyến đường nhạy cảm, hãy kiểm tra trạng thái xác thực của người dùng đang cố điều hướng đến một trang được bảo vệ như trang hồ sơ.
Biến đổi Profile.js để chuyển hướng người dùng nếu họ không được xác thực.
import { useContext } from "react";
import AuthContext from "./AuthContext";
import { useNavigate, Navigate } from "react-router-dom";
import { signOut } from "./firebase";
const Profile = () => {
const { user } = useContext(AuthContext);
const navigate = useNavigate();
const handleLogout = async () => {
await signOut();
};
if (!user) {
return <Navigate replace to="/login" />;
}
return (
<>
<h1>Profile</h1>
<button onClick={handleLogout}>Logout</button>
</>
);
};
export default Profile;
Ứng dụng hiển thị trang hồ sơ một cách có điều kiện bằng cách chuyển hướng người dùng đến trang đăng nhập nếu họ chưa được xác thực.
Tiến xa hơn với Xác thực Firebase
Trong hướng dẫn này, bạn đã sử dụng Firebase để xác thực người dùng bằng email và mật khẩu của họ. Bạn cũng đã tạo hồ sơ người dùng trong Firestore. Firebase cung cấp các chức năng để làm việc với các nhà cung cấp xác thực như Google, Facebook và Twitter.
Đọc tiếp
Thông tin về các Tác giả
