AWS Cognito로 회원가입 구현하기

이제 handleSubmit과 handleConfirmationSubmit 함수를 구현하고 AWS Cognito 설정과 연결해 보겠습니다.

Change indicator src/containers/Signup.tsx 파일의 handleSubmit과 handleConfirmationSubmit 함수를 다음 코드로 교체하세요.

async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
  event.preventDefault();
  setIsLoading(true);
  try {
    const newUser = await Auth.signUp({
      username: fields.email,
      password: fields.password,
    });
    setIsLoading(false);
    setNewUser(newUser);
  } catch (e) {
    onError(e);
    setIsLoading(false);
  }
}

async function handleConfirmationSubmit(
  event: React.FormEvent<HTMLFormElement>
) {
  event.preventDefault();
  setIsLoading(true);
  try {
    await Auth.confirmSignUp(fields.email, fields.confirmationCode);
    await Auth.signIn(fields.email, fields.password);
    userHasAuthenticated(true);
    nav("/");
  } catch (e) {
    onError(e);
    setIsLoading(false);
  }
}

Change indicator Amplify의 Auth, onError, 그리고 ISignUpResult 타입을 헤더에 추가하세요.

import { Auth } from "aws-amplify";
import { onError } from "../lib/errorLib";
import { ISignUpResult } from "amazon-cognito-identity-js";

새 사용자 객체에 적절한 타입을 사용하겠습니다.

Change indicator const [newUser, setNewUser] 라인을 다음 코드로 교체하세요.

const [newUser, setNewUser] = useState<null | ISignUpResult>(null);

npm 패키지를 설치합니다.

Change indicator packages/frontend/ 디렉토리에서 다음 명령어를 실행하세요.

$ npm install amazon-cognito-identity-js

여기서의 흐름은 매우 간단합니다:

handleSubmit에서 Auth.signUp()을 호출하여 사용자를 회원가입시킵니다. 이는 새로운 사용자 객체를 생성합니다.
setNewUser를 사용하여 해당 사용자 객체를 상태에 저장합니다.
handleConfirmationSubmit에서 확인 코드를 사용하여 Auth.confirmSignUp()으로 사용자를 확인합니다.
사용자가 확인되면, Cognito는 이제 앱에 로그인할 수 있는 새로운 사용자가 있음을 인지합니다.
로그인 페이지에서와 동일한 방식으로 이메일과 비밀번호를 사용하여 인증합니다. Auth.signIn()을 호출합니다.
userHasAuthenticated 함수를 사용하여 앱의 컨텍스트를 업데이트합니다.
마지막으로 홈페이지로 리디렉션합니다.

이제 브라우저로 전환하여 새 계정을 등록해 보면, 회원가입이 성공적으로 완료된 후 홈페이지로 리디렉션되는 것을 확인할 수 있습니다.

회원가입 후 홈페이지 리디렉션 스크린샷

여기서 회원가입 흐름에 대해 간단히 설명하겠습니다. 사용자가 확인 단계에서 페이지를 새로고침하면, 다시 돌아가서 계정을 확인할 수 없습니다. 이 경우 새로운 계정을 생성해야 합니다. 우리는 의도적으로 간단하게 유지했지만, 이를 해결하는 몇 가지 힌트를 제공하겠습니다.

handleSubmit 함수의 catch 블록에서 UsernameExistsException을 확인하세요.
사용자가 이전에 확인되지 않은 경우 Auth.resendSignUp() 메서드를 사용하여 코드를 다시 보내세요. Amplify API 문서를 참조하세요.
이전과 동일한 방식으로 코드를 확인하세요.

이를 시도해 보고 질문이 있으면 댓글에 남겨주세요.

개발 중에 수동으로 인증되지 않은 사용자를 확인해야 하는 경우가 있을 수 있습니다. AWS CLI를 사용하여 다음 명령어로 이를 수행할 수 있습니다.

aws cognito-idp admin-confirm-sign-up \
   --region <COGNITO_REGION> \
   --user-pool-id <USER_POOL_ID> \
   --username <YOUR_USER_EMAIL>

Cognito의 USER_POOL_ID와 계정 생성 시 사용한 _이메일 주소_를 사용하세요.

다음으로, 첫 번째 노트를 생성해 보겠습니다.

AWS Cognito로 회원가입 구현하기

SST Guide