나혼자 미슐랭 개발일지 #7 – 로그인 / 회원가입 / 카카오 로그인 기능 구현

범위: JWT 기반 인증 시스템 구현, 로그인/회원가입 API, 카카오 OAuth 연동, 프론트 연동 및 토큰 처리

 

 

그동안 데이터만 주고받던 편안한 API들과는 다르게,
이번엔 사용자 인증이라는 큰 산을 마주하게 됐다.

 

1. 전체 흐름 구성 – JWT 기반 인증 시스템

처음에는 그냥 로그인/회원가입만 만들 생각이었지만,
리뷰 작성, 마이페이지 접근 등 사용자 인증이 필요한 기능이 많아질 걸 고려해서
처음부터 JWT 기반 구조로 설계하기로 했다.

 

회원가입 → 유저 DB 저장 (비밀번호 암호화 포함)

로그인 → 이메일 & 비밀번호 확인 → JWT 토큰 발급
이후 모든 요청은 Authorization: Bearer <token>으로 인증

 

Spring Security 없이 순수하게 커스텀 필터 + JwtUtil로 처리했다.

 

 

2. 로그인 / 회원가입 API

회원가입 흐름:

• UserRequest DTO로 유저 정보 전달
• 이메일 중복 검사
• 비밀번호는 BCryptPasswordEncoder로 암호화 후 저장

 

 

로그인 흐름:

• DB에서 이메일로 사용자 조회
• PasswordEncoder.matches()로 비밀번호 비교
• JWT 발급 후 응답

 

3. 카카오 로그인 연동

진짜 여기가 오늘의 고생의 하이라이트였다.
카카오 로그인 붙이겠다고 했다가... 500, 400, 토큰 null, redirect loop, 콘솔 에러까지 다 보았다,,

 

삽질 로그:

• ❌ client_secret 안 쓰고 있는데 카카오에서 토큰 요청 실패 → 확인해보니 보안 설정이 사용 안 함으로 되어 있어 해결
• ❌ redirect_uri 등록이 안 되어 있어서 계속 redirect_mismatch 오류 → 카카오 개발자센터에 정확한 URI 등록으로 해결
• ❌ 토큰 받아오는 중 tokenNode null → 응답 JSON 파싱 위치 잘못 잡음 (ObjectMapper로 수정)
• ❌ 콘솔로 리다이렉트 되는데 유저 정보 디코딩 실패 → JWT에 userId가 없어서 프론트에서 유저 식별 못 함

 

 

4. 카카오 OAuth 전체 흐름

1. /api/auth/kakao → 카카오 로그인 페이지 리디렉션
2. 로그인 후 받은 code를 서버로 전달
3. 서버가 code로 카카오에 토큰 요청
4. 사용자 정보 요청 (이메일, 닉네임 등)
5. 우리 DB에 유저 없으면 자동 회원가입
6. JWT 발급해서 프론트로 넘겨줌  

처음엔 이걸 단일 메서드에서 처리하려 했는데,  요청/응답 포맷부터 에러 처리까지 워낙 복잡해서 메서드 분리해서 깔끔하게 구성했다.

 

 

 

5. 프론트 연동 – 토큰 저장 & 로그인 유지

• 로그인 성공 시 JWT를 localStorage에 저장
• 이후 모든 페이지 진입 시 jwtDecode()로 파싱해서 사용자 정보 유지
• 카카오 로그인은 리디렉션으로 token 쿼리 파라미터가 오기 때문에
  window.location.href 파싱해서 localStorage 저장하고 홈으로 리디렉트

추가 고려사항:

• ❌ 토큰 디코딩에 실패하는 경우 → 로그인 필요 알림 + /login 이동
• ❌ 백엔드에서 토큰 없이 보호된 API 호출 시 403 발생 → 에러 메시지 정리 중