NextAuth에서 session 업데이트

로그인 구현까지는 글이 많아서 어렵지 않았으나 session 정보를 업데이트에 대한 것은 적었다.

그래서 한번 적어보는 session 정보 업데이트.

이번에도 둘러볼 것은 역시나 NextAuth 공식문서이다.

session 정보 업데이트 순서는 아래와 같다.

useSession의 update로 세션 업데이트 및 트리거 발생
authConfig에서 update 트리거에 따른 jwt 재설정
업데이트 후 페이지 새로고침

그럼 코드를 먼저 보자.

1. Session 업데이트

일단 공식 문서에 있는 예제는 아래와 같다.

import { useSession } from "next-auth/react";

export default function Page() {
  const { data: session, status, update } = useSession();

  if (status === "authenticated") {
    return (
      <>
        <p>Signed in as {session.user.name}</p>
        // 업데이트 값을 서버 측으로 전송
        <button onClick={() => update({ name: "John Doe" })}>Edit name</button>
        // 서버측에서 이미 값을 업데이트 했다고 하고 가정. 트리거만 실행 // 모든
        `useSession().data` 가 업데이트.
        <button onClick={() => update()}>Edit name</button>
      </>
    );
  }

  return <a href="/api/auth/signin">Sign in</a>;
}

그냥 간단하게 하고 싶다면 update에 파라미터로 객체를 넣어주면 된다.

내 홈페이지에도 한번 적용해 보았다.

필요없는 코드들은 간략하게 줄이고 주석을 달아 넣어보았다.

"use client";

import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";

export default function Profile() {
  const router = useRouter();
  const { update } = useSession();

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();

    // 폼 데이터를 만들고 데이터 주입
    const formData = new FormData();
    formData.append("nickName", value);

    // api fetch를 통해 백앤드 업데이트
    const res = await fetch("/api/editProfile", {
      method: "POST",
      body: formData,
    });
    const resJson = await res.json();

    // 성공할 경우 update로 session 업데이트 및 트리거 실행
    if (resJson.success === "success") {
      // 데이터를 객체 구조로 만들고 업데이트 함.
      const updateObj: Record<string, string | boolean> = {};
      userInputTable.forEach((each: userInputTableObj) => {
        updateObj[each.name] = each.value as string;
      });

      // 업데이트 기다린 후 새록침 하려고 await
      await update(updateObj);

      // 세선 업데이트로 navbar 업데이트를 위한 새로고침
      router.refresh();
    }
  }
  return (
    <form onSubmit={(e) => handleSubmit(e)}>
      <input
        // userInput.value는 대충 useState로 설정한것
        value={userInput.value}
        onChange={(e) => handleChange(e)}
      />
        <button type="submit">가입</button>
    </form>
  );
}

핵심은 update로 객체로 session 정보를 업데이트 하는 것이다.

이제 업데이트 된 session으로 토큰을 갱신하자.

2. AuthOptions

공식문서에는 대충 아래처럼 되어 있다.

NextAuth의 파라미터 중 callbacks로 jwt 옵션을 준다.

update 트리거 발생하고 session.name이 있다면 토큰을 업데이트 한다.

...
export default NextAuth({
  // 중략 ...
  callbacks: {
    jwt({ token, trigger, session }) {
        // 세션은 임의의 객체일 수 있으므로 검증이 필요함.
      if (trigger === "update" && session?.name) {
        token.name = session.name
      }
      return token
    }
  }
})