Feat/#5: 카카오 로그인 구현

[minjeongss]

#️⃣ 연관된 이슈

#7

📝 작업 내용

• auth 기본 구조 구성
  • jwt, session 관리
  • 보안 관리
• 카카오 로그인 구현
• 로그인 페이지에서 카카오 로그인의 accessToken 확인

📸 스크린샷

로그인 전	카카오 로그인 입장	카카오 로그인 최종	로그인 후

💬 리뷰 요구사항

구현 완료한 사항

• auth의 providers. callbacks에 대한 설정을 완료했습니다.
  • 보안에 대한 추가적인 설정이 필요하다면 알려주세요!
  • jwt, session에서 추가적인 등록이 필요하다면 알려주세요! (현재 accessToken, refreshToken 등록중)
• 로그인 페이지에서 accessToken(jwt) 접근이 가능합니다.

추가 구현에 인지해야 하는 사항

클라이언트에서 카카오 로그인 > accessToken 접근까지 완료했습니다. 이전에 논의한 백엔드에서 발급하는 jwt 토큰 발급 및 db에 저장된 사용자 정보 활용 방법을 찾아봤는데, 다음처럼 진행하면 될 것 같습니다.

프론트엔드

1. 클라이언트에서 카카오 로그인 성공
2. NextAuth가 카카오 access token을 받음
3. 카카오 토큰을 Spring Boot 백엔드로 전송

const getBackendToken = async () => {
  const response = await fetch('/api/auth/token', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${session?.accessToken}` // 카카오 토큰
    }
  });
  const { token } = await response.json(); // 백엔드 JWT 받기
  return token;
};

백엔드

4. 카카오 토큰으로 사용자 정보를 확인
5. DB에서 해당 사용자 조회 (없으면 새로 생성)
6. 백엔드만의 JWT 토큰 생성 (사용자 권한, ID 등 포함)
7. JWT 토큰을 클라이언트에 반환

프론트엔드

8. 모든 API 통신은 백엔드가 발급한 JWT로 진행

[minjeongss]

• providers: 카카오만 등록되어 있고, 이곳에 애플을 등록하시면 됩니다.
• session, secret: jwt관련 설정
• callbacks
  • jwt: token 등록
  • session: session 등록
  • signIn: user의 email이 없다면 로그인에 실패하도록 설정했습니다. (저희는 email로 구분을 하니까요!)

auth에 대한 구조를 위와 같이 구성했습니다.

[aaahyesu]

구조 확인했어요 ! 정리해주신덕에 조금은 수월하게 작업하지 않을까 싶네요 !
구분자 == 이메일 잊지않고 마저 로그인 구현하겠습니다아 🤍

[minjeongss]

useSession을 통해 accessToken에 접근 가능합니다.

[aaahyesu]

전반적으로 차근히 훑어봤는데 꼼꼼하게 잘 해주신 것 같네요!
마저 애플로그인 관련 작업하면서 논의 필요한 부분은 바로바로 말씀드릴게요 👍