1. 기능의 동작 원리와 순서

초기 로그인

• 사용자가 이메일과 비밀번호를 입력하여 로그인을 요청합니다.
• fetchLogin 함수는 로그인 요청을 백엔드로 전송합니다.
• 백엔드의 loginHandler는 요청을 받아 사용자 인증을 수행합니다.
• 인증에 성공하면, 백엔드는 액세스 토큰과 리프레시 토큰을 생성하여 반환합니다.
• 프론트엔드는 이 토큰들을 받아 사용자의 로그인 상태를 관리합니다.

로그인 상태 유지

• 프론트엔드는 useCheckAuth 훅을 사용하여 로그인 상태를 모든 컴포넌트가 렌더링될 때마다 주기적으로 검증합니다.
• fetchCheckAuth 함수를 통해 현재 액세스 토큰의 유효성을 백엔드에 확인합니다.
• 액세스 토큰이 유효하지 않을 경우, fetchNewAccessToken 함수를 통해 리프레시 토큰을 사용하여 새 액세스 토큰을 요청합니다.
• 백엔드에서는 refreshTokenHandler를 통해 리프레시 토큰의 유효성을 확인하고 새로운 액세스 토큰을 발급합니다.
• 프론트엔드는 useCheckAuth 훅으로 사용자의 로그인 상태를 검증합니다.
• 상태가 유효하지 않을 경우, Redux에서 관리하는 로그인 상태를 false로 변경합니다.

2. 코드 파일의 구성

프론트엔드

• App.tsx:

  애플리케이션의 메인 엔트리 포인트로, 라우팅과 전역 상태 관리를 설정합니다.
  Redux 스토어를 활용하여 애플리케이션의 전역 상태를 관리합니다.

• useCheckAuth.ts (Custom Hook):

  사용자 인증 상태를 확인하는 커스텀 훅으로, 액세스 토큰을 활용하여 사용자 인증 상태를 검증합니다.
  토큰 만료 시 새로운 액세스 토큰을 요청하여 로그인 상태를 유지합니다.

• authService.ts (Service Layer):

  프론트엔드에서 서버로의 인증 관련 API 요청을 처리하는 서비스 레이어입니다.
  로그인, 로그아웃, 토큰 갱신 등의 API 요청 함수를 포함합니다.

• authSlice.ts (Redux Slice):

  인증 관련 상태를 관리하는 Redux 슬라이스입니다.
  사용자 정보, 액세스 토큰, 로그인 상태 등을 Redux 스토어에서 관리합니다.

백엔드

• app.js:

  Express 애플리케이션의 메인 파일로, 미들웨어와 라우트 설정을 담당합니다.
  CORS, 쿠키 파서 등의 필요한 미들웨어를 구성합니다.

• authRoutes.js (Routing Layer):

  인증 관련 엔드포인트(로그인, 로그아웃, 토큰 갱신 등)를 정의하는 라우터입니다.
  각 엔드포인트에 대응하는 컨트롤러 함수를 매핑합니다.

• authenticateToken.js (Middleware):

  액세스 토큰과 리프레시 토큰을 검증하는 미들웨어입니다.
  토큰 유효성 검사와 사용자 인증 정보 추출을 수행합니다.

• authController.js (Controller Layer):

  인증 관련 요청(로그인, 로그아웃, 토큰 갱신 등)을 처리하는 컨트롤러 함수들을 포함합니다.
  요청에 따라 적절한 서비스 로직을 호출하고 응답을 구성합니다.

• authService.js (Service Layer):

  인증 관련 비즈니스 로직을 담당하는 백엔드 서비스 레이어 파일입니다.
  사용자 정보 조회, 비밀번호 검증, 토큰 생성 및 검증 등의 기능을 제공합니다.

3-1. 로그인 상태 검증 및 유지 기능의 특징 - 프론트엔드

Redux를 이용한 상태 관리 (authSlice.ts)

로그인 상태, 사용자 정보, 액세스 토큰 등을 Redux 스토어를 통해 관리합니다.
loginSuccess, loginFailure, logout 등의 리듀서를 사용하여 로그인 상태를 업데이트합니다.

커스텀 훅 활용 (useCheckAuth.ts)

로그인 상태를 확인하고 유지하는 로직을 커스텀 훅에 구현하여, 이를 다양한 컴포넌트에서 재사용합니다.
사용자의 인증 상태를 서버에 확인하고, 필요한 경우 새로운 액세스 토큰을 요청합니다.

서비스 레이어 (authService.ts)

서버와의 통신을 관리하는 로직을 서비스 레이어에 분리하여 구현합니다.
fetchLogin, fetchLogout, fetchCheckAuth 등의 함수를 통해 API 요청을 수행합니다.

3-2. 로그인 상태 검증 및 유지 기능의 특징 - 백엔드

미들웨어 활용 (authenticateToken.js)

JWT를 이용한 액세스 토큰과 리프레시 토큰의 유효성을 검증하는 미들웨어를 구현합니다.
authenticateAccessToken과 authenticateRefreshToken 함수를 통해 토큰을 검증합니다.

라우팅 및 컨트롤러 (authRoutes.js, authController.js)

로그인, 로그아웃, 토큰 재발급 등의 인증 관련 라우팅을 설정합니다.
각 라우트에 대응하는 컨트롤러 함수를 구현하여 요청을 처리합니다.

비즈니스 로직과 데이터베이스 연동 (authService.js)

사용자 인증, 토큰 생성, 비밀번호 해싱 등의 핵심 비즈니스 로직을 구현합니다.
데이터베이스 연결과 쿼리 실행을 담당합니다.

4. 취약점과 개선 사항

프론트엔드:

• 보안 강화

액세스 토큰 보안: 액세스 토큰이 클라이언트 측에 저장되어 있다면, 쿠키나 localStorage에 저장 시 보안 취약점이 생길 수 있으므로 보안을 강화할 필요가 있습니다.

• 에러 핸들링 개선 (useCheckAuth.ts, authService.ts)

더 명확한 에러 메시지와 핸들링 로직이 필요합니다. 사용자가 이해하기 어려운 기술적인 오류 메시지 대신, 사용자 친화적인 메시지를 제공해야 합니다.
네트워크 요청 실패나 서버로부터의 오류 응답 처리를 강화해야 합니다.

백엔드

• SQL 인젝션 방어

현재 코드 리뷰에서는 SQL 인젝션에 대한 명시적인 방어 로직을 확인할 수 없습니다. SQL 쿼리 파라미터화나 ORM 사용을 통해 SQL 인젝션 공격을 방어해야 합니다.

• 비밀번호 저장 방식

비밀번호 해싱에 bcrypt를 사용하는 것은 좋으나, 해싱 알고리즘의 강도 설정(예: bcrypt의 솔트 라운드 수)에 대한 고려가 필요합니다. 보안 요구사항에 따라 해싱 강도를 조정해야 합니다.

• 에러 처리 및 로깅 (authController.js)

현재 에러 처리 로직은 기본적인 수준에 머무르고 있습니다. 예외 상황에 대한 보다 상세한 에러 처리와 로깅 시스템을 구현하여 시스템의 안정성을 높일 필요가 있습니다.
예상치 못한 오류 추적 및 디버깅을 용이하게 하기 위해 로깅 시스템의 도입을 고려해야 합니다.

• 입력 데이터 검증 (authUtils.js)

서버 측에서의 입력 데이터 검증 로직을 강화해야 합니다. 클라이언트 측 검증만으로는 충분하지 않으며, 서버 측에서도 유효성 검증을 통해 부적절한 데이터의 처리를 방지해야 합니다.