회원가입 & 로그인& 로그아웃 구현하기

HYOJIN·2021년 10월 2일
1

React

목록 보기
1/9
post-thumbnail

회원가입 구현하기

firbase.js

import

import firebase from 'firebase/compat/app'
import 'firebase/compat/auth'

const firebaseConfig = {
// 인증정보
}

다른파일에서 파이어베이스 가져다 쓰기

const auth =firebase.auth();

export {auth};

user.js

import

import {auth} from '../../shared/firebase';

middleware

  • 리덕스에서 signupFB 함수 만들기
  • auth에 있는 함수 사용
const signupFB = (id, pwd, user_name) =>{
    return function (dispatch, getState, {history}){
    // firebase 웹 비밀번호 인증 복사
        auth.createUserWithEmailAndPassword(id, pwd)
        
        // 완료되었을 때
        .then((user) => {
            // 회원가입이 정상적이면 회원가입 버튼 눌렀을 때 콘솔 찍기
            console.log(user)

            // 유저 닉네임 업데이트 (사용자 프로필 업데이트)
            // 로그인한 유저를 가져오는 방법 (firebase.auth().currentUser;)
            auth.currentUser.updateProfile({
                // 바꾸고 싶은 객체 
                displayName: user_name,
            }).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)
        });
    }
}

export signupFB 추가

const actionCreators = {
    logOut,
    getUser,
    loginAction,
    signupFB
}

Signup.js

입력값 가져오기

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

Signup 컴포넌트에서 signupFB 호출

const signup = () =>{
        // 아이디, 유저네임, 비밀번호 값이 없으면 return
        if(id === ' ' || pwd === ' ' || user_name === ''){
            return;
        }
        
        // 비밀번호와 비밀번호 확인이 다르면 return (실행 x)
        if(pwd !== pwd_check){ 
            return;
        }

        dispatch(userActions.signupFB(id, pwd, user_name))
    }

setId, setPwd, setPwdCheck, setUserName

  • 하단과 같은 방식으로 비밀번호, 비밀번호 확인, 닉네임에 적용
<Input  
    label='아이디' 
    placeholder='아이디 입력' 
    _onChange={(e) =>{
        setId(e.target.value);
    }} 
/>

회원가입 구현 상태

  • id는 이메일 형태, 패스워드는 6자리 이상으로 입력해야 정상적으로 작동

  • 여기서 문제!
    새로고침하면 리덕스에 있는 데이터가 사라지면서 헤더가 정상적으로 뜨지 않는다. 하지만 리덕스에서는 날아갔어도 쿠키에는 남아있고 firebase에도 로그인 되어 있는 상태. (가입 정보는 firebase Authentication에서 확인 가능)
    -> 로그인 유지를 해줘야 함

로그인 구현하기

user.js

middleware

  • 리덕스에서 loginFB 함수 만들기
  • 이메일 주소와 비밀번호로 사용자 로그인 처리 - firebase docs 참고
  • user_name 받아온 경로
const loginFB = (id, pwd) =>{
    return function (dispatch, getState, {history}){ // history - 페이지 이동할 때 사용
        // 로그인 방법 (이메일 주소와 비밀번호로 사용자 로그인 처리)
        auth
        .signInWithEmailAndPassword(id, pwd)
            // 로그인 후 무엇을 할 것인지
            .then((user) => {
                console.log(user)
                
                dispatch(
                    setUser({ 
                    user_name: user.user.displayName, 
                    id: id, 
                    user_profile:''
                })
                )
                // 로그인 성공시 메인 페이지로 이동
                history.push('/');
            })
            .catch((error) => {
                var errorCode = error.code;
                var errorMessage = error.message;

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

export loginFB 추가

const actionCreators = {
    logOut,
    getUser,
    signupFB,
    loginFB
}

Login.js

loginFB 호출

// 초기값 ' ' 설정
   const [id, setId] = React.useState('');
   const [pwd, setPwd] = React.useState('');

// 유저가 입력한 id, pwd 받아와야함
   const login = () =>{
   // 빈칸 입력 방지
     if(id === ''|| pwd === ''){
        window.alert('아이디 혹은 비밀번호가 공란입니다.')
        return;
     }
     dispatch(userActions.loginFB(id, pwd));
   }

setId, setPwd

<Input 
    label = '아이디'
    placeholder = '아이디를 입력해세요'
    _onChange = {(e) =>{
       setPwd(e.target.value);
    }}
/>

<Input 
    label = '비밀번호'
    placeholder = '비밀번호를 입력하세요'
    type:'password' //비밀번호 안보이게 설정
    _onChange = {(e) =>{
       setId(e.target.value);
    }}
/>

로그인 구현 상태

로그아웃 구현하기

user.js

middleware

const logoutFB = () =>{
    return function (dispatch, getState, {history}){
        auth.signOut().then(()=>{
            dispatch(logOut());
            // 기존 페이지와 '/'페이지와 바꿔치기
            history.replace('/');
        })
    }
}

export logoutFB

const actionCreators = {
  logOut,
  getUser,
  signupFB,
  loginFB,
  loginCheckFB,
  logoutFB
};

Header.js

로그아웃 버튼을 누르면 is_login 값이 false로 바뀌고 세션에 저장된 정보도 사라짐

logoutFB 호출

<Button
    text="로그아웃"
    _onClick={() => {
        dispatch(userActions.logoutFB());
    }}
></Button>
profile
https://github.com/hyojin-k

0개의 댓글