NextAuth에서 session 업데이트

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

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

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

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

1. useSession의 update로 세션 업데이트 및 트리거 발생

2. authConfig에서 update 트리거에 따른 jwt 재설정

3. 업데이트 후 페이지 새로고침

그럼 코드를 먼저 보자.

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

이건 뭐 거의 바꿀게 없어서 그대로 적용했다.

이렇게 하고나면 세션이 업데이트는 끝이다.

3. 테스트하기

이제 로그인 후 프로필 닉네임을 변경하면서 테스트해보자.

닉네임을 바꿔가며 SSR로 구현했던 navbar의 프로필이 잘 변경되는지 확인해보았다.

잘 되는것 같다.

4. 후기

생각보다 세션 업데이트는 쉽게 구현되었다.

검색도 많이했지만, 결국에는 돌고 돌아 공식문서였다.

뭔가 잘 안되면 먼저 공식문서를 꼼꼼히 읽어보길 권해본다.