Sử dụng Xác thực Firebase với các tính năng Next.js mới nhất

Giới thiệu về next-firebase-auth-edge Bạn có thể đã tìm thấy bài viết này khi đang tìm cách thêm Xác thực Firebase vào ứng dụng Next.js hiện có hoặc mới của mình. Bạn đặt mục tiêu đưa ra quyết định thông minh, không thiên vị và hướng đến tương lai để tối đa hóa cơ hội thành công cho ứng dụng của bạn. Với tư cách là người tạo ra next-firebase-auth-edge, tôi phải thừa nhận rằng việc đưa ra ý kiến hoàn toàn khách quan không phải là sở trường của tôi, nhưng ít nhất tôi sẽ cố gắng biện minh cho cách tiếp cận mà tôi đã thực hiện khi thiết kế thư viện. Hy vọng rằng đến cuối hướng dẫn này, bạn có thể thấy cách tiếp cận này vừa đơn giản vừa khả thi về lâu dài. Làm thế nào nó bắt đầu Tôi sẽ tiết kiệm cho bạn những lời giới thiệu dài dòng. Hãy để tôi nói rằng ý tưởng về thư viện được lấy cảm hứng từ một tình huống có thể giống với hoàn cảnh của bạn. Đó là thời điểm Next.js phát hành phiên bản hoàng yến của . Tôi đang làm việc trên một ứng dụng chủ yếu dựa vào việc viết lại và chuyển hướng nội bộ. Để làm được điều đó, chúng tôi đã sử dụng máy chủ tốc hành Node.js hiển thị ứng dụng Next.js. App Router express Chúng tôi thực sự hào hứng với và nhưng cũng biết rằng nó sẽ không tương thích với máy chủ tùy chỉnh của chúng tôi. dường như là một tính năng mạnh mẽ mà chúng tôi có thể tận dụng để loại bỏ nhu cầu về máy chủ Express tùy chỉnh, thay vào đó chọn chỉ dựa vào các tính năng tích hợp của Next.js để chuyển hướng và ghi lại người dùng đến các trang khác nhau một cách linh hoạt. Bộ định tuyến ứng dụng Thành phần máy chủ Middleware Lần đó, chúng tôi đang sử dụng . Chúng tôi thực sự thích thư viện này, nhưng nó phân bổ logic xác thực của chúng tôi thông qua các tệp , , , , những tệp này sẽ được coi là kế thừa đủ sớm. Ngoài ra, thư viện không tương thích với phần mềm trung gian, khiến chúng tôi không thể viết lại URL hoặc chuyển hướng người dùng dựa trên ngữ cảnh của họ. next-firebase-auth next.config.js pages/_app.tsx pages/api/login.ts pages/api/logout.ts Vì vậy, tôi đã bắt đầu tìm kiếm, nhưng thật ngạc nhiên, tôi không tìm thấy thư viện nào hỗ trợ Xác thực Firebase trong phần mềm trung gian. – Là một kỹ sư phần mềm với hơn 11 năm kinh nghiệm thương mại về Node.js và React, tôi đang chuẩn bị giải quyết câu hỏi hóc búa này. Tại sao lại có thể như vậy? Điều đó là không thể! Vì vậy, tôi bắt đầu. Và câu trả lời đã trở nên rõ ràng. Middleware đang chạy bên trong . Không có thư viện firebase tương thích với có sẵn trong . . Tôi cảm thấy bất lực. Đây có phải là lần đầu tiên tôi thực sự phải để sử dụng các API mới và lạ mắt không? - Tôi nhanh chóng ngừng nức nở và bắt đầu thiết kế ngược , và một số thư viện xác thực JWT khác, điều chỉnh chúng cho phù hợp với Edge Runtime. Tôi đã nắm bắt cơ hội để giải quyết tất cả các vấn đề tôi gặp phải với các thư viện xác thực trước đó, nhằm tạo ra thư viện xác thực nhẹ nhất, dễ cấu hình nhất và hướng tới tương lai. Edge Runtime API Web Crypto Edge Runtime Tôi đã phải chịu số phận đợi Không. Nồi canh không bao giờ sôi. next-firebase-auth firebase-admin Khoảng hai tuần sau, phiên bản của ra đời. Đó là một bằng chứng chắc chắn về khái niệm, nhưng bạn sẽ không muốn sử dụng phiên bản . Hãy tin tôi. 0.0.1 next-firebase-auth-edge 0.0.1 Mọi thứ sao rồi Gần , tôi vui mừng thông báo rằng sau , và từ các nhà phát triển tuyệt vời trên toàn thế giới, thư viện đã đạt đến giai đoạn mà cái tôi khác của tôi chấp thuận. hai năm sau 372 lần cam kết 110 vấn đề được giải quyết vô số phản hồi vô giá Trong hướng dẫn này, tôi sẽ sử dụng phiên bản để tạo ứng dụng Next.js được xác thực từ đầu. Chúng ta sẽ thực hiện chi tiết từng bước, bắt đầu bằng việc tạo dự án Firebase và ứng dụng Next.js mới, sau đó là tích hợp với các thư viện và . Ở cuối hướng dẫn này, chúng tôi sẽ triển khai ứng dụng lên Vercel để xác nhận rằng mọi thứ đều hoạt động cả cục bộ và trong môi trường sẵn sàng sản xuất. 1.4.1 của next-firebase-auth-edge next-firebase-auth-edge firebase/auth Thiết lập căn cứ hỏa lực Phần này giả sử bạn chưa thiết lập Xác thực Firebase. Hãy bỏ qua phần tiếp theo nếu không. Hãy đến và Bảng điều khiển Firebase tạo một dự án Sau khi dự án được tạo, hãy bật Xác thực Firebase. Mở bảng điều khiển và làm theo và bật phương thức . Đó là phương pháp chúng tôi sẽ hỗ trợ trong ứng dụng của mình phương pháp Xây dựng > Xác thực > Đăng nhập Email và mật khẩu Sau khi bạn bật phương thức đăng nhập đầu tiên, Xác thực Firebase sẽ được bật cho dự án của bạn và bạn có thể truy xuất của mình trong Khóa API Web Cài đặt dự án Sao chép khóa API và giữ nó an toàn. Bây giờ, hãy mở tab tiếp theo – và ghi lại . Chúng ta sẽ cần nó sau này. Nhắn tin qua đám mây ID người gửi Cuối cùng nhưng không kém phần quan trọng, chúng ta cần tạo thông tin đăng nhập tài khoản dịch vụ. Những điều đó sẽ cho phép ứng dụng của bạn có toàn quyền truy cập vào các dịch vụ Firebase của bạn. Chuyển đến và nhấp vào . Thao tác này sẽ tải xuống tệp có thông tin xác thực tài khoản dịch vụ. Lưu tập tin này ở một vị trí đã biết. Cài đặt dự án > Tài khoản dịch vụ Tạo khóa riêng mới .json Chúng tôi sẵn sàng tích hợp ứng dụng Next.js với Xác thực Firebase Đó là nó! Tạo ứng dụng Next.js từ đầu Hướng dẫn này giả sử bạn đã cài đặt và . Các lệnh được sử dụng trong hướng dẫn này đã được xác minh dựa trên LTS mới nhất. Bạn có thể xác minh phiên bản nút bằng cách chạy trong terminal. Bạn cũng có thể sử dụng các công cụ như để chuyển đổi nhanh chóng giữa các phiên bản Node.js. Node.js npm Node.js v20 node -v NVM Thiết lập ứng dụng Next.js bằng CLI Mở thiết bị đầu cuối yêu thích của bạn, điều hướng đến thư mục dự án của bạn và chạy npx create-next-app@latest Để đơn giản, hãy sử dụng cấu hình mặc định. Điều này có nghĩa là chúng tôi sẽ sử dụng và TypeScript tailwind ✔ What is your project named? … my-app ✔ Would you like to use TypeScript? … Yes ✔ Would you like to use ESLint? … Yes ✔ Would you like to use Tailwind CSS? … Yes ✔ Would you like to use `src/` directory? … No ✔ Would you like to use App Router? (recommended) … Yes ✔ Would you like to customize the default import alias (@/*)? … No Hãy điều hướng đến thư mục gốc của dự án và đảm bảo tất cả các phụ thuộc đã được cài đặt cd my-app npm install Để xác nhận mọi thứ hoạt động như mong đợi, hãy khởi động máy chủ dev Next.js bằng lệnh . Khi bạn mở , bạn sẽ thấy trang chào mừng Next.js, tương tự như sau: npm run dev http://localhost:3000 Chuẩn bị các biến môi trường Trước khi bắt đầu tích hợp với Firebase, chúng tôi cần một cách an toàn để lưu trữ và đọc cấu hình Firebase của mình. May mắn thay, Next.js có hỗ trợ tích hợp. dotenv Mở trình soạn thảo mã yêu thích của bạn và điều hướng đến thư mục dự án Hãy tạo tệp trong thư mục gốc của dự án và điền vào nó các biến môi trường sau: .env.local FIREBASE_ADMIN_CLIENT_EMAIL=... FIREBASE_ADMIN_PRIVATE_KEY=... AUTH_COOKIE_NAME=AuthToken AUTH_COOKIE_SIGNATURE_KEY_CURRENT=secret1 AUTH_COOKIE_SIGNATURE_KEY_PREVIOUS=secret2 USE_SECURE_COOKIES=false NEXT_PUBLIC_FIREBASE_PROJECT_ID=... NEXT_PUBLIC_FIREBASE_API_KEY=AIza... NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=....firebaseapp.com NEXT_PUBLIC_FIREBASE_DATABASE_URL=....firebaseio.com NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=... Xin lưu ý rằng các biến có tiền tố sẽ có sẵn trong gói phía máy khách. Chúng tôi sẽ cần những thứ đó để thiết lập NEXT_PUBLIC_ SDK khách hàng xác thực Firebase , và có thể được truy xuất từ tệp được tải xuống sau khi tạo thông tin xác thực tài khoản dịch vụ NEXT_PUBLIC_FIREBASE_PROJECT_ID FIREBASE_ADMIN_CLIENT_EMAIL FIREBASE_ADMIN_PRIVATE_KEY .json sẽ là tên của cookie được sử dụng để lưu trữ thông tin đăng nhập của người dùng AUTH_COOKIE_NAME và là những bí mật mà chúng tôi sẽ ký thông tin xác thực AUTH_COOKIE_SIGNATURE_KEY_CURRENT AUTH_COOKIE_SIGNATURE_KEY_PREVIOUS là được lấy từ trang chung NEXT_PUBLIC_FIREBASE_API_KEY Khóa API Web Cài đặt dự án là .firebaseapp.com NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN id dự án của bạn là .firebaseio.com NEXT_PUBLIC_FIREBASE_DATABASE_URL id dự án của bạn Có thể lấy từ trang > NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID Cài đặt dự án Tin nhắn qua đám mây sẽ không được sử dụng để phát triển cục bộ nhưng sẽ hữu ích khi chúng tôi triển khai ứng dụng của mình lên Vercel USE_SECURE_COOKIES Tích hợp với xác thực Firebase Cài đặt cấu hình next-firebase-auth-edge Thêm thư viện vào phần phụ thuộc của dự án bằng cách chạy npm install next-firebase-auth-edge@^1.4.1 Hãy tạo tệp để đóng gói cấu hình dự án của chúng tôi. Việc này không bắt buộc nhưng sẽ làm cho các ví dụ mã dễ đọc hơn. config.ts Đừng dành quá nhiều thời gian để suy ngẫm về những giá trị đó. Chúng tôi sẽ giải thích chúng chi tiết hơn khi chúng tôi theo dõi. export const serverConfig = { cookieName: process.env.AUTH_COOKIE_NAME!, cookieSignatureKeys: [process.env.AUTH_COOKIE_SIGNATURE_KEY_CURRENT!, process.env.AUTH_COOKIE_SIGNATURE_KEY_PREVIOUS!], cookieSerializeOptions: { path: "/", httpOnly: true, secure: process.env.USE_SECURE_COOKIES === "true", sameSite: "lax" as const, maxAge: 12 * 60 * 60 * 24, }, serviceAccount: { projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID!, clientEmail: process.env.FIREBASE_ADMIN_CLIENT_EMAIL!, privateKey: process.env.FIREBASE_ADMIN_PRIVATE_KEY?.replace(/\\n/g, "\n")!, } }; export const clientConfig = { projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID, apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY!, authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN, databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL, messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID }; Thêm phần mềm trung gian Tạo tệp trong thư mục gốc của dự án và dán đoạn sau middleware.ts import { NextRequest } from "next/server"; import { authMiddleware } from "next-firebase-auth-edge"; import { clientConfig, serverConfig } from "./config"; export async function middleware(request: NextRequest) { return authMiddleware(request, { loginPath: "/api/login", logoutPath: "/api/logout", apiKey: clientConfig.apiKey, cookieName: serverConfig.cookieName, cookieSignatureKeys: serverConfig.cookieSignatureKeys, cookieSerializeOptions: serverConfig.cookieSerializeOptions, serviceAccount: serverConfig.serviceAccount, }); } export const config = { matcher: [ "/", "/((?!_next|api|.*\\.).*)", "/api/login", "/api/logout", ], }; Dù bạn có tin hay không, nhưng chúng tôi vừa tích hợp máy chủ Ứng dụng của mình với Xác thực Firebase. Trước khi chúng ta thực sự sử dụng nó, hãy giải thích cấu hình một chút: sẽ hướng dẫn authMiddleware hiển thị điểm cuối . Khi điểm cuối này được gọi với *, nó sẽ phản hồi với tiêu đề HTTP(S)-Only chứa đã ký loginPath GET /api/login Authorization: Bearer ${idToken} Set-Cookie mã thông báo làm mới và tùy chỉnh * được truy xuất bằng chức năng có sẵn trong . Thêm về điều này sau. idToken getIdToken SDK khách Firebase Tương tự, hướng dẫn phần mềm trung gian hiển thị nhưng nó không yêu cầu bất kỳ tiêu đề bổ sung nào. Khi được gọi, nó sẽ xóa cookie xác thực khỏi trình duyệt. logoutPath GET /api/logout là Khóa API Web. Middleware sử dụng nó để làm mới mã thông báo tùy chỉnh và đặt lại cookie xác thực sau khi thông tin đăng nhập hết hạn. apiKey là tên của bộ cookie và bị xóa bởi các điểm cuối và cookieName /api/login /api/logout danh sách các khóa bí mật mà thông tin đăng nhập của người dùng được ký. Thông tin xác thực luôn được ký bằng khóa đầu tiên trong danh sách, do đó bạn cần cung cấp ít nhất một giá trị. Bạn có thể cung cấp nhiều phím để thực hiện cookieSignatureKeys xoay phím là các tùy chọn được chuyển tới khi tạo tiêu đề . Xem README để biết thêm thông tin cookieSerializeOptions cookie Set-Cookie cookie ủy quyền cho thư viện sử dụng dịch vụ Firebase của bạn. serviceAccount Trình so khớp hướng dẫn máy chủ Next.js chạy Middleware dựa trên , bất kỳ đường dẫn nào khác không phải là tệp hoặc lệnh gọi api. /api/login /api/logout / export const config = { matcher: [ "/", "/((?!_next|api|.*\\.).*)", "/api/login", "/api/logout", ], }; lệnh gọi Bạn có thể thắc mắc tại sao chúng tôi không kích hoạt phần mềm trung gian cho tất cả /api/* . Chúng tôi có thể, nhưng đó là một cách tốt để xử lý các cuộc gọi không được xác thực trong chính trình xử lý tuyến đường API. Phần này hơi nằm ngoài phạm vi của hướng dẫn này, nhưng nếu bạn quan tâm, hãy cho tôi biết và tôi sẽ chuẩn bị một số ví dụ! Như bạn có thể thấy, cấu hình rất và có mục đích được xác định rõ ràng. Bây giờ, hãy bắt đầu gọi các điểm cuối và của chúng ta. tối thiểu /api/login /api/logout Tạo trang chủ an toàn Để làm mọi thứ đơn giản nhất có thể, hãy xóa trang chủ Next.js mặc định và thay thế nó bằng một số nội dung được cá nhân hóa Mở và dán cái này: ./app/page.tsx import { getTokens } from "next-firebase-auth-edge"; import { cookies } from "next/headers"; import { notFound } from "next/navigation"; import { clientConfig, serverConfig } from "../config"; export default async function Home() { const tokens = await getTokens(cookies(), { apiKey: clientConfig.apiKey, cookieName: serverConfig.cookieName, cookieSignatureKeys: serverConfig.cookieSignatureKeys, serviceAccount: serverConfig.serviceAccount, }); if (!tokens) { notFound(); } return ( Super secure home page Only {tokens?.decodedToken.email} holds the magic key to this kingdom!

); } Hãy chia nhỏ điều này từng chút một. Hàm được thiết kế để xác thực và trích xuất thông tin xác thực của người dùng từ getTokens cookie const tokens = await getTokens(cookies(), { apiKey: clientConfig.apiKey, cookieName: serverConfig.cookieName, cookieSignatureKeys: serverConfig.cookieSignatureKeys, serviceAccount: serverConfig.serviceAccount, }); Nó giải quyết bằng , nếu người dùng không được xác thực hoặc một đối tượng chứa hai thuộc tính: null là idToken mà bạn có thể sử dụng để ủy quyền các yêu cầu API tới các dịch vụ phụ trợ bên ngoài. Điều này hơi nằm ngoài phạm vi, nhưng cần đề cập rằng thư viện này hỗ trợ kiến trúc dịch vụ phân tán. Mã tương thích và sẵn sàng sử dụng với tất cả thư viện Firebase chính thức trên tất cả các nền tảng. token string token như tên gợi ý, là phiên bản được giải mã của , chứa tất cả thông tin cần thiết để nhận dạng người dùng, bao gồm địa chỉ email, ảnh hồ sơ và , điều này còn cho phép chúng tôi hạn chế quyền truy cập dựa trên vai trò và quyền. decodedToken token xác nhận quyền sở hữu tùy chỉnh Sau khi nhận được , chúng tôi sử dụng chức năng từ để đảm bảo chỉ người dùng được xác thực mới có thể truy cập trang tokens notFound next/navigation if (!tokens) { notFound(); } Cuối cùng, chúng tôi hiển thị một số nội dung người dùng cơ bản, được cá nhân hóa Super secure home page Only {tokens?.decodedToken.email} holds the magic key to this kingdom!"

Hãy chạy nó. Trong trường hợp bạn đã đóng máy chủ dev của mình, chỉ cần chạy . npm run dev Khi bạn cố gắng truy cập , bạn sẽ thấy http://localhost:3000/ 404: Không thể tìm thấy trang này. Thành công! Chúng tôi đã giữ bí mật của mình an toàn trước những con mắt tò mò! Cài đặt và khởi tạo SDK khách hàng Firebase firebase Chạy tại thư mục gốc của dự án npm install firebase Sau khi cài đặt SDK máy khách, hãy tạo tệp trong thư mục gốc của dự án và dán đoạn mã sau firebase.ts import { initializeApp } from 'firebase/app'; import { clientConfig } from './config'; export const app = initializeApp(clientConfig); Điều này sẽ khởi tạo SDK khách hàng Firebase và hiển thị đối tượng ứng dụng cho các thành phần máy khách Tạo trang đăng ký Trang chủ siêu an toàn có ý nghĩa gì nếu không ai có thể xem nó? Hãy xây dựng một trang đăng ký đơn giản để cho phép mọi người truy cập ứng dụng của chúng tôi. Hãy tạo một trang mới, lạ mắt trong ./app/register/page.tsx "use client"; import { FormEvent, useState } from "react"; import Link from "next/link"; import { getAuth, createUserWithEmailAndPassword } from "firebase/auth"; import { app } from "../../firebase"; import { useRouter } from "next/navigation"; export default function Register() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [confirmation, setConfirmation] = useState(""); const [error, setError] = useState(""); const router = useRouter(); async function handleSubmit(event: FormEvent) { event.preventDefault(); setError(""); if (password !== confirmation) { setError("Passwords don't match"); return; } try { await createUserWithEmailAndPassword(getAuth(app), email, password); router.push("/login"); } catch (e) { setError((e as Error).message); } } return ( Pray tell, who be this gallant soul seeking entry to mine humble abode? Your email setEmail(e.target.value)} id="email" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="name@company.com" required /> Password setPassword(e.target.value)} id="password" placeholder="••••••••" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required /> Confirm password setConfirmation(e.target.value)} id="confirm-password" placeholder="••••••••" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required /> {error && ( {error} )} Create an account Already have an account?{" "} Login here

); } Tôi biết. Đó là rất nhiều văn bản, nhưng hãy kiên nhẫn với tôi. Chúng tôi bắt đầu với để cho biết rằng trang đăng ký sẽ sử dụng API phía máy khách "use client"; const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [confirmation, setConfirmation] = useState(""); const [error, setError] = useState(""); Sau đó, chúng tôi xác định một số biến và setters để giữ trạng thái biểu mẫu của chúng tôi const router = useRouter(); async function handleSubmit(event: FormEvent) { event.preventDefault(); setError(""); if (password !== confirmation) { setError("Passwords don't match"); return; } try { await createUserWithEmailAndPassword(getAuth(app), email, password); router.push("/login"); } catch (e) { setError((e as Error).message); } } Ở đây, chúng tôi xác định logic gửi biểu mẫu của mình. Đầu tiên, chúng tôi xác thực và có bằng nhau hay không, nếu không, chúng tôi sẽ cập nhật trạng thái lỗi. Nếu các giá trị hợp lệ, chúng tôi sẽ tạo tài khoản người dùng bằng từ . Nếu bước này không thành công (ví dụ: email đã bị lấy mất), chúng tôi sẽ thông báo cho người dùng bằng cách cập nhật lỗi. password confirmation createUserWithEmailAndPassword firebase/auth Nếu mọi việc suôn sẻ, chúng tôi chuyển hướng người dùng đến trang . Có lẽ bây giờ bạn đang bối rối, và bạn có quyền như vậy. chưa tồn tại. Chúng tôi chỉ đang chuẩn bị cho những gì sắp xảy ra. /login /login Khi bạn truy cập , trang sẽ trông gần giống như thế này: http://localhost:3000/register Tạo trang đăng nhập Bây giờ, người dùng đã có thể đăng ký, hãy để họ chứng minh danh tính của mình Tạo trang đăng nhập trong ./app/login/page.tsx "use client"; import { FormEvent, useState } from "react"; import Link from "next/link"; import { useRouter } from "next/navigation"; import { getAuth, signInWithEmailAndPassword } from "firebase/auth"; import { app } from "../../firebase"; export default function Login() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [error, setError] = useState(""); const router = useRouter(); async function handleSubmit(event: FormEvent) { event.preventDefault(); setError(""); try { const credential = await signInWithEmailAndPassword( getAuth(app), email, password ); const idToken = await credential.user.getIdToken(); await fetch("/api/login", { headers: { Authorization: `Bearer ${idToken}`, }, }); router.push("/"); } catch (e) { setError((e as Error).message); } } return ( Speak thy secret word! Your email setEmail(e.target.value)} id="email" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="name@company.com" required /> Password setPassword(e.target.value)} id="password" placeholder="••••••••" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required /> {error && ( {error} )} Enter Don&apos;t have an account?{" "} Register here

); } Như bạn thấy, nó khá giống với trang đăng ký. Hãy tập trung vào phần quan trọng: async function handleSubmit(event: FormEvent) { event.preventDefault(); setError(""); try { const credential = await signInWithEmailAndPassword( getAuth(app), email, password ); const idToken = await credential.user.getIdToken(); await fetch("/api/login", { headers: { Authorization: `Bearer ${idToken}`, }, }); router.push("/"); } catch (e) { setError((e as Error).message); } } Đó là nơi xảy ra. Chúng tôi sử dụng từ để truy xuất của người dùng. tất cả các phép thuật signInEmailAndPassword firebase/auth idToken Sau đó, chúng tôi gọi điểm cuối do phần mềm trung gian hiển thị. Điểm cuối này cập nhật cookie trình duyệt của chúng tôi bằng thông tin đăng nhập của người dùng. /api/login Cuối cùng, chúng tôi chuyển hướng người dùng đến trang chủ bằng cách gọi router.push("/"); Trang đăng nhập sẽ trông đại khái như thế này Hãy thử nghiệm nó! Truy cập , nhập một số địa chỉ email và mật khẩu ngẫu nhiên để tạo tài khoản. Sử dụng các thông tin đăng nhập đó trong trang . Sau khi nhấp vào , bạn sẽ được chuyển hướng đến http://localhost:3000/register http://localhost:3000/login Enter trang chủ siêu an toàn Cuối cùng chúng ta cũng đã thấy được trang chủ , của ! Nhưng chờ đã! Chúng ta thoát ra bằng cách nào? cá nhân cực kỳ an toàn riêng mình Chúng ta cần thêm nút đăng xuất để không tự khóa mình khỏi thế giới mãi mãi (hoặc 12 ngày). Trước khi bắt đầu, chúng ta cần tạo một có thể đăng xuất chúng ta bằng SDK ứng dụng khách Firebase. thành phần ứng dụng khách Hãy tạo một tệp mới trong ./app/HomePage.tsx "use client"; import { useRouter } from "next/navigation"; import { getAuth, signOut } from "firebase/auth"; import { app } from "../firebase"; interface HomePageProps { email?: string; } export default function HomePage({ email }: HomePageProps) { const router = useRouter(); async function handleLogout() { await signOut(getAuth(app)); await fetch("/api/logout"); router.push("/login"); } return ( Super secure home page Only {email} holds the magic key to this kingdom!

Logout ); } Như bạn có thể nhận thấy, đây là phiên bản được sửa đổi một chút của của chúng tôi. Chúng tôi phải tạo một thành phần máy khách riêng biệt vì chỉ hoạt động bên trong và , trong khi và yêu cầu phải chạy trong ngữ cảnh máy khách. Tôi biết hơi phức tạp một chút, nhưng nó thực sự khá mạnh mẽ. Tôi sẽ giải thích sau. ./app/page.tsx getTokens các thành phần máy chủ trình xử lý tuyến API signOut useRouter Hãy tập trung vào quá trình đăng xuất const router = useRouter(); async function handleLogout() { await signOut(getAuth(app)); await fetch("/api/logout"); router.push("/login"); } Đầu tiên, chúng tôi đăng xuất khỏi SDK khách hàng Firebase. Sau đó, chúng tôi gọi điểm cuối do phần mềm trung gian hiển thị. Chúng tôi kết thúc bằng cách chuyển hướng người dùng đến trang . /api/logout /login Hãy cập nhật trang chủ máy chủ của chúng tôi. Đi tới và dán đoạn sau ./app/page.tsx import { getTokens } from "next-firebase-auth-edge"; import { cookies } from "next/headers"; import { notFound } from "next/navigation"; import { clientConfig, serverConfig } from "../config"; import HomePage from "./HomePage"; export default async function Home() { const tokens = await getTokens(cookies(), { apiKey: clientConfig.apiKey, cookieName: serverConfig.cookieName, cookieSignatureKeys: serverConfig.cookieSignatureKeys, serviceAccount: serverConfig.serviceAccount, }); if (!tokens) { notFound(); } return ; } Giờ đây, thành phần máy chủ của chúng tôi chỉ chịu trách nhiệm tìm nạp mã thông báo của người dùng và chuyển nó xuống thành phần máy khách . Đây thực sự là mô hình khá phổ biến và hữu ích. Home HomePage Hãy kiểm tra điều này: Thì đấy! Bây giờ chúng ta có thể đăng nhập và đăng xuất khỏi ứng dụng theo ý muốn của mình. Điều đó thật hoàn hảo! Hoặc là nó? Khi người dùng chưa được xác thực cố gắng vào trang chủ bằng cách mở chúng tôi hiển thị http://localhost:3000/, 404: Không thể tìm thấy trang này. Ngoài ra, người dùng được xác thực vẫn có thể truy cập trang và mà không cần phải đăng xuất. http://localhost:3000/register http://localhost:3000/login Chúng ta có thể làm tốt hơn. Có vẻ như chúng tôi cần thêm một số logic chuyển hướng. Hãy xác định một số quy tắc: Khi người dùng được xác thực cố gắng truy cập các trang và , chúng ta nên chuyển hướng họ đến /register /login / Khi người dùng chưa được xác thực cố gắng truy cập trang, chúng tôi nên chuyển hướng họ đến / /login Middleware là một trong những cách tốt nhất để xử lý chuyển hướng trong ứng dụng Next.js. May mắn thay, hỗ trợ một số tùy chọn và chức năng trợ giúp để xử lý nhiều tình huống chuyển hướng. authMiddleware Hãy mở tệp và dán phiên bản cập nhật này middleware.ts import { NextRequest, NextResponse } from "next/server"; import { authMiddleware, redirectToHome, redirectToLogin } from "next-firebase-auth-edge"; import { clientConfig, serverConfig } from "./config"; const PUBLIC_PATHS = ['/register', '/login']; export async function middleware(request: NextRequest) { return authMiddleware(request, { loginPath: "/api/login", logoutPath: "/api/logout", apiKey: clientConfig.apiKey, cookieName: serverConfig.cookieName, cookieSignatureKeys: serverConfig.cookieSignatureKeys, cookieSerializeOptions: serverConfig.cookieSerializeOptions, serviceAccount: serverConfig.serviceAccount, handleValidToken: async ({token, decodedToken}, headers) => { if (PUBLIC_PATHS.includes(request.nextUrl.pathname)) { return redirectToHome(request); } return NextResponse.next({ request: { headers } }); }, handleInvalidToken: async (reason) => { console.info('Missing or malformed credentials', {reason}); return redirectToLogin(request, { path: '/login', publicPaths: PUBLIC_PATHS }); }, handleError: async (error) => { console.error('Unhandled authentication error', {error}); return redirectToLogin(request, { path: '/login', publicPaths: PUBLIC_PATHS }); } }); } export const config = { matcher: [ "/", "/((?!_next|api|.*\\.).*)", "/api/login", "/api/logout", ], }; Đó phải là nó. Chúng tôi đã triển khai tất cả các quy tắc chuyển hướng. Hãy phá vỡ điều này. const PUBLIC_PATHS = ['/register', '/login']; handleValidToken: async ({token, decodedToken}, headers) => { if (PUBLIC_PATHS.includes(request.nextUrl.pathname)) { return redirectToHome(request); } return NextResponse.next({ request: { headers } }); }, được gọi khi thông tin xác thực người dùng hợp lệ được đính kèm với yêu cầu, tức là. người dùng được xác thực. Nó được gọi với đối tượng là đối tượng đầu tiên và làm đối số thứ hai. Nó sẽ được giải quyết bằng . handleValidToken tokens Tiêu đề yêu cầu được sửa đổi NextResponse từ là một hàm trợ giúp trả về một đối tượng có thể được đơn giản hóa thành redirectToHome next-firebase-auth-edge NextResponse.redirect(new URL(“/“)) Bằng cách kiểm tra , chúng tôi xác thực xem người dùng được xác thực có cố gắng truy cập trang hoặc hay không và chuyển hướng về trang chủ nếu đúng như vậy. PUBLIC_PATHS.includes(request.nextUrl.pathname) /login /register handleInvalidToken: async (reason) => { console.info('Missing or malformed credentials', {reason}); return redirectToLogin(request, { path: '/login', publicPaths: PUBLIC_PATHS }); }, được gọi khi điều gì đó xảy ra. Một trong những sự kiện được mong đợi này là người dùng nhìn thấy ứng dụng của bạn lần đầu tiên, từ một thiết bị khác hoặc sau khi thông tin xác thực đã hết hạn. handleInvalidToken được mong đợi Biết rằng được gọi cho người dùng chưa được xác thực, chúng ta có thể tiến hành quy tắc thứ hai: handleInvalidToken Khi người dùng chưa được xác thực cố gắng truy cập / trang, chúng ta nên chuyển hướng họ đến /login Vì không có điều kiện nào khác cần đáp ứng nên chúng tôi chỉ trả về kết quả của có thể được đơn giản hóa thành . Nó cũng đảm bảo người dùng không rơi vào vòng lặp chuyển hướng. redirectToLogin NextResponse.redirect(new URL(“/login”)) Cuối cùng, handleError: async (error) => { console.error('Unhandled authentication error', {error}); return redirectToLogin(request, { path: '/login', publicPaths: PUBLIC_PATHS }); } Ngược lại với , được gọi khi có điều gì đó xảy ra và có thể cần được điều tra. Bạn có thể tìm thấy danh sách các lỗi có thể xảy ra cùng với mô tả của chúng trong handleInvalidToken handleError không mong muốn* tài liệu Trong trường hợp có lỗi, chúng tôi ghi lại thông tin này và chuyển hướng người dùng đến trang đăng nhập một cách an toàn * có thể được gọi với lỗi sau khi khóa công khai của Google được cập nhật. handleError INVALID_ARGUMENT Đây là hình thức luân chuyển key và được . mong đợi Xem vấn đề Github này để biết thêm thông tin Bây giờ, thế là xong. Cuối cùng. Hãy đăng xuất khỏi ứng dụng web của chúng tôi và mở . Chúng ta sẽ được chuyển hướng đến trang . http://localhost:3000/ /login Hãy đăng nhập lại và thử nhập . Chúng ta nên được chuyển hướng đến trang. http://localhost:3000/login / Chúng tôi không chỉ cung cấp trải nghiệm người dùng liền mạch. là thư viện chỉ hoạt động trong máy chủ của Ứng dụng và không giới thiệu mã phía máy khách bổ sung. Gói kết quả thực sự là . Đó là những gì tôi gọi là hoàn hảo. next-firebase-auth-edge có kích thước gói bằng 0, tối thiểu Ứng dụng của chúng tôi hiện đã được tích hợp hoàn toàn với Xác thực Firebase cả trong các thành phần Máy chủ và Máy khách. Chúng tôi sẵn sàng phát huy hết tiềm năng của Next.js! Mã nguồn của ứng dụng có thể được tìm thấy trong next-firebase-auth-edge/examples/next-Typescript-minimal Lời kết Trong hướng dẫn này, chúng tôi đã tiến hành tích hợp ứng dụng Next.js mới với Xác thực Firebase. Mặc dù khá rộng rãi nhưng bài viết đã bỏ qua một số phần quan trọng của quy trình xác thực, chẳng hạn như biểu mẫu đặt lại mật khẩu hoặc các phương thức đăng nhập khác ngoài email và mật khẩu. Nếu quan tâm đến thư viện, bạn có thể xem trước . trang demo đầy đủ của next-firebase-auth-edge khởi động Nó có tính , , và hơn thế nữa năng tích hợp Firestore Hành động máy chủ hỗ trợ Kiểm tra ứng dụng Thư viện cung cấp một với rất nhiều ví dụ trang tài liệu chuyên dụng Nếu bạn thích bài viết, tôi sẽ đánh giá cao việc gắn dấu sao cho kho lưu trữ . Chúc mừng! 🎉 next-firebase-auth-edge Phần thưởng – Triển khai ứng dụng lên Vercel Hướng dẫn bổ sung này sẽ hướng dẫn bạn cách triển khai ứng dụng Next.js của bạn lên Vercel Tạo kho lưu trữ git Để có thể triển khai lên Vercel, bạn cần tạo kho lưu trữ cho ứng dụng mới của mình. Đi tới và tạo một kho lưu trữ mới. https://github.com/ đã khởi tạo kho lưu trữ git cục bộ cho chúng tôi, vì vậy bạn chỉ cần truy cập thư mục gốc của dự án và chạy: create-next-app git add --all git commit -m "first commit" git branch -M main git remote add origin git@github.com:path-to-your-new-github-repository.git git push -u origin main Thêm dự án Vercel mới Truy cập và đăng nhập bằng tài khoản Github của bạn https://vercel.com/ Sau khi bạn đăng nhập, hãy truy cập trang Tổng quan của Vercel và nhấp vào Thêm mới > Dự án Nhấp vào bên cạnh kho lưu trữ Github mà chúng tôi vừa tạo. Chưa triển khai. Nhập Trước khi triển khai, chúng tôi cần cung cấp cấu hình dự án. Hãy thêm một số biến môi trường: Hãy nhớ đặt thành , vì Vercel sử dụng HTTPS theo mặc định USE_SECURE_COOKIES true Bây giờ, chúng ta đã sẵn sàng nhấp vào Triển khai Đợi một hoặc hai phút và bạn sẽ có thể truy cập ứng dụng của mình bằng url tương tự như sau: https://next-typescript-minimal-xi.vercel.app/ Xong. Tôi cá là bạn không ngờ nó lại dễ dàng đến vậy. Nếu bạn thích hướng dẫn này, tôi sẽ đánh giá cao việc gắn dấu sao cho kho lưu trữ . next-firebase-auth-edge Bạn cũng có thể cho tôi biết phản hồi của bạn trong phần bình luận. Chúc mừng! 🎉