Create Account 이어가기
CreateAccount를 submit을 할 때 try, catch, finally를 사용하여 예외를 잡아내기로 했다.
try에서는 user 생성 및 자격증명으로 로그인을 하고 user페이지(Dashboard)로 redirect했다.
Error
try에서 사용했던 createUserWithEmailAndPassword메소드가 실패하는 경우는 계정이거나 유효하지 않은 Password일 때라고 했다.
catch를 살펴보기 위해 콘솔을 추가하고, 기존에 사용했던 email로 계정을 다시 만들어봤다.
catch (error) {
console.log(error);
} 이미 사용중인 email이라는 메세지와 함께 400 (Bad Request)가 출력됐다.
콘솔의 FirebaseError는 JavaScript Error객체의 하위 클래스이고, 메시지 문자열 및 스택 추적 외에도 문자열 코드가 포함되어 있다고 한다.
error가 FirebaseError클래스에 속해있는 객체인지 확인하기 위해서 instanceof연산자를 사용한다. 공식문서를 참고하여 code속성과 message속성을 콘솔로 찍어보았다.
나의 경우, 이를 확인하기 위해서는 FirebaseError를 먼저 import해야했다.
import { FirebaseError } from 'firebase/app';
if (error instanceof FirebaseError) {
console.log(error.code, error.message);
}
- code : auth/email-already-in-use
- message : Firebase: Error (auth/email-already-in-use).
이것들은 에러가 발생했을 때 사용자에게 어떤 문제가 있는지 알려주는 메세지로 활용할 수 있다.
catch (error) {
// error가 FirebaseError의 instance라면
if (error instanceof FirebaseError) {
console.log(error.code, error.message);
//error의 값을 error.message로.
setError(error.message);
}
}
Password도 Firebase의 기준에 충족되지 않으면 에러메세지가 출력되고 페이지는 redirect되지 않는다.
오류가 아름다워 보이기는 처음이다...❤
Login
이름을 넣는 input과 createUserWithEmailAndPassword, updateProfile가 필요없다는 것을 제외하고 기본적인 스타일이나 구조 및 스크립트는 CreateAccount.tsx와 동일하다.
필요한 메소드는 signInWithEmailAndPassword이다.
try {
setLoading(true);
await signInWithEmailAndPassword(
auth,
email,
password
);
navigate('/');
}
로그인 또한 성공적으로 이뤄졌다.
코드를 약간 수정했다.
👇🏻AuthComponent.ts
CreateAccount.tsx와 Login.tsx에서 중복으로 사용되던 styled-components들을 모두 하나로 묶은 컴포넌트 파일을 만들었다.
인라인스타일의 CSS를 이렇게 컴포넌트화 해서 import하는 형식으로 사용하는 것은 생각해본 적이 없는데 정말 굉장하다. 역시 세상엔 똑똑하고 일 잘하는 사람들이 많다!
AuthComponent.ts에서 export된 컴포넌트들을 필요할 때 하나씩 import하여 사용하도록 바꿨다. 반복적으로 같은 코드를 작성하지 않아도 되어서 훨씬 간결해졌다.
