작성자 : 김찬기

링크 : https://heavy-bear.tistory.com/24

OAuth 기반 소셜 로그인을 구현할 때, 대부분은 인증 과정을 간편하게 처리해주는 라이브러리나 공식 Provider를 활용합니다. Next.js에서 인증을 처리하기 위해 널리 사용되는 라이브러리인 NextAuth 역시 다양한 소셜 Provider를 지원하고 있어 빠르게 로그인 기능을 도입할 수 있다는 장점이 있습니다.

하지만 실제 프로젝트에서 카카오와 같은 일부 플랫폼의 특성과, 이미 구축된 백엔드 중심의 인증 구조를 함께 고려해야 할 경우, 공식 Provider의 내부 동작이 오히려 발목을 잡는 상황이 발생했습니다. 특히 인가 코드가 일회용이라는 점이 문제였고, 이는 NextAuth가 인가코드를 즉시 사용하는 구조와 충돌했습니다.

이 글에서는 이러한 문제를 어떻게 해결했는지, 그리고 왜 Credentials Provider를 활용하여 소셜 로그인을 직접 구현하게 되었는지에 대한 배경과 실제 구현 방법을 정리했습니다. 같은 고민을 하고 있는 분들께 도움이 되었으면 합니다.

배경 및 프로젝트 구조

현재 프로젝트의 OAuth 인증 구조는 다음과 같이 구현해야합니다.

1. 사용자가 소셜 플랫폼(예: 카카오, 구글 등)에 인증 요청을 보냅니다.
2. 소셜 플랫폼은 인증 후 인가 코드(authorization code)를 프론트엔드로 전달합니다.
3. 프론트엔드는 이 인가 코드를 백엔드에 전달합니다.
4. 백엔드는 인가 코드를 바탕으로 일련의 처리를 수행합니다. (예: 사용자 등록, 내부 토큰 발급 등)
5. 이후 사용자 정보와 함께 프로젝트 전용 인증 토큰을 프론트엔드에 응답합니다.

문제의 발생

프론트엔드는 인가 코드만 전달하고, 민감한 인증 및 사용자 등록과 같은 처리는 백엔드에서 전담하는 구조입니다. 하지만 NextAuth의 공식 Provider(KakaoProvider)는 이 구조와 맞지 않는 문제가 있었습니다. 해당 Provider는 인가 코드를 즉시 사용하여 소셜 플랫폼의 사용자 정보를 가져오는 로직이 내장되어 있습니다.