인증 UX 개선 루프

로그인 버튼 인증 흐름

signInsignOut은 단순 클릭 핸들러가 아니라 세션 상태와 리다이렉트 결과를 함께 설계하는 진입점입니다.

1 상태 확인

useSession()

로딩, 인증됨, 미인증 상태를 나누어 버튼과 안내 문구를 결정합니다.

2 액션 호출

signIn 또는 signOut

Provider ID와 옵션을 명시해 예측 가능한 인증 흐름을 만듭니다.

3 화면 이동

callbackUrl

로그인 후 돌아올 페이지와 로그아웃 후 공개 경로를 분리합니다.

4 보호 확인

서버 라우트 검사

버튼 표시와 별개로 민감한 페이지는 서버에서 다시 세션을 확인합니다.

테스트할 사용자 경험

새로고침 후에도 세션 UI가 올바르게 유지되는가 로그아웃 뒤 보호 페이지에 남아 있지 않는가 인증 실패나 취소 후 사용자가 다음 행동을 알 수 있는가