로그인에 대해 살펴보기 전에 우선은 기초 지식이 필요함. 아래의 링크 참고.

로그인 자료

토큰 관리 방식

대표적으로 웹 스토리지(로컬 스토리지/세션 스토리지)를 이용하는 방법과 쿠키를 이용하는 방법이 있는데 그 중에서 이번 프로젝트에서는 로컬 스토리지를 이용하는 방법을 선택함

• 세션 스토리지를 이용하지 않는 이유? 탭을 닫거나 창을 닫으면 날아감
• 쿠키를 사용하지 않은 이유?
  • 보안상 쿠키를 이용하는게 무조건 맞음
  • 그러나 로그인 경험이 없는 사람들끼리 개발을 진행하는 상황을 고려해서 쿠키보다는 더 접근성이 좋고 사용이 쉬운 로컬 스토리지를 이용하기로 함
    • 쿠키를 사용하려면 백엔드에서 httpOnly, secure 옵션 설정을 도와줘야 하는데 쿠키를 사용하지 않기로 해서 Response의 Body를 통해 토큰을 전달해주기로 합의
  • 로컬 스토리지를 사용할 때 주의점?
    • XSS(Cross Site Scripting) 공격에 취약하다! → 그러나 우리 프로젝트에서는 사용자로부터 입력을 받는 기능이 많지 않으므로 크롱님께서 그대로 진행해도 된다고 하심
    • 또한 혹시 모를 공격을 대비해 dangerouslyInnerHtml 사용한 코드를 싹 다 제거

로그인 플로우

프로젝트에 적용된 로그인 구조

로그인 로직

⚠️ 주의! 여기에 쓰인 코드는 추후에 원작자 맘에 안들면 변경될 수 있음! (이미 최종 프로젝트 Q&A에서 까여서 어차피 고쳐야함 흑흑)

• 로그인 로직은 총 3개의 커스텀 훅으로 이루어져 있음
• 각각의 커스텀 훅에서 throw를 통해 에러를 상위 함수로 전파시킴 → 마지막에는 ErrorBoundary에 도달하여 여기서 일괄적으로 400 또는 401 에러를 처리
• 이번에 message, statusCode가 모두 쓰이는 에러 처리를 위해 Error 객체를 상속받아서 커스텀 에러 객체인 CommonError 객체를 만들어서 사용했는데 이 구조를 잘 봐두면 좋을 것 같음

useValidateToken.ts

import { useContext } from 'react';

import { getLocalStorage } from '@/utils';
import { CommonError } from '@/utils/CommonError';
import { API_URL } from '@/constants';

import { AuthContext } from '@/AuthProvider';

export function useValidateToken() {
  const { setIsSignin, setUserName } = useContext(AuthContext);

  const accessToken = getLocalStorage('accessToken');
  const refreshToken = getLocalStorage('refreshToken');

  async function tokenValidator() {
    if (accessToken === null && refreshToken === null) {
      throw new CommonError('토큰이 없습니다.', 401);
    }

    try {
      const response = await fetch(`${API_URL}/auth/access-token/validate`, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${accessToken}`,
        },
      });

      const { statusCode, message, data } = await response.json();

      if (!response.ok) {
        throw new CommonError(message, statusCode);
      }

      setIsSignin(true);
      setUserName(data.userName);
    } catch (error) {
      if (error instanceof CommonError) {
        const { statusCode, message } = error;

        if (statusCode === 401) {
          setIsSignin(false);
          localStorage.clear();
          throw new CommonError(message, statusCode);
        } else {
          throw new CommonError(message, statusCode);
        }
      } else {
        throw new Error(String(error));
      }
    }
  }

  return { tokenValidator };
}

• 액세스 토큰의 유효성을 검증하는 커스텀 훅