파이어베이스 이용해서 로그인 기능 구현하기

로그인 적용 순서

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

파이어베이스 로그인처리 가이드링크

 

 

후..로그인 구현할 차례

덕스구조

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:''
                })
              );
              history.push('/');
        })
        .catch((error) => {
          var errorCode = error.code;
          var errorMessage = error.message;
          console.log(errorCode,errorMessage)
        });
    };
};

로그인 js

import React from "react";
import { Text, Input, Grid, Button } from "../elements/index";
import { getCookie,setCookie,deleteCookie } from "../shared/Cookie";

import { useDispatch } from "react-redux";
import {actionCreateors as userActions} from "../redux/modules/user";

const Login =(props)=>{
    const dispatch= useDispatch();

    const [id,setId] =React.useState("");
    const [pwd,setPwd] =React.useState("");

    const login =()=>{
        if(id==="" || pwd===""){
            window.alert('아이디 혹은 비밀번호가 입력되지 않았습니다!🥲')
            return;
        };

        dispatch(userActions.loginFB(id,pwd));
    };
    return(
        <React.Fragment>
            <Grid padding="16px">
                <Text size="32px" bold>
                    로그인
                </Text>
                <Grid padding="16px 0px">
                    <Input 
                    label="아이디"
                    placeholder="아이디를 입력해주세요."
                    _onChange={(e)=>{
                        setId(e.target.value);
                    }}
                    />
                </Grid>
                <Grid padding="16px 0px">
                    <Input 
                    label="비밀번호"
                    type="password"
                    placeholder="비밀번호를 입력해주세요."
                    _onChange={(e)=>{
                        setPwd(e.target.value);
                    }}
                    />
                </Grid>
               < Button
                    color="#C95757" bg
                    _onClick={()=>{
                        console.log('로긴')
                        login()}}>
                    로그인하기
                </Button>
            </Grid>
        </React.Fragment>
    )
};

export default Login;

이제 로그인 유지하기

인증 상태 지속 유형

 

다시 덕스구조로 와서 추가해준다.

const loginFB=(id,pwd)=>{
    return function (dispatch,getState,{history}){
        auth.setPersistence(firebase.auth.Auth.Persistence.SESSION).then((res)=>{
            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)
              });
        });  
    };
};

파이어베이스 추가

const apiKey = firebaseConfig.apiKey;
const auth = firebase.auth();

export {auth, apiKey};

헤더

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

로그인 체크 덕스구조

 

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

앰닷제이에스

import { useDispatch } from 'react-redux';
import {actionCreateors as userActions} from "../redux/modules/user";

import {apiKey} from "./firebase";

function App() {
  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());
      }
  },[]);

이랬더니 로그인이 잘 유지가 되었다.

후우 ....

이제 로그아웃 구현하기만 남았다 !!

다시 덕스구조

const logoutFB =()=>{
    return function(dispatch,getState,{history}){
        auth.signOut().then(()=>{
            dispatch(logOut());
            history.replace('/')
        })
    }
}

ㅎㅔ더

<Button color="#C95757" bg _onClick={()=>{
                           dispatch(userActions.logoutFB());
                        }}>로그아웃</Button>

이렇게하면 끝!

permit으로 바꾸면 헤더가 제대로 작동 안해서 빼버렸당.ㅋㅋ