Invalid two factor cookie

"use client";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { authClient } from "@/lib/auth-client";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { toast } from "sonner";

export default function Page() {
    const router = useRouter();
    const [code, setCode] = useState("");
    const [isPending, setIsPending] = useState(false);

    const handleVerify = async () => {
        setIsPending(true);
        const { data, error } = await authClient.twoFactor.verifyTotp({
            code,
        });

        if (error) {
            console.error("認証エラー:", error);
            toast.error("認証に失敗しました: ", { description: error.message });
        }

        if (data) {
            toast.success("認証に成功しました");
            router.push("/");
        }

        setIsPending(false);
    };

    return (
        <div className="w-96 h-auto flex flex-col gap-2 bg-zinc-950 border rounded p-4">
            <div className="text-xl font-black">2段階認証</div>
            <Input
                type="text"
                placeholder="TOTP コード"
                value={code}
                onChange={(e) => setCode(e.target.value)}
                disabled={isPending}
            />
            <Button onClick={handleVerify} disabled={isPending}>
                {isPending ? "認証中..." : "認証する"}
            </Button>
        </div>
    );
}