리액트 심화반 2주차 - 2

22.04.17(일) ~ 18(월)
스파르타코딩클럽 리액트 심화반 - 2주차 과정 - 2

◎ Firebase Authentication

• Authentication 설정하기

  • 파이어베이스 대시보드 → Authentication에서 이메일/비밀번호 항목을 사용설정
  • 파이어베이스 설치하기

  yarn add firebase@8.6.5 # 아래 코드는 8버전을 기준으로 작성

  • shared/firebase.js에서 auth 설정

  import firebase from "firebase/app";
  import "firebase/auth";
  
  const firebaseConfig = {
  // 인증정보!
  };
  
  firebase.initializeApp(firebaseConfig);
  const auth = firebase.auth();
  export { auth };

◎ 회원가입 구현하기

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, // 5. 유저 데이터 업데이트
        }).then(()=>{
          dispatch(setUser({user_name: user_name, id: id, user_profile: ''})); // Client Action 진행
          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 정보 업데이트 후에 메인 페이지로 이동하기

import { auth } from "../../shared/firebase";
import firebase from "firebase/app";



// middleware actions
// middleware actions
const loginFB = (id, pwd) => {
  return function (dispatch, getState, { history }) {
    auth.setPersistence(firebase.auth.Auth.Persistence.SESSION).then((res) => { // 세션 스토리지에 데이터 저장 (데이터 유지)
      auth
        .signInWithEmailAndPassword(id, pwd) // 로그인하기
        .then((user) => {
          dispatch(
            setUser({
              user_name: user.user.displayName,
              id: id,
              user_profile: "",
              uid: user.user.uid,
            })
          ); // Client 정보 변경을 위해 Action 을 Dispatch 함

          history.push("/"); // 페이지 이동
        })
        .catch((error) => {
          var errorCode = error.code;
          var errorMessage = error.message;

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

◎ 로그인 유지하기

1. 로그인 시, 세션에 로그인 상태를 기록하도록 바꿔줍니다. (이미 구현 되어있음)
2. firebase 인증 키를 export 해주고, 세션에서 체크해서 로그인 상태를 유지함
3. 파이어베이스를 통해, 로그인 상태가 맞는지 확인 (loginCheckFB)

// src > redux > modules > user.js
// 새로고침 했을 때, 로그인 상태 확인 
const loginCheckFB = () => {
  return function (dispatch, getState, {history}){
    auth.onAuthStateChanged((user) => {
      if(user){
        dispatch(
          setUser({
            user_name: user.displayName,
            user_profile: "",
            id: user.email,
            uid: user.uid,
          })
        );
      }else{
        dispatch(logOut());
      }
    })
  }
}

// App.js
import { useDispatch } from 'react-redux';
import { actionCreators as userActions } from '../redux/modules/user';
import { apiKey } from "../shared/firebase";

const dispatch = useDispatch();
const _session_key = `firebase:authUser:${apiKey}:[DEFAULT]`;
const is_session = sessionStorage.getItem(_session_key)? true : false

React.useEffect(() => {

  if(is_session){
    dispatch(userActions.loginCheckFB());
  }

},[])

◎ 로그아웃 구현하기

// redux/modules/user.js
const logoutFB = () => {
  return function (dispatch, getState, {history}) {
    auth.signOut().then(() => {
      dispatch(logOut());
      history.push("/");
    });
  };
};