로그인 및 로그아웃 시 리다이렉트

로그인 플로우를 완성하려면 두 가지 작업이 더 필요합니다.

1. 사용자가 로그인한 후 홈페이지로 리다이렉트합니다.
2. 사용자가 로그아웃한 후 로그인 페이지로 다시 리다이렉트합니다.

React Router에서 제공하는 useNavigate 훅을 사용할 것입니다. 이를 통해 브라우저의 History API를 활용할 수 있습니다.

로그인 후 홈으로 리다이렉트하기

먼저, src/containers/Login.tsx 파일 상단에서 useNavigate 훅을 초기화합니다.

const nav = useNavigate();

이 코드를 export default function Login() { 줄 아래에 추가해야 합니다.

그런 다음 src/containers/Login.tsx 파일의 handleSubmit 메서드를 다음과 같이 업데이트합니다.

async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
  event.preventDefault();

  try {
    await Auth.signIn(email, password);
    userHasAuthenticated(true);
    nav("/");
  } catch (error) {
    if (error instanceof Error) {
      alert(error.message);
    } else {
      alert(String(error));
    }
  }
}

또한, src/containers/Login.tsx 파일 헤더에서 React Router의 useNavigate를 임포트합니다.

import { useNavigate } from "react-router-dom";

이제 브라우저에서 로그인을 시도하면, 로그인 후 홈페이지로 리다이렉트됩니다.

로그아웃 후 로그인 페이지로 리다이렉트

이제 로그아웃 과정에서 비슷한 작업을 진행해 보겠습니다.

src/App.tsx 파일의 App 컴포넌트 시작 부분에 useNavigate 훅을 추가합니다.

const nav = useNavigate();

src/App.tsx 파일의 헤더 부분에서 React Router의 useNavigate를 임포트합니다.

import { useNavigate } from "react-router-dom";

src/App.tsx 파일의 handleLogout 함수 하단에 다음 코드를 추가합니다.

nav("/login");

이제 handleLogout 함수는 다음과 같이 보일 것입니다.

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

  userHasAuthenticated(false);

  nav("/login");
}

이렇게 하면 사용자가 로그아웃하면 로그인 페이지로 리다이렉트됩니다.

이제 브라우저로 이동해 로그아웃을 시도하면 로그인 페이지로 리다이렉트되는 것을 확인할 수 있습니다.

이 과정을 테스트하면서 로그인 호출에 약간의 지연이 있어 사용자에게 진행 중임을 알려줄 필요가 있다는 것을 눈치챘을 것입니다. 또한 Auth 패키지가 던질 수 있는 오류를 제대로 처리하지 않고 있습니다. 다음으로 이 부분을 살펴보겠습니다.