15. 리액트 [인증] - 클라이언트 보호와 보호된 API 기능 사용

1. 클라이언트 보호

: 인증토큰이 없다면, 강제로 페이지에서 벗어나는 클라이언트 보호를 실현한다.

1) 들어가면 튀어나가게 만들기

        import { useCookies } from "react-cookie";
        import { useHistory } from "react-router-dom";

        const ProfileForm = () => {
            const [cookies] = useCookies(["auth-cookie"]);      // 쿠키 빼보고
            const history = useHistory();

            let isAuth = false;
            if (cookies["auth-cookie"] !== "undefined") {       // 없으면 너 인증안됐다
                isAuth = true;
            }

            if (!isAuth) {                                      // 안됐으면 나가라
                history.replace("/");

2) 버튼 자체를 없애기

        const MainNavigation = () => {
            const [cookies, removeCookie] = useCookies(["auth-cookie"]);

            let isAuth = false;

            if (cookies["auth-cookie"] !== "undefined")	// 만약 인증되지 않았다면
                isAuth = true;
            }

            return (
                <header className={classes.header}>
                        ...
                    <li> {isAuth && <button onClick={logoutHandler}>Logout</button>} </li>  // "로그인중"에만 "로그아웃 표시"
                </ul>

 

2. API 보호

 

: 현재 프론트엔드 단만 작업중이기에 "자체 API" 는 없다.

     그렇지만, 토큰을 제공하는, 파이어베이스 API 에서는, 보호된 API 기능을 제공한다.

     idToken 을 제출하고, 적합하다면, 제공하는 "비밀번호 변경" 등에 접근 가능해진다.

 

    파이어베이스 AUTH DOCS - [비밀번호 변경 요청]
    	https://firebase.google.com/docs/reference/rest/auth?hl=en&authuser=0#section-change-password


    Property Name	            Type	    Description
    1. idToken	            string	    A Firebase Auth ID token for the user.
    2. password	            string	    User's new password.
    3. returnSecureToken	boolean	    Whether or not to return an ID and refresh token.

    아하! "idToken" 을 제시하라고 하는구나!

    "넣어서 보내면, 비밀번호가 바뀐다"