[Next Auth] - Reload Session Client-side

Next-Auth

⚙️ tested ver: 4.5.0

• 해당next-auth 버젼에서 클라이언트 사이드에서 session 정보를 업데이트 해야 되는 케이스가 있었다
• 회원가입 이후 이메일로 인증코드를 받고 session 토큰 의 값 email_verified (boolean) 을 업데이트 해야 한다
• session을 업데이트하기 위해서는 해당 엔드포인트를 요청

  /*
   * 업데이트 된 토큰값을 반환
   */
  const res = await fetch('/api/auth/session?update')
  const jwt = await res.json()

• ❗️하지만 server-side에서만 업데이트가 되어있고 useSession getSession 을 통해 가져온 session은 업데이트가 되어있지 않은 것을 확인할 수 있다

const { data: session } = useSession()
// session: {
// 	...
//	email_verified: true
// }
const res = await fetch('/api/auth/session?update')
const jwt = await res.json()
const jwt = await res.json()
// jwt: {
// 	...
//	email_verified: true
// }

---

Solution

• 이를 업데이트하기 위해서는 session을 업데이트 하는 조건을 맞춰줘야 한다
• 해당 버젼에서는 공식적으로 업데이트 할 수 있는 방법을 문서에서 알려주지 않기 때문에 편법을 사용해야 한다

Conditions:
1. 새로고침을 했을 때
2. 다른 탭을 클릭하고 다시 해당 탭을 다시 접근

1. 새로고침

• 업데이트 된 값을 확인 후 페이지를 새로고침하거나 원하는 페이지로 리디렉션 하는 방식으로 처리
• next/router를 사용하게되면 새로고침 없이 페이지 전환이 되기때문에 session이 업데이트 되지 않는다

const res = await fetch('/api/auth/session?update')
const jwt = await res.json()

if (jwt.email_verified) {
  const redirect = someCallbackUrl    
  window.location.href = someCallbackUrl
}

2. 다른 탭을 클릭하고 다시 해당 탭을 다시 접근

• visibilitychange이벤트를 강제로 실행하는 helper 함수를 만들어 사용
• 페이지를 전체 새로고침 하지 않고 session을 업데이트 할 수 있다

export const reloadSession = async () => {
  const res = await fetch('/api/auth/session?update')
  const jwt = await res.json()
  const event = new Event('visibilitychange')
  document.dispatchEvent(event)
}

참고: Next-auth - How to update the session client side?