[Next.JS] Next-Auth 세션 관리

Next.js에서는 next-auth 라이브러리를 통해 사용자 인증 및 세션 관리가 가능하다.
회사에서 React와 Next.js를 이용한 개발 업무를 맡아 진행하면서 알게 된 사실을 적어보려고 한다.

useSession()

// session 사용을 위한 라이브러리
import { useSession } from "next-auth/react"

// session 사용해보기
export default function Component() {
  const { data: session, status } = useSession()

  if (status === "authenticated") {
    return <p>Signed in as {session.user.email}</p>
  }

  return <a href="/api/auth/signin">Sign in</a>
}

useSession() 함수를 통해 session에 저장 된 값들을 읽어올 수 있다.
useSession()는 data와 status를 반환한다.

• data: Session/undefined/null
  • 세션을 가져오지 못한 경우, undefined
  • 세션 검색에 실패한 경우, null
  • 성공한 경우, Session
• status: loading/authenticated/unauthenticated

❓ useSession()을 통해 session 값을 가져왔는데, undefined가 표시되는 경우
session.status 값이 loading일 가능성이 있다. 내 경우가 그랬다.
해결 방법은 다음과 같다.
1. session이 undefined가 아닐 때까지 기다린다.

if (!session) {
      return;
}

2. useEffect()와 useState()를 이용해 세션 상태값에 변화가 있으면 dataLoaded를 확인하여 특정 함수를 실행한다.(아래 코드는 session.state가 authenticated일 때 한번만 실행되도록 하였다.)

const [dataLoaded, setDataLoaded] = useState(false);
useEffect(() => {
    if (!dataLoaded){ 
      	if (session.status == 'authenticated'){
        	setDataLoaded(true);
      	}
    }
  }, [session.status, dataLoaded]);

최종 코드는 아래와 같다.

const [dataLoaded, setDataLoaded] = useState(false);
useEffect(() => {
  	if (!session) {
    	return;
	}
    if (!dataLoaded){ 
      	// 여기서 원하는 로직을 실행한다.
        // 코드들..
      	if (session.status == 'authenticated'){
      		setDataLoaded(true);
      	}
    }
  }, [session.status, dataLoaded]);

세션 관리 설정

NextAuth.js의 api/auth/[...nextauth].js 파일 내에서 session 옵션을 설정한다.

maxAge

• 세션이 만료되는 최대 시간을 정의한다.(사용자가 로그인한 후, 세션이 만료되기까지의 시간 설정)
• 초 단위로 지정하며, 기본값은 30일(2592000초)이다.

session: {
  maxAge: 24 * 60 * 60, // 1 day
}

updateAge

• 세션이 자동으로 갱신되는 주기를 정의한다.(사용자가 활동을 할 때마다 세션이 자동으로 연장된다)
• 초 단위로 지정하며, 기본값은 1일(86400초)이다.

session: {
  updateAge: 60 * 60, // 1 hour
}

pages

• 세션 만료 시 자동으로 리다이렉션할 수 있다.

pages: {
    signIn: '/auth/signin', // 로그인 페이지로 이동
}

[참고💡]클라이언트 단에서 세션 정보를 확인하고 싶다면

• /api/auth/session으로 접속하여 확인할 수 있다.
• expires 부분을 보면 세션 만료 시각을 확인 할 수 있다.