AWS Cognito로 로그인하기

AWS Amplify를 사용해 Amazon Cognito 설정에 로그인할 것입니다. 먼저 Amplify를 불러오겠습니다.

Amazon Cognito 로그인

로그인 코드 자체는 비교적 간단합니다.

Change indicator src/containers/Login.tsx 파일의 handleSubmit 메서드를 다음 코드로 교체하세요.

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

    try {
        await Auth.signIn(email, password);
        alert("로그인 성공");
    } catch (error) {
        // 전체 오류 출력
        console.error(error);
        if (error instanceof Error) {
            alert(error.message);
        } else {
            alert(String(error));
        }
    }
}

Change indicator 그리고 src/containers/Login.tsx 파일 상단에 Auth를 임포트하세요.

import { Auth } from "aws-amplify";

여기서 주목할 두 가지 작업을 수행합니다.

  1. emailpassword를 가져와 Amplify의 Auth.signIn() 메서드를 호출합니다. 이 메서드는 사용자를 비동기적으로 로그인하기 때문에 Promise를 반환합니다.

  2. await 키워드를 사용해 Promise를 반환하는 Auth.signIn() 메서드를 호출합니다. 그리고 handleSubmit 메서드를 async로 표시해야 합니다.

이제 Cognito 테스트 사용자 생성 챕터에서 생성한 admin@example.com 사용자로 로그인을 시도하면, 브라우저에서 로그인 성공 알림을 확인할 수 있습니다.

로그인 성공 스크린샷

다음으로, 앱에서 로그인 상태를 저장하는 방법을 살펴보겠습니다.