Footer.js

Preview

Clone

lang-type은 영어버전으로 일단 진행한다.

Auth.js

Preview

Clone

UI

• form
• button
• box
• notification

form

button

box

notification

react-toastify 사용

https://github.com/fkhadra/react-toastify

Function

• 로그인 기능
• 회원가입 기능

hook을 이용해 input 값을 관리하는 state를 정의하고 graphql로 서버로 api 호출하여 로그인 또는 회원가입이 되도록 진행한다.

로그인 기능, 회원가입 기능

passwordless login

• 로그인 기능 절차

1. email 입력
2. login 버튼 클릭
3. 백엔드에서 email로 login secret 값 send
4. 해당 값 메일에서 확인 후 login secret 값 입력
5. 백엔드에서 맞는지 체크 후 jwt 생성 및 부여
6. 생성된 jwt를 이용해 로컬에 로그인 jwt를 저장한다.(auth...:bearer token)

// 📄 AuthQueries.js
export const LOCAL_LOG_IN = gql`
  mutation logUserIn($token: String!) {
    logUserIn(token: $token) @client
  }
`;

...
// 📄 Apollo/LocalState.js
Mutation: {
  logUserIn: (_, { token }, { cache }) => {
    localStorage.setItem("token", token);
    cache.writeData({
      data: {
        isLoggedIn: true,
      },
    });
    return null;
  },
  logUserOut: (_, __, { cache }) => {
    localStorage.removeItem("token");
    window.location.reload();
    return null;
  },
},

• 회원가입 절차

1. 필요항목 값 작성
2. submit
3. 백엔드에서 validation 진행
4. 성공하면 create account
5. return 값이 true이면 toast메시지와 함께 log in 창으로 이동

useMutation
react-apollo-hooks에 useMutation을 이용하여 mutation resolver를 호출할 수 있다.

import { useMutation } from 'apollo-react-hooks';
import gql from 'apollo-boost';

const LOG_IN = gql`
  mutation requestSecret($email: String!) {
    requestSecret(email: $email)
  }
`;

function login() {
  let input;
  const email = useInput("");
  const [requestSecretMutation] = useMutation(LOG_IN, {variables: {email: email.value}});

  return (
    <div>
      <form onSubmit={
    	async e => {
          e.preventDefault();
          if(email !== ""){
            const {data: {requestSecret}} = await requestSecretMutation();
            if(!requestSecret){
              toast.error("You don't have an account yet, create one");
            } else {
              toast.success("Check your email for your login secret");
            }
          }
        }}
      >
        <input type="email"/>
        <button type="submit">Log In</button>
      </form>
    </div>
  );
}

• gql 사용시 param 순서는 반드시 server와 동일한 순서로 작성해야함(dict 참고)