1. 기능의 동작 원리와 순서
로그인 프로세스
사용자 인증 요청:
- 사용자는 이메일과 비밀번호를 입력하여 로그인을 시도합니다.
- 프론트엔드는 이 정보를 백엔드로 전송합니다.
백엔드 처리:
- 백엔드는 받은 이메일과 비밀번호를 검증합니다.
- validateUserPassword 함수를 통해 사용자가 존재하고 비밀번호가 올바른지 확인합니다.
- 인증이 성공하면, 사용자에 대한 액세스 토큰과 리프래시 토큰을 생성합니다(generateAccessToken, generateRefreshToken).
토큰 전송:
- 생성된 토큰들은 사용자에게 반환됩니다.
- 리프래시 토큰은 HTTP-Only 쿠키에 저장되어 보안을 강화합니다.
프론트엔드 처리:
- 프론트엔드는 받은 액세스 토큰을 저장하고 사용자 인증 상태를 관리합니다.
로그아웃 프로세스
로그아웃 요청:
- 사용자가 로그아웃을 요청합니다.
- 프론트엔드는 이 요청을 백엔드로 전송합니다.
백엔드 처리:
- 백엔드에서는 요청된 리프래시 토큰을 검증합니다.
- 리프래시 토큰이 유효하면, 로그아웃 기능이 동작하며 해당 토큰을 무효화합니다(invalidateRefreshToken).
로그아웃 확인:
- 백엔드는 로그아웃 성공 응답을 프론트엔드에 전달합니다.
- 프론트엔드는 사용자의 인증 상태를 '없음'으로 업데이트합니다.
2. 코드 파일의 구성
프론트엔드
-
LoginPage.tsx:
로그인 페이지의 UI를 담당하는 컴포넌트입니다.
사용자가 로그인 정보를 입력할 수 있는 폼을 제공합니다. -
LoginForm.tsx:
실제 로그인 폼 UI와 로직을 구현한 컴포넌트입니다.
이메일, 비밀번호 입력 및 제출 버튼이 포함되어 있습니다. -
useLogin.ts:
로그인 관련 상태 및 액션을 처리하는 커스텀 훅입니다.
백엔드와의 통신을 관리하며, 로그인 상태를 관리합니다. -
useLogout.ts:
로그아웃 기능을 구현하는 커스텀 훅입니다.
로그아웃 요청을 보내고 상태를 업데이트합니다. -
authService.ts:
로그인 및 로그아웃 요청을 처리하는 서비스 계층의 코드입니다.
백엔드 API와의 실제 통신을 담당합니다. -
auth.ts, authSlice.ts, authtypes.ts:
Redux를 사용하여 인증 관련 상태를 관리하는 로직입니다.
액션 생성자, 리듀서, 타입 정의 등이 포함됩니다.
백엔드
-
authRoutes.js:
로그인, 로그아웃, 회원가입 등의 인증 관련 라우트를 정의합니다.
-
authController.js:
인증 관련 요청을 처리하는 컨트롤러입니다.
각 라우트에 대한 실제 로직을 구현합니다. -
error.js:
에러 처리를 위한 사용자 정의 에러 클래스를 제공합니다.
-
authenticateToken.js:
JWT 토큰을 검증하는 미들웨어입니다.
액세스 토큰과 리프래시 토큰을 검증합니다. -
authService.js:
사용자 데이터와 토큰 관련 데이터베이스 작업을 처리합니다.
-
tokenService.js, tokenUtils.js:
토큰 생성, 저장, 검증 및 무효화 로직을 담당합니다.
-
authUtils.js:
입력 데이터의 유효성 검사를 수행하는 유틸리티 함수입니다.
3-1. 로그인/로그아웃 기능의 특징 - 프론트엔드
커스텀 훅의 사용 (useLogin.ts, useLogout.ts):
로그인과 로그아웃 관련 로직을 별도의 커스텀 훅으로 관리합니다. 이는 로직의 재사용성과 모듈성을 높이며, 관리를 용이하게 합니다.
상태 관리와 API 호출 등의 복잡한 로직을 컴포넌트에서 분리하여 가독성과 유지보수성을 향상시킵니다.
폼 처리와 유효성 검사 (LoginForm.tsx):
로그인 폼에서의 사용자 입력 처리와 유효성 검사를 수행합니다. 올바른 입력이 이루어졌는지 확인하는 데 중요합니다.
사용자에게 즉각적인 피드백을 제공하여 사용자 경험을 향상시킵니다.
서비스 레이어의 분리 (authService.ts):
백엔드와의 모든 인증 관련 네트워크 요청을 authService.ts 파일에서 처리합니다. 이렇게 함으로써 네트워크 로직을 한 곳에서 관리할 수 있습니다.
사용자 인증 상태 관리 (authSlice.ts):
Redux를 사용하여 애플리케이션의 사용자 인증 상태를 관리합니다. 전역적인 상태 관리를 통해 다양한 컴포넌트에서 인증 상태를 쉽게 접근하고 업데이트할 수 있습니다.
3-2. 로그인/로그아웃 기능의 특징 - 백엔드
JWT 기반 인증 시스템 (authController.js, tokenUtils.js):
JWT (JSON Web Tokens)를 사용하여 사용자 인증을 처리합니다. 이는 안전하고 효율적인 사용자 인증 및 권한 부여 방법을 제공합니다.
액세스 토큰과 리프래시 토큰을 생성하고 관리하는 로직을 포함합니다.
토큰 검증 및 관리 (authenticateToken.js, tokenService.js):
요청에서 JWT를 검증하는 미들웨어를 구현하여 인증된 요청만을 처리할 수 있도록 합니다.
리프래시 토큰을 데이터베이스에 저장하고 관리하는 로직을 포함하여 보안성을 강화합니다.
에러 핸들링 및 관리 (error.js):
다양한 종류의 에러를 처리하는 사용자 정의 에러 클래스를 구현합니다. 이를 통해 발생 가능한 에러를 명확하게 관리하고 적절한 응답을 할 수 있습니다.
보안 및 안전성 (authUtils.js, authController.js):
비밀번호 해싱 및 입력 데이터의 검증을 포함하여, 사용자 데이터의 보안을 강화합니다.
SQL 인젝션과 같은 보안 취약점을 방지하기 위한 조치를 포함합니다.
4. 취약점과 개선 사항
프론트엔드:
- 폼 처리 및 유효성 검사 개선 (LoginForm.tsx):
로그인 폼의 유효성 검사를 강화하여 사용자가 올바른 데이터를 입력하도록 해야 합니다. 특히, 입력된 비밀번호의 안전성을 확인하는 로직을 추가하는 것이 좋습니다.
- 에러 핸들링 개선 (useLogin.ts, authService.ts):
사용자에게 더 명확한 에러 메시지를 제공하고, 다양한 네트워크 및 서버 에러에 대응할 수 있도록 에러 핸들링을 개선해야 합니다.
백엔드:
- 보안 취약점 감소 (authController.js, authService.js):
입력된 데이터에 대한 검증 및 SQL 인젝션 방지를 위한 추가적인 보안 조치를 도입해야 합니다. 쿼리 파라미터화를 통한 SQL 인젝션 방지가 필요합니다.
- 에러 처리 및 로깅 개선 (error.js):
보다 상세한 에러 처리 로직을 추가하여 시스템의 안정성을 높이고, 로깅 시스템을 통해 예상치 못한 오류를 쉽게 추적하고 분석할 수 있도록 해야 합니다.
- 입력 데이터 검증 강화 (authUtils.js):
서버 측에서의 입력 데이터 검증을 강화하여 클라이언트 측 검증에만 의존하지 않도록 해야 합니다. 이는 악의적인 사용자로부터의 부적절한 입력을 방지하는 데 중요합니다.
