JWT auth error invalid token

이메일 입력 후 contitnue 버튼을 누르면 JWT auth error invalid token 오류가 나네요. 몇시간째 보고 있는데 원인을 찾지 못하겠네요. 전체 소스 코드를 같이 첨부하고 싶은데 할 수 가 없네요. 일단은 EmailInfoForm 소스만 올려 봅니다.

backend는 .env 빼고 소스를 특별하게 수정한 부분이 없습니다.

브라우저 application 데이터도 클리어 해보고 했지만 소용이 없네요. 확인 부탁드립니다.

"use client";

import {useState} from "react";
import {MailIcon} from "../ui/Icons";
import {validateEmail} from "@/lib/validation";
import clientApi from "@/lib/api/clientApi";
import {useRouter, useSearchParams} from "next/navigation";

export default function EmailInfoForm() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const accessToken = searchParams.get("access_token") ?? "";
  const [email, setEmail] = useState("");
  const [error, setError] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);
  const handleFormSubmit = async (e: React.SubmitEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (isSubmitting) return;

    setError("");
    //이메일 검증
    const validationError = validateEmail(email);

    if (validationError) {
      setError(validationError);
      return;
    }

    //확인 대화 상자
    const confirmed = window.confirm(
      "한 번 입력한 이메일은 변경할 수 없습니다. 이 이메일로 저장할까요?",
    );

    if (!confirmed) return;

    setIsSubmitting(true);

    try {
      const res = await clientApi("/auth/update-email", {
        method: "PATCH",
        body: JSON.stringify({email: email.trim()}),
        headers: {
          Authorization: `Bearer ${accessToken}`,
        },
      });

      if (!res.ok) {
        const errorData = await res.json().catch(() => null);
        throw new Error(
          (errorData && errorData.error) || "이메일 업데이트에 실패하였습니다.",
        );
      }

      router.replace("/");
      router.refresh();
    } catch (e) {
      setError(
        e instanceof Error ? e.message : "이메일 업데이트에 실패하였습니다.",
      );
    }
  };

  return (
    <>
      <form className="flex flex-col gap-5" onSubmit={handleFormSubmit}>
        <div className="flex flex-col gap-2">
          <label
            htmlFor="email"
            className="text-sm font-medium text-foreground"
          >
            Email Address
          </label>
          <div className="relative">
            <MailIcon className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
            <input
              id="email"
              type="email"
              placeholder="Enter your email"
              className="h-11 w-full rounded-lg border-none bg-secondary pl-10 pr-4 text-sm text-foreground placeholder-muted-foreground outline-none focus:ring-2 focus:ring-primary"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
          </div>
        </div>

        {error && (
          <p className="text-sm font-medium text-destructive">{error}</p>
        )}

        <div className="grid grid-cols-2 gap-3">
          <button
            type="button"
            className="h-11 rounded-lg bg-secondary text-sm font-medium text-secondary-foreground transition-colors hover:opacity-90"
          >
            Cancel
          </button>
          <button
            type="submit"
            className="h-11 rounded-lg bg-primary text-sm font-medium text-primary-foreground transition-colors hover:opacity-90"
          >
            Continue
          </button>
        </div>
      </form>
    </>
  );
}

redirect(`/login/email-info?access_token=${access_token}}`);