後端準備好了(不論你用的是 Express + Firebase Admin,還是用 MSW 模擬),接下來的重點就是:
前端要怎麼把 Firebase 拿到的 Token,安全地送去 /auth/verify?
這一節會用最小可用的方式帶你完成三件事情:
假設你已經完成登入(Google / Email 都可以),你可以透過 getIdToken() 拿到目前使用者的 Token:
import { getAuth } from "firebase/auth";
export const getFirebaseToken = async () => {
  const auth = getAuth();
  const user = auth.currentUser;
  if (!user) throw new Error("尚未登入");
  return await user.getIdToken(); // 預設會自動 Refresh Token
};
export const verifyTokenRequest = async (idToken) => {
  const res = await fetch("/auth/verify", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ idToken }),
  });
  if (!res.ok) throw new Error("Token 驗證失敗");
  return await res.json(); // 例如 { uid, email }
};
方便你在登入後、重新整理頁面、或 Protected Route 裡使用:
import { getAuth } from "firebase/auth";
export const useVerifyToken = () => {
  const verifyToken = async () => {
    const auth = getAuth();
    const idToken = await auth.currentUser?.getIdToken();
    if (!idToken) throw new Error("尚未登入或拿不到 Token");
    const res = await fetch("/auth/verify", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ idToken }),
    });
    if (!res.ok) throw new Error("Token 驗證失敗");
    return await res.json(); // 取得 uid / email / claims 等
  };
  return { verifyToken };
};
import { useEffect, useState } from "react";
import { useVerifyToken } from "./hooks/useVerifyToken";
export default function App() {
  const { verifyToken } = useVerifyToken();
  const [userData, setUserData] = useState(null);
  useEffect(() => {
    const checkAuth = async () => {
      try {
        const data = await verifyToken();
        setUserData(data);
      } catch (err) {
        console.log("未登入或 Token 驗證失敗");
      }
    };
    checkAuth();
  }, []);
  return (
    <div>
      {userData ? (
        <p>登入成功!歡迎 {userData.email}</p>
      ) : (
        <p>尚未驗證或未登入</p>
      )}
    </div>
  );
}