hmk run dev

파이어 베이스로 회원가입 기능 만들어주기 본문

React

파이어 베이스로 회원가입 기능 만들어주기

hmk run dev 2021. 3. 29. 18:54
  1. firebase.js에 만들어둔 auth 가져오기
  2. 리덕스에서 signupFB 함수 만들기
  3. auth.createUserWithEmailAndPassword()로 가입 시키기
  4. Signup 컴포넌트에서 signupFB를 호출!
  5. 가입한 후, display_name 바로 업데이트하기
  6. 사용자 정보 업데이트 후에 메인 페이지로 이동하기
const signupFB = (id, pwd, user_name) => {
  // 파이어베이스 회원가입 함수 // 회원가입 버튼 할때 작동
  return function (dispatch, getState, { history }) {
    auth
      .createUserWithEmailAndPassword(id, pwd)
      .then((user) => {
        console.log(user);

        //사용자 프로필 업데이트
        auth.currentUser
          .updateProfile({
            displayName: user_name,
          })
          .then(() => {
            ///성공했을때 then실행 유저이름에 내가쓴 유저이름 아이디에 아이디
            dispatch(
              setUser({
                user_name: user_name,
                id: id,
                user_profile: "",
              })
            );
            history.push("/"); // 회원가입 됐으니 메인으로 가야겠쥬?>
          })
          .catch((error) => {
            console.log(error);
          });
      })
      .catch((error) => {
        var errorCode = error.code;
        var errorMessage = error.message;

        console.log(errorCode, errorMessage);
      });
  };
};

 

 

 

  1. firebase.js에 만들어둔 auth 가져오기
  2. 리덕스에서 loginFB 함수 만들기
  3. auth.signInWithEmailAndPassword()로 로그인
  4. Login 컴포넌트에서 loginFB를 호출!
  5. 리덕스의 user 정보 업데이트 후에 메인 페이지로 이동하기

'React' 카테고리의 다른 글

파이어베이스 데이터 긁어오고 형식맞추기  (0) 2021.04.02
1 쿠키 저장 삭제  (0) 2021.04.01
컴포넌트 쪼개기 + defaultProps  (0) 2021.03.29
무한스크롤  (0) 2021.03.29
자바스크립트 필수문법  (0) 2021.03.28
Comments