[LAB-11] firebase 로그인 유효성 검사

질문 작성자

오승택

문제 상황

안녕하세요 랩11조 오승택 입니다 !

로그인 버튼을 눌렀을때 정보가 맞지 않으면 유효성 검사를 통해서 오류를 알려주고 싶은데 어느 위치에 코드를 해야할지 감이 오질 않습니다..

로그인 버튼을 누를 시 email 혹은 password 가 맞지 않는다면 유효성 alert 창을 띄워주고 싶은데 handleSignIn 쪽에 유효성 검사를 넣어야지만 맞게 돌아간다고 생각하는데 생각처럼 쉽게 돌아가지 않습니다..

밑에 사진은 로그인정보가 틀렷을 때 내뱉는 오류입니다.

밑에 사진은 handleSignIn 함수 입니다.

파일위치는 src -> pages -> signInPage 입니다

프로젝트 저장소 URL

https://github.com/likeLion-FE4-RP11/Asparagus
main 브랜치

환경 정보

운영체제 정보 (예: Windows, macOS)
Node.js 정보 (예: v16.14.0)
라이브러리 정보 (예: React v18.0.2)

질문

로그인 버튼을 누를 시 email 혹은 password 가 맞지 않는다면 유효성 alert 창을 띄워주고 싶은데 handleSignIn 쪽에 유효성 검사를 넣어야지만 맞게 돌아간다고 생각하는데 생각처럼 쉽게 돌아가지 않습니다.

문제 해결을 위한 가이드

프로젝트에 사용된 useSignIn 훅은 isLoading, error, user, signIn을 포함하는 객체를 반환합니다. 그러므로 Firebase로부터 오류를 응답 받아 처리 하려면 error 상태 값도 추출해 사용해야 합니다.

const { isLoading: isLoadingSignIn, error: signInError, signIn } = useSignIn();

그리고 사용자로부터 입력 받은 email, password 값이 유효한 지 검사 하려면 handleSignIn 함수 내부에 유효성 검사 함수 코드를 추가합니다. 아래 코드를 참고해보세요.

const handleSignIn = async (e) => {
  e.preventDefault();

  const { email, password } = formState.current;

  if ( !isValidEmail(email)) {
    alert('입력한 이메일이 올바른 유형이 아닙니다. 😳');
    return;
  }

  if (!isValidPassword(password)) {
    alert('입력한 패스워드가 유효하지 않습니다. 숫자, 영어 조합 6자리 입력해주세요. 😥');
    return;
  }

  await signIn(email, password);
};

isValidEmail, isValidPassword 함수 로직은 직접 작성해보세요. @5wintaek 님 🙂

function isValidEmail(emailValue) {
  // 이메일 유효성 검사 후 boolean 값 반환
}

function isValidPassword(passwordValue) {
  // 패스워드 유효성 검사 후 boolean 값 반환
}

yamoo9 / likelion-FEQA