後端準備好了（不論你用的是 Express + Firebase Admin，還是用 MSW 模擬），接下來的重點就是：

前端要怎麼把 Firebase 拿到的 Token，安全地送去 /auth/verify？

這一節會用最小可用的方式帶你完成三件事情：

1. 從 Firebase SDK 取得 idToken
2. 把 Token 丟給 /auth/verify
3. 用 Hook 包起來，未來在任何頁面都能呼叫

從 Firebase 拿到 idToken

假設你已經完成登入（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
};

發送到 /auth/verify（Express 或 MSW 都適用）

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 }
};

打包成 Hook

方便你在登入後、重新整理頁面、或 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 };
};

在 React 內部實際使用

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>
  );
}