[항해 실전 프로젝트][React] 카카오 소셜 로그인 구현하기 - 부제: 클라이언트 사이드 라우팅(CSR)과 서버 사이드 라우팅(SSR)

먼저 Kakao Developer에서 애플리케이션을 만들고 몇가지 설정을 해줘야 한다.
이 작업은 프론트엔드 개발자, 백엔드 개발자 누가 해줘도 상관없다.

1. Kakao Developer에서 앱 만들기

위와 같이 설정하고 Redirect URI를 입력한다.

앱키가 자동으로 발급되는데, 우리는 REST API키가 필요하다!

2. 카카오 로그인 버튼 클릭하여 로그인 페이지 띄우기

REACT_APP_REST_API_KEY='Kakao Developer에서 발급된 REST API키'
REACT_APP_REDIRECT_URI='Kakao Developer에서 설정한 Redirect URI'

코드는 아래와 같다.

const KakaoLogin = () => {
    const CLIENT_ID = `${process.env.REACT_APP_REST_API_KEY}`;
    const REDIRECT_URI = `${process.env.REACT_APP_REDIRECT_URI}`;
    const kakaoURL = `https://kauth.kakao.com/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`;
    
    const kakaoLoginHandler = () => {
        window.location.href = kakaoURL;
    }

    return (
        <KakaoLoginButtonContainer>
            <button type='button' onClick={kakaoLoginHandler}>
                <img src={`${process.env.PUBLIC_URL}assets/image/kakao_login.png`} alt='kakao_login' />
            </button>
        </KakaoLoginButtonContainer>
    )
}

이제 로그인 버튼을 클릭하면 카카오 로그인 페이지로 잘 넘어간다.

3. 인가코드 받아서 백엔드에 넘겨주기

const KakaoLoginRedirect = () => {
    const navigate = useNavigate();
    const code = new URL(window.location.href).searchParams.get("code");

    useEffect(() => {
        const kakaoLogin = async () => {
            try {
                const response = await axios.get(`${process.env.REACT_APP_REDIRECT_URI}?code=${code}`,
                {},
                { withCredentials: true }
                );
                console.log("response.data",response.data);
                navigate('/groupmain');
            } catch (error) {
                console.error(error);
            }
        }
        kakaoLogin();
    }, [navigate, code]);
}

4. 트러블 슈팅 - 클라이언트 사이드 라우팅(CSR)과 서버 사이드 라우팅(SSR)

여기서 문제가 발생했다.
백엔드에서 "로그인 완료"라는 메시지는 받았는데, 정상적으로 리다이렉트 페이지로 넘어가지 않는다. 콘솔 로그도, 에러도 찍히지 않는 걸 보니 이 컴포넌트 자체가 렌더링이 되지 않는 것으로 보인다.

챗GPT의 도움을 받은 결과... 우리 팀의 경우 Redirect URI와 API주소가 동일한데 이게 원인인 것 같다.

클라이언트 사이드 라우팅 주소(즉, Redirect URI)와 서버 사이트 라우팅 주소(즉, 서버의 API주소)가 동일하면 문제가 발생할 수 있다.
1. 요청의 모호성: 유저가 /login/kakao/callback에 접근하려고 하면 브라우저나 웹서버는 이 요청이 클라이언트 사이드 라우터를 통해 처리될 요청인지, 아니면 서버의 API요청인지 알 수 없게 된다.
2. 예기치 않은 응답: 클라이언트 페이지는 페이지 내용을 기대하고 있지만, 실제로는 서버에서 API응답이 돌아오게 된다. 반대로 서버는 API 요청을 기대하고 있지만, 클라이언트에서는 페이지 라우팅을 시도할 수 있다.
3. 개발 환경과 프로덕션 환경의 분리: 또한 나는 지금 localhost:3000 환경에서 작업하고 있기 때문에 Redirect URI가 https://honeyitem.shop/api/login/kakao/callback로 설정되어 있으면 로컬 개발 환경에서는 이 작업을 제대로 처리할 수 없다.

백엔드 개발자와 같이 확인해본 결과 위 오류가 아니었다!

5. 해결

결론부터 말하자면 백엔드 오류였다. 세션을 사용하지 않는데, session: false값을 주지 않아서 계속 오류가 발생했던 것이었다. (자세한 코드는 백엔드 거라 잘 모르겠다...)

그리고 백엔드에서 직접 리다이렉트를 설정할 수 있다고 한다. 그래서 프론트엔드단에서는 별도의 리다이렉트 설정이 필요없다.

결국 Redirect URI와 API주소가 동일해도 카카오 로그인이 가능하다는 것이다.
(챗GPT도 가끔은 틀릴 때가 있는 듯🥲)

아래는 수정한 코드다.

const KakaoLoginRedirect = () => {
    const code = new URL(window.location.href).searchParams.get("code");

    useEffect(() => {
        const kakaoLogin = async () => {
            try {
                const response = await axios.get(`${process.env.REACT_APP_REDIRECT_URI}?code=${code}`,
                    { withCredentials: true }
                );
                console.log("response", response);
            } catch (error) {
                console.error(error);
            }
        }
        kakaoLogin();
    }, [code]);
}

📌 참고
[ React ] 정말 쉽다! 카카오 소셜 로그인 프론트에서 이해하고 구현하기
카카오 소셜 로그인 흐름에 대해 위 블로그가 많은 도움이 되었다.