13. 리액트 [인증] 파이어 베이스 Auth편(2)

1. 여러가지 인증 방식 (구글, 네이버, 깃허브 등등..) 중에,

일반적인 Email 과 Password 를 사용한 인증을 해보겠다.

 https://firebase.google.com/docs/reference/rest/auth?hl=en&authuser=0#section-create-email-password

Firebase 인증 REST API

    우측 사이드바에 보면, 인증에 관한 목록들이 쭉 나와있다.

    1) You can create a new email and password user by issuing an HTTP POST request 
        to the Auth signupNewUser endpoint.

        [POST 리퀘스트로 보내라]

    2) https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=[API_KEY]

        ** [API_KEY] 는 내 파이어 베이스 프로젝트의 [세팅] 에 가보면, [Web API KEY] 가 있는데 그거 넣어주면된다.

        * AIzaSyAxe7GPLnV_nM-s_SExIFnA1VvboXPmR2g

        [여기로]

    3) Request Body Payload
        PropertyName	            Type	    Description
           1. email	                string	    The email for the user to create.
           2. password	            string	    The password for the user to create.
           3. returnSecureToken	    boolean	    Whether or not to return an ID and refresh token. Should always be true.

        [이 3개를 ]

 

간단하게 Form 을 사용하여 fetch 를 진행한다.

 

const LoginComponent = () => {
    const submitHandler = async (e) => {
        e.preventDefault();

        const enteredEmail = emailRef.current.value;
        const enteredPassword = passwordRef.current.value;

        // [추가할것] 당연히, Validation 추가해야하고

        if (isLogin) {
        } else {
        const response = await fetch(
            "https://identi...FnA1VvboXPmR2g",
            {
                method: "POST",
                body: JSON.stringify({
                    email: enteredEmail,
                    password: enteredPassword,
                    returnSecureToken: true,
                }),
                headers: {
                    "Content-Type": "application/json",
                },
            }
        );
        // [추가할것]response.ok 를 통해 이상하면 에러출력하고

        const responseData = await response.json();

        console.log(responseData)       // 혹시모를 에러데이터를 보내줄 수도 있으니 한번 쳐보자
        }
    };
        ...
    }

 

2. 보내고나면 Authentication 탭에, User 가 추가되었다!

 

3. 회원가입 에러

    파이어베이스는 회원가입 "자체 Validation 로직" 을 만족하지 않으면 에러를 보내준다.

        error: 
            {code: 400, 
            message: 'WEAK_PASSWORD : Password should be at least 6 characters', 
            errors: Array(1)}
        [[Prototype]]
        : Object

    "responseData.error 가 존재"한다면

    "responseData.error.message" 를 통해, "유저들에게 로그인 실패 메시지를 전달 할 수 있는 것"이다.

4. 회원가입 에러 메시지 띄우기

        const [errorMessage,setErrorMessage] = useState("")
                ...  
            const responseData = await response.json();

            if (responseData.error) {
                setErrorMessage(responseData.error.message);
            }
        return(
                ...
            {errorMessage !== "" && <p className={classes.error}> {errorMessage}</p>}
        )

5. 항상 로딩! 로딩 스테이트를 생각하자

  : 로딩 중일때, 버튼을 없애고, 로딩 스피너를 띄워 볼 것이다.

<부트스트랩 스피너>

        const Spinner = () => {
            return (
            <div className="spinner-border" role="status">
                <span className="visually-hidden">Loading...</span>
            </div>
            );
        };
        export default Spinner;

< 회원가입 컴포넌트 >

    const [loading, setLoading] = useState(false)

    const submitHandler = async (e) => {
        e.preventDefault();
        setLoading(true);       // 로딩

                ...

        const responseData = await response.json();
        setLoading(false); // 로딩 끝

        if (responseData.error) {
          setErrorMessage(responseData.error.message);

        }
    };

    return (
            ...

        {loading ? ( <Spinner />) : (                   // 로딩중이면, 스피너, 아니면, 버튼
                <button> {isLogin ? "Login" : "Create Account"} </button> 
        )}
    )

 

6. 로그인 구현하기

 https://firebase.google.com/docs/reference/rest/auth?hl=en&authuser=0#section-sign-in-email-password

    1) You can sign in a user with an email and password by issuing an HTTP POST 
        request to the Auth verifyPassword endpoint.

    2) https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=[API_KEY]

    3)  Request Body Payload

        PropertyName	        Type	    Description
         1.email	            string	    The email the user is signing in with.
         2.password	            string	    The password for the account.
         3.returnSecureToken	boolean	    Whether or not to return an ID and refresh token. Should always be true.

<로그인의 결과 [ 역시나 DOCS 에 잘 설명되어있음]>

    displayName: ""
    email: "test1@test.com"
    expiresIn: "3600"
    idToken: "eyJ.... PnYxeA" // 한 300글자 넘는거같다;
    kind: "identitytoolkit#VerifyPasswordResponse"
    localId: "DwoMYbTelFTbRKAdQz3mevkqq0N2"
    refreshToken: "AOkhONV2j...k3bh_8"  // 한 300글자 넘는거같다;
    registered: true

    *** 가장 주목해서 보아야 할것은 "idToken" 이다. email 도 아이디니까 쓸모는 많을테지

 

7. 로그인 상태의 저장

 

첫 단락에 말했듯 토큰 의 인증 방식 에서는, 서버가 인증서만 던져주지, 로그인 상태 에는 전혀 신경 쓰지 않는다.

Stateless 이므로!

 

다음 글에서 React-Cookie 를 이용하여, 클라이언트의 쿠키에 로그인 상태를 저장하도록 해본다.