[인스타그램클론코딩] #Authrization 흐름 정리

안녕하세요 강정호입니다

 

오늘은 인스타그램클론코딩을 하면서 인증(Authorization) 흐름을 정리해보겠습니다.

 

Authrorization에는 크게 3가지 중요 로직이 있습니다.

1. 회원가입

2. 로그인

3. 이메일 인증

위 3개를 거쳐야 token을 발급 받아 로그인을 할 수 있습니다.

 

1. 회원가입

1) 로그인 여부 확인

Apollo Client가 아래 쿼리로 브라우저 cache에 로그인 상태가 true/false인지 확인

false라면 로그인 화면을 노출시켜줌.

 

App.js

const QUERY = gql`
  {
    isLoggedIn @client
  }
`;


const { data: {isLoggedIn} } = useQuery(QUERY);

cache에 isLoggedIn 값이 true/false 인지 조회하여 이 값을 Router에 넘겨서 어떤 화면을 보여줄지 설정.

 

 

[참고 블로그글]

ApolloClient @client 지시문 : athilog.github.io/apollo/@client%20%EC%A7%80%EC%8B%9C%EB%AC%B8%20&%20%EC%BA%90%EC%8B%9C%EC%97%90%20data%20%EC%93%B0%EA%B8%B0/ 

ApolloClient 공식 문서 : www.apollographql.com/docs/tutorial/local-state/

 

2) 회원가입 정보 작성

 

AuthContainer.js

else if (action === "signUp") {
      if (
        email.value !== "" &&
        userName.value !== "" &&
        firstName.value !== "" &&
        lastName.value !== ""
      ) {
        try {
          const { data: { createAccount } } = await createAccountMutation({
              variables: {
                  email: email.value,
                  userName: userName.value,
                  firstName: firstName.value,
                  lastName: lastName.value
              }
          });

          if (!createAccount) {
            toast.error("Can't create account");
          } else {
            toast.success("Account created! Log In now");
            setTimeout(() => setAction("logIn"), 3000);
          }
        } catch (e) {
          toast.error(e.message);
        }
      }

위와 같이 입력된 정보를 Server로 보내어 insert 한다.

 

2. 로그인

로그인 화면에서 이메일을 입력하고 로그인 버튼을 누르면 해당 이메일로 인증 이메일이 전송된다.

 

if (action === "logIn") {
      if (email.value !== "") {
        try {

          const { data: {requestSecret} } = await requestSecretMutation({ variables: { email: email.value } });

          if (!requestSecret) {
            toast.error("You dont have an account yet, create one");
            setTimeout(() => setAction("signUp"), 3000);
          }else{
            toast.success("Check your email box for login secret");
            setAction("confirm");
          }
        } catch {
          toast.error("Can't request secret, try again");
        }
      } else {
        toast.error("Email is required");
      }

setAction이 confirm으로 변경되면서 confirmSecretMutation 함수가 호출된다.

 

 

3. 이메일 인증

입력한 이메일로 인증 이메일이 전송되었다. 이메일 상에 나와있는 문구를 입력한 후 인증하면된다.

그렇게되면 localStorage에 토큰을 저장하게 된다.

 

else if(action === "confirm"){

      if(secret.value !== ""){
        try{
          const { data: {confirmSecret : token} } = await confirmSecretMutation({
            variables: {
              secret: secret.value,
              email: email.value
            }
          });

          if(token !== "" || token !== undefined){
            localLoginMutation({ variables: { token: token } });
          }

        }catch(error){
          console.log(error);
          toast.error("Can't confirm secret");
        }
      }
    }

 

이렇게 해서 회원가입, 로그인, 이메일 인증을 구현하였습니다.