카카오 들어가기 어렵다 - FE14-Part4-Team5/reser-on-do GitHub Wiki

🧩 배경

처음 카카오 로그인을 구현할 때, 다른 API 연동과 같이 간단할 줄 알았습니다. API Key 넣고, Redirect URI만 맞춰주면 될 것 같았지만, 현실은 생각보다 복잡했고 디버깅과 추측의 연속이었습니다.

kakao developers에서 REST API Key를 발급 받고 Redirect URI를 설정한 뒤 .env에 등록했고, Redirect URI는 실제 유저가 방문할 페이지는 아니지만, 카카오로부터 인가 코드(code)를 받아오기 위한 전용 라우트로 구성 되어 있기 때문에 /oauth/kakao/callback 같은 라우트로 설정하고 해당 페이지를 따로 컴포넌트로 만들어서 router에서 연결 해야 했습니다.

/*Louter*/
{
    path: '/oauth/kakao/callback',
    element: <OAuthKakaoCallback />,
},

🚧 트러블 발생 사항

카카오 로그인 페이지까지는 무사히 이동했지만, 로그인을 실패 하고 리다이렉트 시키더라구요. console.log 에러는 아래와 같은 메세지를 반복해서 출력 했습니다.

error: invalid_grant
error_description: "잘못된 인가 코드입니다."

image image

🛠️ 버그 잡기를 위한 도전..!

  1. 터미널에서 인가 코드를 요청하는 코드를 작성 했습니다. image swagger에서 api 요청을 성공했을 때 curl -x를 통해서 토큰을 받아 처리하는 걸로 보였고 수동으로 터미널에서 요청을 보내보았습니다. 이 과정을 통해 잘못된 인가 코드 에러는 사라졌지만, 곧바로 액세스 토큰을 받을 수 없습니다라는 또 다른 에러가 발생했습니다.

  2. 문제 추론 해보기

  • swagger를 보면 provider를 등록하는 oauth/app 이라는 api가 존재하는데, 이 부분에서 무언가를 놓친 게 아닐까?
  • 회원가입을 안했으니 어떻게 보면 당연하게 로그인은 안된다. 근데 왜 회원가입을 누르면 로그인 페이지와 동일한 화면이 나오는 걸까?
  • token api를 뜯어봐야 알 것 같다. 분명 인가 코드도 받고 있고, api key와 redirect uri도 제대로 기입했는데 안된다는 건 어딘가에서 값을 잘못 전달 하고 있거나 서버에서 요청하지 않은 데이터를 보내고 있을 가능성이 농후하다.

위와 같은 문제들을 추론해보기 위해 oauth/app api를 호출하고, 회원가입과 로그인을 서로 다른 분기로 만들어보고, 디버깅을 통해서 원초적인 문제 해결을 해보려고 노력도 했습니다.

image

끝내 결론이 나오지 않아 주강사님께 질문을 드려보니 code 변수(kakao 로그인을 요청할 때 뒤에 쿼리로 붙는 code에 대한 정보를 받아오는 변수)로 받아오는 값에 카카오 액세스 토큰이 아닌 인가 코드만 넣는 거였습니다!!

🤔 여전히 안되는 회원가입과 로그인, 찝찝한 해결

로그인 시도 시: 403 Forbidden

회원가입 시도 시: 400 Bad Request

→ 인가 코드는 보내고 있지만, 백엔드에서 뭔가를 제대로 처리하지 못하고 있는 듯 했습니다.

image

그래서 결국 다시 주강사님께 요청을 드렸었는데, 하루종일 안되던 기능이 디스코드를 연결해서 화면 공유로 보여주는 순간 작동 하더라구요??

결국 무엇이 문제였는지 정확한 이유는 알지 못했지만 추측으론 서버에서의 문제가 아닐까 싶었습니다.

코드에는 문제가 없어보인다는 피드백과 더불어 요청할 수 없는 params 값이 옵셔널이 아닌 require 값으로 적용 되어 있었습니다. 아무리 제공해주는 서버여도 완벽한 건 없다는 걸 느꼈고 항상 생각을 열어둬야 한다는 걸 깨달았습니다.. 그렇게 다사다난한 oauth가 마무리 되었습니다. 해결을 위해 분석한 최종 흐름은 아래와 같습니다!

✅ 최종 흐름 정리

  1. code로 인가 코드 가져오기(이 출처는 로그인 페이지에서 리다이렉트 URI로 이동할 때 담긴 code를 읽는 것임) - 인가코드 소유중
  2. 인가 코드 없으면 코드 종료
  3. 이 인가코드로 카카오의 액세스 토큰을 얻어와야 함. 따라서 'https://kauth.kakao.com/oauth/token'에 post 요청(api 키, redirect_uri, 인가 코드를 보냄) -> 여기서 액세스 토큰 획득
  4. 이 액세스 토큰으로 kakaoAccessToken 코드에서 값 읽음(액세스 토큰이 있어야 함)
  5. oauthApp에 저장
  6. 액세스 토큰을 받았으니 백엔드에서 회원가입이나 로그인 요청
  7. 카카오 액세스 토큰을 백엔드 서버에 보내서 요청(여기서의 토큰은 백엔드 토큰이겠지?)
  8. 백엔드에서 받은 토큰에서 준 액세스, 리프레쉬를 zustand에 저장
  9. 만약 에러가 나면?(e.g., 404) 닉네임 정보를 요청하고 회원가입 로직 수행. 404 에러면 회원 아이디가 없는 것으로 간주하고, 회원가입 진행. 그게 아니면 로그인 실패
  10. 이게 다 아니면 액세스 토큰이 없는 것으로 간주