Nextauth update함수로 session업데이트

[plmnko]

auth에서 회원정보를 수정하고 session을 업데이트 하려고 update()함수를 사용해봤는데, 아무리 해도 업데이트가 되지 않습니다ㅠㅠ

아래 코드는 제 app/mypage/page.js이구요, layout.js는 같은 폴더에  <SessionProvider>{children}</SessionProvider>로 감싸놓은 상태입니다.

//app/mypage/page.js
"use client";
import axios from "axios";
import { getServerSession } from "next-auth";
import { getCsrfToken, useSession } from "next-auth/react";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";

export default function MyPage() {
  const router = useRouter();
  const { data: session, status, update } = useSession();
  let [myMember, setMyMember] = useState([]);
  const [selectedProfile, setSelectedProfile] = useState(1);
  const [formValues, setFormValues] = useState({
    password: "",
    checkPassword: "",
    currentPassword: "",
    userName: "",
    userNickname: "",
    phoneNumber: "",
    profileNum: "",
  });
  console.log("세션", session);
  const csrfToken = getCsrfToken();
  //console.log("CSRF Token:", csrfToken);

  const handleProfileButtonClick = (value) => {
    setSelectedProfile(value);
  };

  useEffect(() => {
    // 세션 데이터가 로딩 중이거나 없으면 빈값 반환
    if (status === "loading" || !session) {
      return;
    }
    axios.get("https://server.bit-harbor.net/members").then((result) => {
      setMyMember(result.data.data);
    });
  }, [session, status]);

  let findMember = myMember.find((user) => user.email === session.user.email);

  useEffect(() => {
    if (findMember) {
      setFormValues(findMember);
    }
  }, [findMember]);

  const handleInputChange = (e) => {
    const { name, value } = e.target;

    setFormValues((prevFormValues) => ({
      ...prevFormValues,
      [name]: value,
    }));
  };

  const handleMemberInfo = async () => {
    try {
      const response = await axios.post("api/auth/memberUpdate", formValues);

      if (response.status === 200) {
        console.log("세션 업데이트 시도", session);
        console.log("update함수호출");
        // 업데이트 함수를 통해 세션 업데이트 시도
        await update({   <span style="color: #ff0000;"><-이 부분이 업데이트 함수인데 전혀 session이 업데이트 되지 않습니다...</span>
          userNickname: formValues.userNickname,
          userName: formValues.userName,
        });

        window.alert("변경되었습니다.");
        router.refresh();
        router.push("/mypage");
      }
    } catch (error) {
      console.error("회원수정 실패:", error.message);
    }
  };

  if (findMember) {
    return (
      <section className="myPageCon">
        {/* 회원 정보 바꾸기 */}
        <form className="rightCon">
          
          <div className="userUpdate">
            <h4>이름 변경</h4>
            <div className="userChangeInfo">
              <input
                type="text"
                name="userName"
                placeholder={findMember.userName}
                onChange={handleInputChange}
              />
            </div>
          </div>
          <div className="userUpdate">
            <h4>닉네임 변경</h4>
            <div className="userChangeInfo">
              <input
                type="text"
                name="userNickname"
                placeholder={findMember.userNickname}
                onChange={(e) => {
                  setFormValues((prevFormValues) => ({
                    ...prevFormValues,
                    userNickname: e.target.value,
                  }));
                }}
              />
            </div>{/*...생략*/}

그다음에 아래 코드는 [...nextauth].js입니다.

import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import axios from "axios";
import { membersData } from "@/util/db_member";

export const authOptions = {
  providers: [
    CredentialsProvider({
      credentials: {
        email: { label: "email", type: "email" },
        password: { label: "password", type: "password" },
      },
      authorize: async (credentials, req) => {
        const { email, password } = credentials;

        try {
          // 서버에 인증 요청을 보냄
          const response = await axios.post(
            "https://server.bit-harbor.net/members/login",
            {
              email,
              password,
            }
          );
          const authorization = response.headers.get("authorization");
          const refresh = response.headers.get("refresh");

          // console.log("authorization : ", authorization);
          // console.log("refresh : ", refresh);

          let db = await membersData();
          let findUser = db.find(
            (member) => member.email === credentials.email
          );
          //console.log("findUser : ", findUser);
          if (!findUser) {
            console.log("해당 이메일은 없음");
            return null;
          }

          if (findUser) {
            const user = {
              id: findUser.memberId,
              name: findUser.userName,
              userNickname: findUser.userNickname,
              email: findUser.email,
              memberId: findUser.memberId,
              authorization: authorization,
              refresh: refresh,
            };
            //console.log("찾은회원", user);
            return user;
          } else {
            return null;
          }
        } catch (error) {
          console.error("로그인 오류:", error);
          return Promise.resolve(null);
        }
      },
    }),
  ],
  session: {
    strategy: "jwt",
    maxAge: 30 * 24 * 60 * 60, //30일
  },
  callbacks: {
    jwt: async ({ token, trigger, user, session }) => {
      if (user) {
        token.user = {};
        token.user.name = user.name;
        token.user.userNickname = user.userNickname;
        token.user.email = user.email;
        token.user.memberId = user.memberId;
        token.user.authorization = user.authorization;
        token.user.refresh = user.refresh;
      }

      if (trigger === "update" && session.name) { <span style="color: #ff0000;"><- 이 부분도 console이 안찍히는거 보니, 실행이 안되는것같습니다.</span>
        // 클라이언트에서 보낸 변경된 회원 정보를 세션에 반영
        token.user.userNickname = session.userNickname;
        token.user.userName = session.userName;

        console.log("회원", token);
        console.log("trigger", trigger);
        console.log("session", session);
      }
      return token;
    },
    session: async ({ session, token }) => {
      session.user = token.user;
      return session;
    },
  },

  secret: process.env.NEXTAUTH_SECRET,
  pages: {
    signIn: "/members",
  },
};

export default NextAuth(authOptions);

그리고 다음 코드는 api/auth/memberUpdate.js서버입니다.

import { getServerSession } from "next-auth";
import { authOptions } from "../auth/[...nextauth]";

export default async function handler(req, res) {
  let session = await getServerSession(req, res, authOptions);

  if (req.method === "POST") {
    let memberId = req.body.memberId;
    let member = {
      password: req.body.password,
      checkPassword: req.body.checkPassword,
      currentPassword: req.body.currentPassword,
      userName: req.body.userName,
      userNickname: req.body.userNickname,
      phoneNumber: req.body.phoneNumber,
      profileNum: req.body.profileNum,
    };

    let changeInfo = JSON.stringify(member);

    try {
      const result = await fetch(
        `https://server.bit-harbor.net/members/${memberId}`,
        {
          method: "PATCH",
          headers: {
            "Content-Type": "application/json",
            Authorization: session.user.authorization,
          },
          mode: "cors",
          body: changeInfo,
        }
      );

      if (!result.ok) {
        const errorText = await result.text();
        console.error("API 응답 에러:", errorText);
        return res.status(result.status).json(errorText);
      }

      // 응답 데이터 확인
      const responseData = await result.json();

      console.log("데이터", responseData.data);
      // 응답이 비어 있다면 에러 처리
      if (!responseData) {
        console.error("API 응답 에러: 서버에서 유효한 JSON을 반환하지 않음1");
        return res.status(500).json("서버 오류");
      }
     

      res.status(200).json({ sessionUpdateComplete: true });
    } catch (error) {
      console.error("서버 오류:", error);
      res.status(500).json("서버 오류");
    }
  }
}

update함수가 왜 session을 업데이트 해주지 않는걸까요?ㅠㅠ 공식문서에 나온대로 그대로 해보고
구글링을 아무리 해봐도 답이 나오지 않습니다ㅠㅠ 도와주세요

[codingapple]

update 밑에 있는 router.어쩌구는 다 지우고 테스트해봅시다

[plmnko]

router다 지우고 다시 테스트해보니  콘솔창에

[next-auth][error][CLIENT_FETCH_ERROR] 
https://next-auth.js.org/errors#client_fetch_error Failed to fetch {error: {…}, url: '/api/auth/csrf', message: 'Failed to fetch'}
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

Navigated to http://localhost:3000/mypage?userName=%EA%B9%80%EB%95%A1%EB%95%A1&userNickname=%EA%B4%80%EB%A6%AC%EC%9E%90&currentPassword=&password=&checkPassword=

라고 오류가 뜨는데 '/api/auth/csrf',가 뭔가요??ㅠㅠ 저는 저런 api를 만든적이 없는데....
그리고 주소창에 바꾼 회원정보가 그대로 뜨는데요,,,, Navigated to는 왜 생기는걸까요?ㅠ

[codingapple]

form태그 지워보거나 폼전송안되게해놓고 테스트해봅시다

[글쓴이]

글