소셜 로그인의 경우 구글과 카카오, 두 가지 모두 지원하도록 개발했습니다.

문제점

구글의 경우 회원가입 때 사용하는 토큰과 로그인 때 사용하는 토큰이 같아도 문제가 없었지만 카카오의 경우는 회원가입시 사용한 토큰을 또 사용하게 되면 "잘못된 인가 코드" 라는 에러가 발생하여 로그인이 되지 않는 이슈가 있었습니다.

문제 원인

카카오 로그인 API 문서를 검토한 결과, 회원가입과 로그인에 사용하는 토큰을 구분하여 설계하도록 명시되어 있었습니다. 따라서 구글 로그인과 달리 로그인을 위해서 새로운 토큰을 발급받아야 했습니다.

해결방안

• 로그인 시 토큰을 검증하는 단계를 추가했습니다.
• 응답코드가 400에러일 경우 카카오 로그인 페이지로 리다이렉션하여 새로운 토큰을 발급받도록 로직을 수정했습니다.

try {
  const response = await SocialAuth.postSignin('kakao', data);
  if (response) {
    saveTokens(response.accessToken, response.refreshToken);
    setIsSuccess(true);
  }
} catch (error) {
  if (isAxiosError(error) && error.response?.status === 400) {
    setError({ message: '이미 존재하는 사용자', type: 'EXISTING_USER' } as KakaoAuthError);
    redirectToKakaoAuth();
  } else {
    setError({ message: '회원가입 중 알 수 없는 에러 발생', type: 'OTHER_ERROR' } as KakaoAuthError);
  }
}

적용 결과

• 카카오 로그인 시 “잘못된 인가 코드”로 인한 오류를 해결하여 로그인 과정을 안정적으로 구현했습니다.
• 사용자는 별도의 조작 없이 리다이렉트하여 사용자 경험을 향상시켰습니다.

배운점

• 구글 로그인과 카카오 로그인 API 차이를 이해하고 OAuth 2.0의 동작 방식을 이해할 수 있었습니다.