카카오 소셜로그인에서 겪었던 KOE320 에러.ZIP

카카오 소셜로그인을 성공했을 때, 다음과 같은 처리를 했었다.

신규 사용자 -> 회원가입 처리

기존 사용자 -> 로그인 성공

KOE320이라는 오류에 대해

동일한 인가 코드를 두 번 이상 사용하거나, 이미 만료된 인가 코드를 사용한 경우, 혹은 인가 코드를 찾을 수 없는 경우가 원인 이라는 블로그를 매우 많이 봤지만 이 내용만으로는 해결할 수 없었다.

울고시픔울어...

프론트엔드 코드, 백엔드 코드 둘 다 콘솔 로그를 찍어봤지만 두 번 요청을 보내는 경우는 없었고,

머리 싸매고 있다가 시간을 너무 오래 잡아먹는 것 같아서 Kakao Developers Dev Talk에 글을 남겼다.

아침에 남겼는데 당일날 30분 안쪽으로 엄청 빠른 답변을 주셨음!!!

리다이렉트 URI에 전달한 인가코드에 하이픈이 있으면, 제거하고 액세스 토큰 발급 요청을 한 것으로 보입니다.

검토 부탁드려요.

또잉? 내 코드에 그런 이상한 장치가 있다고?

백엔드 코드에 콘솔을 찍어보니,

Raw URL:

/kakao/callback?code=hdzoospAqMZiHLEQ6AuA2XuLUNJFLYJH_B-q7Tly4U-sVIt_YyOqdgAAAAQKPXRpAAABlPJ8bn-37mS5Kc-sjw

Original Code: hdzoospAqMZiHLEQ6AuA2XuLUNJFLYJH_Bq7Tly4UsVIt_YyOqdgAAAAQKPXRpAAABlPJ8bn37mS5Kcsjw

Decoded Code: hdzoospAqMZiHLEQ6AuA2XuLUNJFLYJH_Bq7Tly4UsVIt_YyOqdgAAAAQKPXRpAAABlPJ8bn37mS5Kcsjw

클라이언트에서 요청을 보낸 뒤 처리 과정에서 뒤 하이픈이 사라지고 있었다.

router.get('/kakao/callback',
    (req, res, next) => {
        // 원본 URL에서 코드를 그대로 사용
        const code = req.url.split('code=')[1]?.split('&')[0];
        if (code) {
            req.query.code = code; // 원본 코드를 그대로 사용
        }
        console.log('Original URL code:', code);
        next();
    },
    passport.authenticate('kakao', {
        session: false,
        failureRedirect: '/login'
    }),
    handleLoginCallbackResponse
);

그래서 수정한 Express 코드는 다음과 같음.

같이 협업을 진행하는 프론트엔드 개발자가 URI 인코딩 처리를 안했던 걸 확인하고 조금 더 인가 코드의 형식을 안정적으로 유지하기 위해서, encodeURIComponent를 사용해 code를 인코딩해줬다.

      const encodedCode = encodeURIComponent(code);
      const response = await axiosInstance.get(`/api/auth/kakao/callback?code=${encodedCode}`);

이 이후로는 한 번도 KOE320 오류가 발생하지 않는다..............

비슷한 오류를 겪는 사람들에게 많은 도움이 되길!

+) 동일한 KOE320이지만 이 문제로도 해결이 되지 않는다면 이 문서를 읽어보면 많은 도움이 될 것 같다!

나 같은 경우는 이 문서를 먼저 읽고 해결이 되지 않아 Devtalk에 글을 작성했었다... 정 해결이 되지 않는다면 데브톡에 글을 남기는게 빠른 해결책인 것 같음 ㅎㅎ

https://devtalk.kakao.com/t/koe320-an-authorization-code-must-be-supplied-authorization-code-not-found/126910