Firebase Auth 로그인 에러 처리

알럿 UI 조작 함수

알럿 UI CSS

.login-alert-start {
  visibility: hidden;
  width: 90%;
  position: fixed;
  bottom: -5%;
  opacity: 0;

  left: 5%;
  margin: auto;
  z-index: 20;
  transition: all 0.4s;
}
.login-alert-end {
  visibility: visible;
  position: fixed;
  width: 90%;
  left: 5%;
  bottom: 8%;

  margin: auto;
  z-index: 20;
  opacity: 1;
}

알럿 동작 함수

호출 시 알럿을 보이게하거나 숨김

   function animateAlert(text) {
        showAlert(text).then(
          setTimeout(() => {
            console.log('알럿hide');

            $('#alert').removeClass('login-alert-end');
          }, 1200)
        );
      }

      var showAlert = (text) =>
        new Promise((resolve) => {
          console.log('알럿show');
          $('#alert').text(text);
          $('#alert').addClass('login-alert-end');
          resolve();
        });

로그인 버튼 누를 시 동작

Firebase Auth 에러메세지에 따라 알럿 내 텍스트가 달라진다.

 // [1] 로그인 기능
      $('#login').click(function (e) {
        var email = $('#email').val();
        var password = $('#pw').val();
        e.preventDefault();
        firebase
          .auth()
          .signInWithEmailAndPassword(email, password)
          .then((result) => {
            // 로그인 성공 시 실행할 코드
            console.log(result.user);
            console.log('로그인완료');
            location.href = '/mypage.html';
          })
          .catch((err) => {
            console.log(err, err.code);
            if (err.code == 'auth/invalid-email') {
              animateAlert('이메일 형식 틀림');
            }
            if (err.code == 'auth/user-not-found') {
              animateAlert('없는 아이디');
            }
            if (err.code == 'auth/wrong-password') {
              animateAlert('비밀번호를 다시 확인해주세요');
            }
            if (err.code == 'auth/too-many-requests') {
              animateAlert('잠시 후 다시 시도해 주세요');
            }
          });
      });