14. 리액트 [인증] - 파이어 베이스 Auth편(3)

1. 로그인 상태를 유지해보자  with React-Cookie

 

리액트 쿠키 : https://www.npmjs.com/package/react-cookie

react-cookie

 

서버에서 받아온 인증서를, 어딘가에 저장해야한다. 

 

선택지는 두가지,

     1. 로컬스토리지

     2. 브라우저의 쿠키

     3. State

 

로컬스토리지는, 보안 기능이 약하다 한다. 무슨 공격... 무슨 공격을 받을 수 있다는데, 해커가 아니라 잘 모르겠다.

 

자체 보안 기능이 있는 쿠키에 저장을 하도록 하자.

 

3. State 를 적은 이유는 혹시 State에 저장하는 불상사를 막기 위해서이다.

State에 저장하면, 당연하게도, 새로고침(새 요청)에 의해, State 의 값은 전부 "초기화" 된다.

 

2. 리액트 쿠키의 사용

1. 당연하게도 설치
	npm install react-cookie
    
2. 쿠키 프로바이더로, 쿠키를 사용가능하게 전 앱을 감싸고

	<index.js>
    
        import { CookiesProvider } from "react-cookie";

        import "./index.css";
        import App from "./App";

        const root = ReactDOM.createRoot(document.getElementById("root"));
        root.render(
            <CookiesProvider>               // 쿠키 프로바이더
                <Provider store={store}>
                    <BrowserRouter>
                        <App />
                    </BrowserRouter>
                </Provider>
            </CookiesProvider>
        );

3. 쿠키를 사용한다.

    import { useCookies } from "react-cookie";

    const AuthComponent =() =>{
        const [cookies, setCookie ,removeCookie ] = useCookies(["auth-cookie"]);    // auth-cookie 는 내가 정한 쿠키 이름

        setCookie("auth-cookie", responseData.idToken); // "auth-cookie" 에다가,  "responseData.idToken" 를 담겠다

        console.log(cookies)                    // {auth-cookie : "..."}

        console.log(cookies["auth-cookie"]);    // "..."
    }

3. 리액트 쿠키의 기본 기능

      import { useCookies } from "react-cookie";

        const AuthComponent =() =>{
            const [cookies, setCookie ,removeCookie ] = useCookies(["auth-cookie"]);
        
  1. cookies : 쿠키에 저장된 데이터
  2. setCookie : 쿠키에 저장하기
  3. removeCookie : 쿠키의 데이터를 삭제하기
  4. useCookies(["dependencies"])	: dependencies 의 값을 정하면, 이 값이 변화할때만, 렌더된다.
  							즉, dependencies(쿠키이름)을 적지 않으면, 쿠키가 변경 될때마다, Re-렌더된다.

4. 각각의 기능

0. useCookies() 의 메서드와 프로퍼티를 뽑아서 사용
    
    const AuthComponent =() =>{
    const [cookies, setCookie ,removeCookie ] = useCookies(["auth-cookie"]);

1. setCookie
  
        setCookie(name, value, [options])

    쿠키 이름을 정하고, 넣을 값을 넣고, 옵션을 선택한다.

    옵션에는,path, expires, maxAge 등... 공식문서 참조
        
        setCookie("auth-cookie", responseData.idToken ) 
    
    쿠키 이름을 설정하고, 로그인으로 가져온 idToken 을 넣어준다.
    
2. cookies

        console.log(cookies)					// {auth-cookie : "....."}
        console.log(cookies["auth-cookie"])		// "....."
        
	쿠키에 담긴 정보를 본다
    
3. removeCookie

        const logoutHandler = (e) => {
            e.preventDefault();
            removeCookie("auth-cookie");
        };
        
    쿠키이름을 설정하면, 쿠키안의 데이터를 지운다 = undefined 로 만든다.
    
    ** 지우고, 조건문을 사용할때

        if (cookies["auth-cookie"] !== "undefined") 
            isAuth = true;
        }

   "undefined" 해야지, 그냥 undefined 하면 안된다.