[BE] OAuth 로그인 인증 시스템 초기 구축

[viaunixue]

💡 작업 내용

OAuth 구현 및 인증 업데이트

• Google OAuth 로그인 흐름을 구현했습니다.
• OAuth 콜백 처리를 위해 /auth/{provider}/callback 엔드포인트를 추가
• 토큰 저장소를 'localStorage'에서 'HttpOnly' 쿠키로 변경
• OAuth 로그인 성공 시 액세스 및 새로 고침 토큰에 대한 쿠키를 설정
• 인증 성공 후 사용자를 Front-end 애플리케이션으로 리디렉션

토큰 관리를 위한 Redis 통합

• 콜백 중 유효성 검사를 위해 OAuth 상태를 저장하는 통합 Redis 등록
• 새로 고침 토큰을 저장, 검색 및 삭제하는 Redis 기능이 추가
• Docker의 Redis 연결 및 데이터 지속성 문제가 해결
• 애플리케이션 시작 중에 Redis의 상태와 연결을 확인하는 논리를 구현

Back-end API 업데이트

• 인증을 위해 쿠키에서 사용자 정보를 검색하도록 '/users/info' 엔드포인트를 업데이트
• 쿠키의 액세스 토큰을 사용하도록 사용자 인증 미들웨어를 수정
• 저장된 새로 고침 토큰을 사용하여 새로운 액세스 및 새로 고침 토큰을 생성하도록 '/token/refresh' 엔드포인트가 향상되었습니다.
• OAuth 인증 및 Redis 작업 문제 해결을 위한 로깅이 추가

Front-end 개선

• React에서 전역적으로 사용자 인증 상태 관리하기 위해 AuthContext 만듦
• 로그인 후 홈 페이지로 올바르게 리디렉션되도록 OAuth 콜백 로직을 업데이트
• 로그인 성공 후 사용자 정보를 표시하도록 'Home' 구성 요소를 리팩터링
• 쿠키를 삭제하고 인증 상태를 재설정하는 로그아웃 기능을 추가

버그 수정 및 개선

• Docker 설정에서 Redis 키가 제대로 유지되지 않는 문제가 해결
• OAuth 콜백 URL이 프런트엔드로 올바르게 리디렉션되지 않는 문제가 수정
• 잘못된 생성 논리로 인해 액세스 토큰과 새로 고침 토큰이 동일해지는 문제를 해결

🫨 고민한 부분

• 인증, 인가는 새로 고침 토큰 인증 흐름을 생각 중인데 아래 flow 보시고 의견 주시길 바랍니당
  1. 로그인 성공하면 새로 고침 토큰이 HttpOnly 쿠키에 저장
     a. 새로고침 토큰은 HttpOnly 쿠키로 저장되므로 JavaScript에서 직접 접근 불가
  2. URL 새로 고침 시 액세스 토큰 새로 고침
     a. 사용자가 페이지를 새로 고치거나 새 URL로 이동할 때마다 새 액세스 토큰을 얻기 위해 백엔드에 요청을 보냅니다.
     b. 이 요청에는 HttpOnly 쿠키로 저장되므로 브라우저에서 자동으로 전송하는 새로 고침 토큰이 포함
  3. 새 액세스 토큰 발행
     a. 백엔드는 새로 고침 토큰을 확인하고 유효한 경우 프런트엔드에 새로운 액세스 토큰을 발급
     b. 새 액세스 토큰은 API 호출 시 안전하고 임시적으로 사용할 수 있도록 JavaScript 개인 변수에 저장

📌 중점적으로 볼 부분

• OAuth 상태 및 새로 고침 토큰을 저장하기 위한 값을 Redis 에 저장합니다.

• /auth/{provider}/callback 엔드포인트가 잘 작동하는지 확인 부탁드립니다.

🎯 테스트 결과

사용자 정보 DB 저장 성공

Refresh Token, State Redis 저장 성공

🎇 동작 화면

네이버 로그인 성공

카카오 로그인 성공

구글 로그인 성공

Refresh 토큰 갱신 성공

📗 참고 자료 (선택)

• scripts 디렉토리에 start-dev.sh 파일 구동시키면 쉽게 프론트, 백엔드 서비스 한번에 백그라운드로 작동시키실 수 있습니다!
  → 사용방법
  1. docker-compose.yml 파일에 postgresql, redis db 구동하기
  2. 기존 포트 8000번, 3000번 비워두기
  3. scripts 경로에서 ./start-dev.sh 명령어 실행
  4. 크롬 시크릿 창으로 테스트 진행
  5. 개발이 끝나면 sudo losf -i :{포트번호} 명령어로 PID 번호 확인하고 sudo kill -9 {PID번호} 명령어로 포트 정리 필수!

🙏리뷰 요구사항(선택)

🚩 후속 작업 (선택)

• 카카오, 네이버 리다이렉트는 인증 라이브러리 문제로 조금만 더 작업해보겠습니다.

✅ 셀프 체크리스트

• PR 제목을 형식에 맞게 작성했나요?
• 브랜치 전략에 맞는 브랜치에 PR을 올리고 있나요?
• 이슈는 close 했나요?
• Reviewers, Labels, Projects를 등록했나요?
• 작업 도중 문서 수정이 필요한 경우 잘 수정했나요?
• 테스트는 잘 통과했나요?
• 불필요한 코드는 제거했나요?

💫 기타사항

close #17 #18 #10

[PracticeKJY]

확인했습니다.

[Miaash]

확인했습니다.