로그아웃 시 세션 지우기

현재 우리는 앱의 상태에서만 사용자 세션을 제거하고 있습니다. 하지만 페이지를 새로고침하면 브라우저의 Local Storage(Amplify 사용)에서 사용자 세션을 불러오기 때문에, 사용자가 다시 로그인되는 효과가 발생합니다.

AWS Amplify는 세션을 지우는 데 도움이 되는 Auth.signOut() 메서드를 제공합니다.

src/App.tsx 파일의 handleLogout 함수를 다음과 같이 변경해 보겠습니다:

async function handleLogout() {
  await Auth.signOut();

  userHasAuthenticated(false);
}

이제 브라우저에서 로그아웃한 후 페이지를 새로고침하면 완전히 로그아웃된 상태가 됩니다.

처음부터 로그인 플로우를 다시 시도해 보면, 전체 과정 동안 로그인 페이지에 머무르는 것을 확인할 수 있습니다. 다음으로는 로그인과 로그아웃 후 페이지를 리다이렉트하여 플로우를 더 자연스럽게 만들어 보겠습니다.