쿠팡이츠, React와 Apollo Client를 사용한 로그인 기능 구현

shooting star·2024년 5월 11일

쿠팡이츠 클론코딩(ft.프론트엔드)

목록 보기

6/16

들어가며

웹 애플리케이션에서 로그인 시스템을 효과적으로 구현하는 것은 사용자 경험과 보안 모두를 보장하는 데 중요합니다. 이 튜토리얼에서는 Apollo Client를 사용하여 React 애플리케이션에서 사용자 인증을 처리하는 방법을 보여주며, 데이터 처리에는 GraphQL을 활용합니다.

용어 설명

React: 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리
Apollo Client: GraphQL을 사용하여 로컬 및 원격 데이터 모두를 관리할 수 있는 종합적인 상태 관리 라이브러리
GraphQL: API의 쿼리 언어

로그인 시스템 구현 단계

1. 로그인을 위한 GraphQL 뮤테이션 설정

로그인 기능은 GraphQL 뮤테이션을 통해 구동됩니다. 해당 뮤테이션은 다음과 같이 정의됩니다:

mutation login($loginInput: LoginInput!) {
  login(input: $loginInput) {
    ok
    token
    error
  }
}

이 뮤테이션은 사용자의 이메일과 비밀번호를 포함하는 LoginInput 타입을 받고, 로그인이 성공하면 ok, token, 실패하면 error 메시지를 반환합니다.

2. 로그인 폼 생성

react-hook-form을 사용하여 폼 상태와 검증을 관리합니다:

import { useForm } from "react-hook-form";

const { register, handleSubmit, getValues, formState: { errors, isValid } } = useForm({
    mode: "onChange",
});

const onSubmit = () => {
    const { email, password } = getValues();
    loginMutation({
        variables: {
            loginInput: {
                email,
                password,
            },
        },
    });
};

폼 필드는 register를 통해 관리되며, 폼 제출은 handleSubmit이 처리하며 onSubmit 함수를 트리거합니다.

3. 로그인 뮤테이션 처리

Apollo Client의 useMutation 훅을 사용하여 로그인 뮤테이션을 처리합니다:

const [loginMutation, { data: loginMutationResult, loading }] = useMutation<LoginMutation, LoginMutationVariables>(LOGIN_MUTATION, {
    onCompleted,
});

const onCompleted = (data: LoginMutation) => {
    const { login: { ok, token } } = data;
    if (ok && token) {
        localStorage.setItem(LOCALSTORAGE_TOKEN, token);
        authTokenVar(token);
        isLoggedInVar(true);
    }
};

onCompleted는 뮤테이션이 완료될 때 트리거되며 토큰 저장과 상태 업데이트를 처리합니다.

4. 인증을 포함한 Apollo Client 설정

HTTP 헤더를 관리하기 위해 createHttpLink와 setContext를 Apollo Client 설정에 포함합니다:

const httpLink = createHttpLink({ uri: "http://localhost:4000/graphql" });

const authLink = setContext((_, { headers }) => ({
    headers: {
        ...headers,
        "x-jwt": authTokenVar() || "",
    },
}));

const client = new ApolloClient({
    link: authLink.concat(httpLink),
    cache: new InMemoryCache(),
});

이 설정은 사용 가능한 경우 모든 GraphQL 요청에 JWT를 포함하도록 보장합니다.

5. 웹 소켓 연결 보안

애플리케이션이 구독을 사용하는 경우, 비슷한 토큰 기반 인증으로 보안을 강화합니다:

const wsLink = new GraphQLWsLink(createClient({
    url: "ws://localhost:

4000/graphql",
    connectionParams: {
        "x-jwt": authTokenVar() || "",
    },
}));