[React/TypeScript] 최종프로젝트 - Mango(환경오염 줄이기 / 지구 살리기 프로젝트!) (진행 중) - 파이어베이스 로그인/회원가입

 

최종프로젝트에서 마이페이지 쪽을 맡게되면서 또 다시 auth 쪽을 구현하게 되었다

그 대신 이번에는 파이어베이스로!

 

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

웹사이트에서 Firebase 인증 시작하기  |  Firebase Authentication

 

파이어베이스 공식문서이다.

공식문서를 보면 쉽게 따라할 수 있다

 

 

 

회원가입

 const signUp: SubmitHandler<Data> = async ({ email, password, nickname, passworkCheck }: Data) => {
    try {
      const userCredential = await createUserWithEmailAndPassword(auth, email, password);

      console.log('userCredential', userCredential);
      
      const user = userCredential.user;
      if (user !== null) {
        await updateProfile(user, {
          displayName: nickname
        });
      } else return;
      setValue('email', '');
      setValue('password', '');
      setValue('nickname', '');
      setValue('passworkCheck', '');


      // 회원가입 state 업데이트
      setIsSignUp(false);
     

      //...코드생략
      
      
      
      }
    } catch (error) {
      setErrorMsg(error);
    }
  };

 

 

로그인

 const signIn: SubmitHandler<Data> = async (data) => {
    try {
      const userCredential = await signInWithEmailAndPassword(auth, data.email, data.password);
      // 로그인 성공 시 role의 recoil(전역상태) update
      const user = userList && userList.find((user) => user.uid === auth.currentUser?.uid);
      if (user) {
        setRole(user.role);
      }
      
      // home으로 이동
      navigate('/');
    } catch (error) {
      setErrorMsg(error);
    }
  };

 

 

 

이번에도 역시나 react-hook-form을 사용하여 실시간 유효성 검사를 했다

 

 

 

 

아직 중복확인 기능은 구현하지 못했는데

어떻게 구현해야 할지 고민이다!