[트러블 슈팅] React | 카카오 로그인 구현 오류(해결)

카카오 Rest_api키를 받고, redirect_uri도 설정을 끝낸 뒤,

const redirect_uri = "http://localhost:3000/auth/kakao/callback"; //Redirect URI
  const kakaoURL = `https://kauth.kakao.com/oauth/authorize?client_id=${Rest_api_key}&redirect_uri=${redirect_uri}&response_type=code`;

  const handleLogin = () => {
    window.location.href = kakaoURL;
  };

hadleLogin을 로그인 버튼에 연결해서 로그인 버튼 클릭 시 kakaoURL로 연결되게 하였다. 결국 리다이렉트는 /auth/kakao/callback으로 되기 때문에

<Route path="/auth/kakao/callback" element={} />
이와 같은 라우터를 연결해주었다.

Auth에서 코드 값을 서버로 보내서 토큰을 받아오려하던 중,

const fetchToken = async () => {
     try {
       const response = await axios.get("/auth/kakao/callback", {
         params: {
           code: KAKAO_CODE,
         },
       });

       const jwtToken = response.data;
       console.log(jwtToken);

       if (jwtToken) {
         localStorage.setItem("token", jwtToken);
         navigate("/Main");
       } else {
         navigate("/signin");
       }
     } catch (error) {
       console.error("Error fetching Kakao token:", error);
     }
   };

토큰이 저장되지 않고 화면에 고스란히 토큰이 나타나는 오류?가 발생했다.
setUpProxy를 설정하지 않았을 때는 auth로 잘 넘어가서 code값도 잘 나왔지만 proxy설정을 하고나니 auth페이지로 가지 않고 바로 화면에 토큰 값이 나타나는 것 같이 작동했다.

아직 해결하지 못했는데, 카카오 어플리케이션 등록을 백엔드 분께서 해주셔서 리다이렉트 주소를 잘못 지정한 게 아닌가 라는 생각도 들고, 하지만 리다이렉트를 잘못했다면 토큰 값이 제대로 안 나와야 하지않나 ,,?라는 생각에 혼란스럽다.
내일 백엔드 분과 다시 이야기를 해봐야 겠다. 아 이걸로 몇시간동안 삽질중인가

---

그래도 카카오 로그인의 로직이 어떻게 되는지는 이해할 수 있던 시간이었다.
결국 서버로 코드를 넘긴 후 토큰을 받아오는 것이 아니라 kakao로 프론트에서 토큰을 바로 요청하는 방식으로 수정했다.

import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import axios from "axios";
import Rest_api_key from "../config/key";

const Auth = () => {
  const navigate = useNavigate();

  useEffect(() => {
    const params = new URL(document.location.toString()).searchParams;
    const code = params.get("code");
    const grantType = "authorization_code";
    const redirect_uri = "설정한 리다이렉트 url/auth/kakao/callback";

    axios
      .post(
        `https://kauth.kakao.com/oauth/token?grant_type=${grantType}&client_id=${Rest_api_key}&redirect_uri=${redirect_uri}&code=${code}`,
        {},
        {
          headers: {
            "Content-type": "application/x-www-form-urlencoded;charset=utf-8",
          },
        }
      )
      .then((res) => {
        const { access_token } = res.data;
        axios
          .post(
            `https://kapi.kakao.com/v2/user/me`,
            {},
            {
              headers: {
                Authorization: `Bearer ${access_token}`,
                "Content-type":
                  "application/x-www-form-urlencoded;charset=utf-8",
              },
            }
          )
          .then((res) => {
            const userName = res.data.properties.nickname;
            const user_id = res.data.id;
            localStorage.setItem("access_token", access_token);
            localStorage.setItem("userName", userName);
            localStorage.setItem("user_id", user_id);

            const response = axios.get("/auth/kakao/callback/access", {
              params: {
                accessToken: access_token,
              },
            });
            const jwtToken = response.data;
            localStorage.setItem("jwtToken", jwtToken);

            navigate("/");
          });
      })
      .catch((Error) => {
        console.log(Error);
      });
  }, []);

  return <h1>로그인 중입니다</h1>;
};

export default Auth;

이렇게 하니 로그인이 잘됐다!
왜 때문에 서버를 통해서 로그인이 안됐는지는 미해결이지만 해커톤으로 바빠서 이렇게라도 해결을 했다!

프론트에서 해결을 하다보니 localstorage를 남용하는 코드가 되었다...ㅎㅎ 이번에는 recoil을 어떻게 사용할지 잘 몰라서 주로 localstorage에 다 저장해서 사용하는 방법을 썼는데 다음에는 recoil도 잘 활용해 봐야지