[새싹 프론트엔드] Firebase Authentication 2

Ryu·2023년 1월 11일

새싹

목록 보기

35/36

로그인시 로그인창은 없애고 사용자 정보 나타내기

//SignIn.jsx
// 로그인
const signInHandler = async (e) => {
  e.preventDefault();
  setIsLoggedIn(true);
  await signInWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
    const dataPrint = async () => {
      const user = userCredential.user;
      const docRef = doc(userCollection, user.uid);
      const data = await getDoc(docRef);
      const userInfo = data.data();

      alert(`${userInfo.username}님, 로그인되었습니다`);

      // 로그인시 로그인창 숨기기
      const signIn = document.getElementsByClassName('signIn')[0];
      signIn.style.display = 'none';

      // 로그인시 사용자 정보 출력
      const info = document.getElementsByClassName('info')[0];
      info.style.display = 'block';

      const name = document.getElementsByClassName('name')[0];
      const userid = document.getElementsByClassName('userid')[0];
      name.innerHTML = `${userInfo.username}`;
      userid.innerHTML = `${userInfo.userid}`;
    };
    dataPrint();
  })
    .catch((error) => {
    console.log(error.code);
  });
  setEmail('');
  setPassword('');
};

// 출력
<h1>로그인</h1>
<form>
  <div className='signIn'>
    <div>
      아이디:
      <input
        type='email'
        className='signIn Email'
        value={email}
        onChange={(e) => {
          setEmail(e.target.value);
        }}
        />
    </div>
    <div>
      비밀번호:
      <input
        type='password'
        className='signIn Password'
        value={password}
        onChange={(e) => {
          setPassword(e.target.value);
        }}
        />
    </div>
  </div>
  <div className='info' style={{ display: 'none' }}>
    <div className='name'></div>
    <div className='userid'></div>
    <form>
      <div className='signin pw'>
        비밀번호: <input type='password' className='userpw' value={userpw} placeholder='비밀번호' onChange={(e) => setUserpw(e.target.value)} />
      </div>
      <div className='natvaildpwsignin' style={{ color: '#4665F9' }}>
        ※ 8자리 이상 영문 대 소문자, 숫자, 특수문자를 입력하세요
      </div>
      <div className='signin pwcheck'>
        비밀번호 재확인: <input type='password' className='userpwcheck' placeholder='비밀번호 재확인' value={pwcheck} onChange={(e) => setPwcheck(e.target.value)} />
        <button type='submit' onClick={pwChangeHandler}>
          변경
        </button>
      </div>
      <div className='notsamepwsignin' style={{ color: 'red' }}>
        {' '}
        비밀번호가 일치하지 않습니다
      </div>
    </form>
  </div>
  {isLoggedIn ? (
    <button onClick={signOutHandler}>로그아웃</button>
  ) : (
    <button type='submit' className='SignInButton' onClick={signInHandler}>
      로그인
    </button>
  )}
</form>

로그인 전

로그인 후

비밀번호 설정

비밀번호 조건 설정

useEffect(() => {
  if (userpw.length > 0) {
    setUserpw((prev) => prev);
    // 영어, 숫자, 특수문자가 반드시 포함된 8자리 이상을 나타내는 정규표현식
    const regexp = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$/g;

    const div = document.getElementsByClassName('natvaildpwsignin')[0];
    if (regexp.test(userpw)) {
      div.style.display = 'none';
    } else if (userpw.trim() === '' || !regexp.test(userpw)) div.style.display = 'block';
  }
}, [userpw]);

비밀번호 재확인

useEffect(() => {
  if (pwcheck.length > 0) {
    setPwcheck((prev) => prev);

    const same = document.getElementsByClassName('notsamepwsignin')[0];
    if (userpw === pwcheck) {
      same.style.display = 'none';
    } else same.style.display = 'block';
  }
}, [userpw, pwcheck]);