AWS Cognito로 로그인하기
AWS Cognito로 로그인하기
AWS Amplify를 사용해 Amazon Cognito 설정에 로그인할 것입니다. 먼저 Amplify를 불러오겠습니다.
Amazon Cognito 로그인
로그인 코드 자체는 비교적 간단합니다.
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));
}
}
}
그리고 src/containers/Login.tsx
파일 상단에 Auth
를 임포트하세요.
import { Auth } from "aws-amplify";
여기서 주목할 두 가지 작업을 수행합니다.
-
email
과password
를 가져와 Amplify의Auth.signIn()
메서드를 호출합니다. 이 메서드는 사용자를 비동기적으로 로그인하기 때문에 Promise를 반환합니다. -
await
키워드를 사용해 Promise를 반환하는Auth.signIn()
메서드를 호출합니다. 그리고handleSubmit
메서드를async
로 표시해야 합니다.
이제 Cognito 테스트 사용자 생성 챕터에서 생성한 admin@example.com
사용자로 로그인을 시도하면, 브라우저에서 로그인 성공 알림을 확인할 수 있습니다.
다음으로, 앱에서 로그인 상태를 저장하는 방법을 살펴보겠습니다.
For help and discussion
Comments on this chapter