문제

{
  user: {
    name: string
    email: string
    image: string
  },
  expires: Date // This is the expiry of the session, not any of the tokens within the session
}

• 마이페이지에 유저가 로그인 시 이용한 provider(ex. kakao)에 따라 아이콘을 생성해야 하는데 NextAuth.js에서 제공하는 useSession Hook을 이용해서 조회 가능한 session 정보에는 provier 요소가 없다.

해결

• pages/api/auth/[...nextauth].js 에 서버를 만들어서 로그인 과정을 처리하는데 이 파일에서 callbacks라는 비동기 함수를 이용해서 session에 유저의 정보를 추가할 수 있다.

async jwt({ user, token, account }) {
  if (user && account) {
    token = { ...token, provider: account.provider };
  }
  return token;
},

1. JWT callback의 파라미터 중 account에서 provider 정보를 제공하는데 이 정보를 token에 key를 하나 추가한 후 이 token을 반환한다.

async session({ session, token }: any) {
  if (session.user && token) {
    session.user = { ...session.user, provider: token.provider };
  }
  return session;
},

1. Session callback이 위에서 반환한 token을 받는데 token.provider를 다시 session.user에 provider라는 ket를 추가해서 넣어준다. 여기서 반환하는 session이 useSession Hook으로 조회 가능한 session 정보에 담기게 된다.

1. pages/api/auth/[...nextauth].js에 JWT callback와 Session callback를 추가한 후에 session을 콘솔로 다시 찍어 보면 기존 정보에 provider 요소가 추가된 것을 확인할 수 있다!

• pages/api/auth/[...nextauth].js 전체 코드 확인하기

유저 DB 정보 추가 수정