Auth UI

로그인 UI 세션 흐름

버튼 클릭만 보지 않고 세션 상태와 보호 페이지 접근이 같은 흐름으로 이어지는지 확인합니다.

로그인 진입

provider 인증 시작

GitHub, Google 같은 provider별 버튼을 분리하고 돌아올 callback URL과 실패 메시지 위치를 미리 정합니다.

세션 상태

useSession 화면 분기

loading, authenticated, unauthenticated를 나눠 버튼, 사용자 이름, 대체 화면이 엇갈리지 않게 합니다.

로그아웃 동작

signOut() 이동 처리

세션 종료 뒤 공개 화면이나 로그인 화면으로 보내고, 남은 사용자 데이터를 화면에서 제거합니다.

접근 제어

보호 페이지 서버 방어

로그인 전 접근은 서버 보호 로직으로 막고 인증 후에만 개인 데이터를 렌더링합니다.

서버 보호

화면 조건부 렌더링과 서버 보호를 분리합니다

클라이언트 버튼 표시는 사용자 경험이고 실제 접근 제한은 서버 컴포넌트나 미들웨어에서 다시 다룹니다.

상태별 연결

useSession로딩 중에는 skeleton이나 disabled 상태를 두고, 인증 완료 후에만 사용자 메뉴를 엽니다.
signOut()로그아웃 요청 뒤 캐시된 프로필 표시와 개인 화면 접근을 같이 끊습니다.
보호 페이지화면 렌더 조건과 별개로 서버에서 개인 데이터 반환을 한 번 더 막습니다.