간편로그인 플로우

1. 서버 액션 (Server Actions)
   • requestLoginUrl(provider: string)
     • 사용자가 로그인 요청을 하면, 해당 SNS 제공자의 로그인 URL을 가져옴.
     • provider 값을 API에 맞게 변환한 후 사용.
     • 모바일 여부를 확인해 platform을 설정 (PC/Mobile).
     • redirectUri를 설정한 뒤 SNS 로그인 URL 요청.
     • 최종적으로 SNS 로그인 URL 반환.
   • openIdLoginProcess(provider: string, code: string, state: string | null)
     • SNS 로그인 후 리디렉션된 사용자의 로그인 데이터를 API에 전달.
     • 받은 인증 코드(code)와 상태 값(state)을 포함해 API 요청.
     • 인증 성공 시 accessToken 반환.
2. 클라이언트 측 콜백 페이지 (AuthCallbackPage)
   • 사용자가 SNS 로그인을 완료한 후 해당 페이지로 리디렉션됨.
   • URL에서 code, state, error를 추출.
   • openIdLoginProcess를 실행하여 서버에 로그인 요청.
   • 로그인 성공 시 accessToken을 저장하고, 필요에 따라 회원가입 페이지로 이동.
   동작 과정:
   • useEffect를 통해 params.provider 값이 있을 경우 로그인 처리 실행.
   • SNS 로그인 후 받은 code와 state 값을 가져옴.
   • 사용자가 로그인을 취소했을 경우 로그인 페이지로 이동.
   • openIdLoginProcess 실행 후 결과 처리:
     • accessToken이 있으면 토큰을 저장하고 홈페이지(/)로 이동.
     • 추가 회원가입이 필요하면 회원가입 완료 페이지(/signup/complete)로 이동.
3. SNS별 로그인 처리 (각 /route.ts 파일)
   • 공통 흐름:
     • SNS 인증 코드(code)를 사용하여 해당 SNS에서 액세스 토큰 요청.
     • 액세스 토큰을 사용해 사용자 정보를 조회.
     • 서버 API(/api/member/auth/login/sns)로 로그인 요청.
     • 로그인 성공 시 accessToken을 쿠키에 저장하고 리디렉션.
     • 기존 회원이 아니라면 joinAction을 실행하여 회원가입 후 로그인 처리.
   SNS별 세부 처리:
   • Apple 로그인 (apple/route.ts)
     • JWT를 생성하여 Apple 서버에 인증 요청.
     • id_token을 디코딩하여 사용자 정보 추출.
     • 기존 회원이면 로그인, 신규 회원이면 회원가입 후 로그인 처리.
   • Kakao 로그인 (kakao/route.ts)
     • kauth.kakao.com/oauth/token API를 호출해 액세스 토큰 획득.
     • kapi.kakao.com/v2/user/me API로 사용자 정보 조회.
     • 기존 회원이면 로그인, 신규 회원이면 회원가입 후 로그인 처리.
   • Naver 로그인 (naver/route.ts)
     • nid.naver.com/oauth2.0/token API를 호출해 액세스 토큰 획득.
     • openapi.naver.com/v1/nid/me API로 사용자 정보 조회.
     • 기존 회원이면 로그인, 신규 회원이면 회원가입 후 로그인 처리.
4. 정리
   • requestLoginUrl: SNS 로그인 URL 요청.
   • openIdLoginProcess: SNS 로그인 후 액세스 토큰 받아오기.
   • AuthCallbackPage: 로그인 완료 후 처리 (홈 이동 또는 회원가입).
   • /route.ts 파일들: SNS별 로그인 API 처리

소셜 로그인 프로바이더 별 처리

1️⃣ 애플 로그인 처리 (apple/route.ts)

애플 OAuth 토큰을 jwt.sign()을 통해 생성하여 서버에 전송 후 로그인 처리

2️⃣ 카카오 로그인 처리 (kakao/route.ts)

1. 카카오 인증 서버(https://kauth.kakao.com/oauth/token)에 code를 보내 access_token을 받음
2. 받은 액세스 토큰을 이용해 https://kapi.kakao.com/v2/user/me에서 사용자 정보를 가져옴
3. 회원 가입 여부 확인
   • 이미 가입한 사용자라면 토큰을 저장하고 /로 이동
   • 신규 사용자라면 /signup/complete?name=...&email=...로 이동하여 추가 정보 입력

3️⃣ 네이버 로그인 처리 (naver/route.ts)

1. 네이버 인증 서버(https://nid.naver.com/oauth2.0/token)에 code를 보내 access_token을 받음
2. 받은 액세스 토큰을 이용해 https://openapi.naver.com/v1/nid/me에서 사용자 정보를 가져옴
3. 회원 가입 여부 확인
   • 가입한 사용자라면 토큰 저장 후 /로 이동
   • 신규 사용자라면 /signup/complete?name=...로 이동하여 추가 정보 입력

---

📌 최종 흐름 정리

mermaid

코드 복사

sequenceDiagram participant User as 사용자 participant Browser as 브라우저 participant SocialLogin as 네이버/카카오/애플 participant Server as 서버 (Next.js API) User ->> Browser: 소셜 로그인 버튼 클릭 Browser ->> SocialLogin: OAuth 인증 요청 SocialLogin ->> Browser: 로그인 완료 후 redirect Browser ->> Server: /auth/callback?code=... Server ->> SocialLogin: 액세스 토큰 요청 SocialLogin ->> Server: 액세스 토큰 반환 Server ->> SocialLogin: 사용자 정보 요청 SocialLogin ->> Server: 사용자 정보 반환 Server ->> Browser: JWT 토큰 저장 & 로그인 완료 Browser ->> User: 홈 화면으로 이동

---

📌 결론

✔️ OAuth 로그인 콜백을 처리하여 토큰을 발급받고 로그인 상태를 유지
✔️ 사용자 인증이 완료되면 액세스 토큰을 쿠키에 저장
✔️ 최초 로그인 시 추가 정보 입력을 위해 /signup/complete으로 이동
✔️ 로그인 실패 시 /login으로 이동