1. 카카오 로그인 화면으로 이동

백엔드로 부터 REST_API_KEY, REDIRECT_URI 받아서 연결

※ REDIRECT_URI는 클라이언트 주소와 일치시켜야 한다.

const kakaoLogin: () => void = () => {
    const kakaoURL = `https://kauth.kakao.com/oauth/authorize?client_id=${import.meta.env.VITE_REST_API_KEY}&redirect_uri=${import.meta.env.VITE_APP_FE_URL}/login/kakao&response_type=code`;
    window.location.href = kakaoURL;
  };

2. 라우터 연결하기

• 백엔드에게 전달할 인가코드를 받기 위해 로직이 정의된 Redirection 페이지로 이동

<Route exact path='/kakao/callback' element={<Redirection />} />

3. 카카오에게 인가 코드 받아오기 파싱해서 백엔드에게 전달

Redirection 페이지로 이동하여 인가코드를 받아 ?code=긴코드를 백엔드에게 넘겨준다.

const code = window.location.search; // code?=긴코드

useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(
          `${import.meta.env.VITE_APP_MAIN_SERVER_URL}/api/member/kakao/callback${code}`,
          {
            headers: {
              "Content-type": "application/x-www-form-urlencoded;charset=utf-8",
            },
          }
        );

로그인 성공시

if (response.status === 200) {
          // console.log(response)
          localStorage.setItem('Authorization', response.headers.authorization);
          localStorage.setItem('Refresh', response.headers.refresh);
          setIsLoggedIn(true);

          const responseBody = response.data;
          if (responseBody.msg === "신규유저입니다.") { 
            navigate('/kakao/first-login');
          } else if (responseBody.msg === "기존유저입니다.") {
            navigate('/');
          }
        }

실패시

catch (error) {
        if (axios.isAxiosError(error)) {
          const axiosError = error as AxiosError;
          if (axiosError.response && axiosError.response.status === 403) {
            toast.error("신고누적으로 계정이 차단되었습니다.");
            navigate('/');
          } else {
            toast.error("카카오 로그인에 문제가 생겼습니다.");
            navigate('/');
          }
        } else {
          toast.error("에러가 발생했습니다.");
        }
      }