NextAuth UI 흐름

signIn, signOut, 세션 갱신, 보호 UI 흐름

로그인 버튼 구현은 signIn 호출만이 아니라 provider 선택, callback URL, 세션 갱신, 오류 처리, 보호 UI 상태 전환까지 포함합니다.

01

상태 확인

useSession 또는 서버 세션으로 현재 인증 상태와 로딩 여부를 분리합니다.

session
02

signIn 호출

provider, callbackUrl, redirect 옵션을 명확히 넘겨 인증 흐름을 시작합니다.

signIn
03

Callback 처리

인증 제공자에서 돌아온 뒤 세션 쿠키와 사용자 정보를 갱신합니다.

callback
04

UI 전환

로그인 전/후 버튼, 사용자 메뉴, 보호 콘텐츠의 표시 기준을 통일합니다.

render
05

signOut 처리

로그아웃 후 캐시된 사용자 데이터와 보호 페이지 접근을 정리합니다.

signOut
loading
세션 판정 중 보호 콘텐츠를 먼저 보여주지 말고 스켈레톤이나 대기 상태로 둡니다.
깜빡임 방지
authenticated
사용자 확인됨 사용자 메뉴와 로그아웃 동작을 제공하고 서버 권한 검사는 별도로 둡니다.
권한과 인증 분리
unauthenticated
로그인 필요 로그인 버튼에 callbackUrl을 붙여 인증 후 사용자가 처음 요청한 경로로 돌아가게 합니다.
redirect 유지

인증 UI 확인 기준

오류 표시 provider 오류, 취소, callback 실패를 모두 같은 무반응 상태로 두지 않습니다.
루프 방지 로그인 페이지 자체가 보호 middleware에 걸려 반복 이동하지 않게 합니다.
서버 재확인 클라이언트 UI가 로그인 상태여도 API와 서버 컴포넌트는 세션을 다시 확인합니다.