기존 사용자 로그인 작업

 

 

client단 (login 페이지 작업)

 

로그인 버튼에 singInHanmdler 함수 추가

 

조건을 걸어주고 email, password 입력시

firebase에서 제공하는 signInWithEmailAndPassword()에 등록된 email,password 넣어서 인증 진행

존재하지 않는 이메일이거나 비밀번호가 일치하지 않을때 state만들어서 메세지창 띄워줍니다.

useEffect에 조건(에러메세지 변화가 있을시에)을 걸어 에러메세지 초기화

 

  const Login = () => {

    const [email, setEmail] = useState("");

    const [password, setPassword] = useState("");

    const [errorMsg, setErrorMsg] = useState("");

 

    const navigate = useNavigate();

 

    const singInHandler = async (e) => {

      e.preventDefault();

 

      if (!(email && password)) {

        //email , password 값이 없을시 alert창

        return alert("빈칸을 채워주세요.");

      }

      //정상 입력시 firebase 인증 진행

      try {

        await firebase.auth().signInWithEmailAndPassword(email, password);

        alert(`환영합니다.`);

        //로그인 완료시 home으로 이동

        navigate("/");

      } catch (err) {

        if (err.code === "auth/user-not-found") {

         setErrorMsg("존재하지 않는 이메일 입니다.");

        } else if (err.code === "auth/wrong-password") {

         setErrorMsg("비밀번호가 일치하지 않습니다.");

        } else {

           setErrorMsg("로그인 실패하였습니다.");

        }

      }

    };

    //마운트시에 errorMsg에 변화 있을 때 3초뒤에 에러 메시지 초기화

    useEffect(() => {

      setTimeout(() => {

       setErrorMsg("");

      }, 4000);

    }, [errorMsg]);

 

    return (

      <div

        style={{

          height: "100%",

          display: "flex",

          alignItems: "center",

          justifyContent: "center",

        }}

      >

        <LoginDiv>

          <form>

            <label>이메일</label>

            <input

              type="email"

              value={email}

              onChange={(e) => {

                setEmail(e.currentTarget.value);

              }}

            />

            <label>비밀번호</label>

            <input

              type="password"

              value={password}

              onChange={(e) => {

                setPassword(e.currentTarget.value);

              }}

            />

            {errorMsg !== "" && (

              <p

                style={{

                  textAlign: "center",

                  marginTop: "10px",

                }}

              >

                {errorMsg}

              </p>

            )}

            <button onClick={singInHandler}>로그인</button>

            <button

              onClick={(e) => {

                e.preventDefault();

                navigate("/register");

              }}

            >

              회원가입

            </button>

          </form>

        </LoginDiv>

      </div>

    );

   };

 

 

 

 

로그인 실패시 알림 창

1. auth/user-not-found시에  존재하지 않는 이메일 입니다. 출력

2. auth/wrong-password시에 비밀번호가 일치하지 않습니다. 출력

3. 그외에 해당하면 로그인 실패하였습니다. 출력

 

 

참고

https://firebase.google.com/docs/auth/web/password-auth?hl=ko 

자바스크립트를 사용하여 비밀번호 기반 계정으로 Firebase에 인증하기

https://stackoverflow.com/questions/40632566/javascript-firebase-auth-signinwithemailandpassword-not-be-able-to-get-success

javascript firebase.auth().signInWithEmailAndPassword not be able to get success event