문제
next-auth 라이브러리를 사용해 구글 로그인 구현 중 useSession 훅을 통해 세션 값을 받는 과정에서 세션의 user 값을 제대로 받아오지 못하는 문제가 발생했다.
auth/[...nextauth]/route.ts 파일 callbacks 옵션에서 소셜 로그인을 한 사용자 이메일의 @ 앞부분을 username으로 추가해서 session을 넘겨주도록 했다.
다른 페이지에서 useSession으로 세션을 받아와서 콘솔 찍어보면 username까지 잘 출력됐지만
아래 코드에서 username 값에 접근하려고 하니 타입 에러가 떴다..
위 타입에 맞지 않는다고 빨간 줄이 떴다.
해결
확인해본 결과, DefaultSession 인터페이스에서 정의된 속성들은 다음과 같았다.
callbacks 옵션에서 새 속성을 추가하여 session을 반환해주는 것 자체는 문제 없지만, session user의 기본 설정된 타입까지 갱신해줘야 타입 에러가 발생하지 않는다.
기존 세션의 user 속성은 유지하고 새 속성을 추가하고 싶다면
아래와 같이 인터페이스를 확장하여 새로 선언해준다.
공식문서
https://next-auth.js.org/getting-started/typescript#module-augmentation
