Blog

블로그를 준비하고 있어요

잠시만 기다려주세요...

NextAuth에서 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>;
}

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

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

Blog

목차

NextAuth에서 session 업데이트

1. Session 업데이트

2. AuthOptions

3. 테스트하기

4. 후기