[React] Firebase를 활용한 회원 가입, 로그인, 로그인 유지, 로그아웃 기능 구현

◈ 기본 세팅 

1) 컴포넌트 나누기(pages/ components/ shared/ elements) 

 

2) 기본 패키치 설치 

[리덕스, 리덕스 텅스, 로거, 히스토리 설치]
yarn add redux react-redux redux-thunk redux-logger history@4.10.1 connected-react-router@6.8.0

[리덕스 액션즈 설치]
yarn add immer redux-actions

 

3) 리덕스 세팅 (user.js) 

// Action
// Action creator
// initialState
// Middleware
// reducer
// export

 

4) Store 세팅 

- configureStore.js 설정 + history까지 넣어주기!

=> index.js 와 App.js에 주입해주자 

※ history를 redux에 넣어주는 이유! 

- 로그인 후에 새로고침 시 리덕스가 물고 있던 데이터가 날라가기 때문에 컴포넌트들이 가지고 있던 히스토리를 리덕스에서도 쓰게 해주자! 

 => 즉, 로그인 성공 여부에 따라 경로 설정이 다르기때문에 리듀서 실행 전인 redux thunk에 넣어줘야함. 

 

5) redux - firebase 연동

yarn add firestore
yarn add firebase

- firebase.js 생성 및 설정 

 

---

1. 회원가입 

▶생각할 점! 

firebase에서 제공하는 가입 함수가 이메일과 패스워드만 받아온다. 제공하는 형식으로밖에 못쓰기에 우리는 닉네임도 넣어주기 위해 가입을 먼저 시킨 후에 닉네임을 수정해주는 방식을 사용! 

 

1) firebase에서 만들어 놓은 auth를 user.js로 가져오기

 

2) firebase와 연동해주자! Middleware에 signup 함수 만들기 

- firsebase에서 제공하는 회원가입 함수 사용 

- id, pwd 먼저 가져 온 후 닉네임은 업데이트 형식으로! 

- console.log(user)로 값 확인하자! 

- dispatch 후에 history 넣어주기! 

 

[신규 사용자 가입 ] 
주소: https://firebase.google.com/docs/auth/web/start?hl=ko&authuser=0

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

 

[사용자 프로필 업데이트]

주소: https://firebase.google.com/docs/auth/web/manage-users?hl=ko&authuser=0

Firebase에서 사용자 관리하기  |  Firebase Documentation

const signupFB = (id, pwd, user_name) => {
  return function (dispatch, getState, { history }) {
    auth //firebase.js에서 이미 선언 해줌
      .createUserWithEmailAndPassword(id, pwd, user_name)// 
      .then((user) => {
        console.log(user); //잘 가져와지나 꼭 확인! 

        auth.currentUser //가입 후 display_name(닉네임) 없데이트 하기
          .updateProfile({
            displayName: user_name,
          })
          .then(() => {
            dispatch(
              setUser({
                user_name: user_name,
                id: id,
                user_profile: "",
                uid: user.user.uid,
              })
            );
            history.push("/"); //업데이트 후 메인페이지로 이동 
          })
          .catch((error) => {
            console.log(error);
          });
      })
      .catch((error) => { 
        var errorCode = error.code;
        var errorMessage = error.message; 
		//firebase에 자체가입 규직이 있고 규칙을 어기면 회원가입 x
        console.log(errorCode, errorMessage);
      });
  };
};

 

3) 해당 파일인 Signup.js 페이지에 dispatch 해주기 

- useState와 input에 onChange를 활용해 값이 잘 들어오는 지 먼저 확인! 

- 리덕스로 보내줘야하는 파라미터 dispatch 해주기! 

const [id, setId] = React.useState('');
const [pwd, setPwd] = React.useState('');
const [user_name, setUserName] = React.useState('');
const [pwd_check, setPwdCheck] = React.useState('');

onClick={()=>{ dispatch(userActions.signupFB(id, pwd, user_name))}}

---

2. 로그인 

1) Middleware에 loginFB 함수 생성 

- history도 설정! 

 

[사용자 로그인]

주소: https://firebase.google.com/docs/auth/web/password-auth?hl=ko&authuser=0

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

const loginFB = (id, pwd) => {
  return function (dispatch, getState, { history }) {
      auth
        .signInWithEmailAndPassword(id, pwd) //세션 체크 끝난 후 로그인 해줘라! 
        .then((user) => {
          console.log(user);

          dispatch(
            setUser({
              user_name: user.user.displayName,
              id: id,
              user_profile: "",
              uid: user.user.uid, //고유값을 미리 저장
            })
          );
          history.push("/");
        })
        .catch((error) => {
          var errorCode = error.code;
          var errorMessage = error.message;
          console.log(errorCode, errorMessage);
        });
    });
};

 

2) 해당 파일(Login.s)에 dispatch & input값 가져오기

 

3) 비밀번호 가려주기(Input.js에서 설정) 

- input.js 에서 type='text' 추가! 

- Login.js의 input 요소들에 type='password' 설정

---

3. 로그인 유지

1) Middleware loginFB 함수에 세션체크 함수를 추가해주자! 

 

[인증 상태 유지]

주소: https://firebase.google.com/docs/auth/web/auth-state-persistence?hl=ko&authuser=0

인증 상태 지속성  |  Firebase Documentation

const loginFB = (id, pwd) => {
  return function (dispatch, getState, { history }) {
    auth.setPersistence(firebase.auth.Auth.Persistence.SESSION).then((res) => { //result 세션 체크 해줘라! 
      auth
        .signInWithEmailAndPassword(id, pwd) //세션 체크 끝난 후 로그인 해줘라! 
        .then((user) => {
          console.log(user);

          dispatch(
            setUser({
              user_name: user.user.displayName,
              id: id,
              user_profile: "",
              uid: user.user.uid, //고유값을 미리 저장
            })
          );
          history.push("/");
        })
        .catch((error) => {
          var errorCode = error.code;
          var errorMessage = error.message;
          console.log(errorCode, errorMessage);
        });
    });
  };
};

 

2) 해당 파일(Header.js)에 로그인, 회원가입 버튼 클릭 시 이동하도록 history먼저 넣어주자 

 

3) 로그인 해서 session이 잘 들어오는 지 확인 후 firebase 에 apiKey를 넣어준다. 

 

4) 다시 Header.js에서 apiKey를 가져와 is_login으로 나눠진 분기의 기준에 session을 추가한다.

const is_login = useSelector((state) => state.user.is_login);

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

  if (is_login && is_session) {
    return (
      <React.Fragment>
      ...

 

5) 리덕스에도 넣어주자! Middleware loginCheckFB(로그인 사용자 끌고오기) 생성

 

[로그인한 사용자 가져오기]

주소: https://firebase.google.com/docs/auth/web/manage-users?hl=ko&authuser=0

Firebase에서 사용자 관리하기  |  Firebase Documentation

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());
         }
    })
  }
}

 

6) App.js에 dispatch 해주기 

 

▶왜 Header.js가 아닌 App.js에서 해주는가? 

- App.js가 시작점이기 때문. Header.js에서 dispatch 해줘도 가능하지만 맨처음 로드되는 App.js에서 실행하는 것이 더 깔끔하다! 

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

  React.useEffect(()=>{ 
    if(is_session){
      dispatch(userActions.loginCheckFB())
    }
  },[]);

---

4. 로그아웃 

 

1) Middleware에 logoutFB 생성 

const logoutFB = () =>{
    return function (dispatch, getState, {history}){
        auth.signOut().then(()=>{
            dispatch(logOut());
            history.replace('/');   
            //why replace? 더는 머물러서는 안되는 페이지일 경우 뒤로가기 하면 안되므로.
            //replace: 지금 있는 페이지와 괄호 안 페이지랑 바꿔치기.  
        })
    }
}

 

2) 해당 페이지(Header.js)에 dispatch