[TIL/React] 2025/02/06

휴대폰 인증 전 Flow 🍀

0. 전체적인 흐름 ✍️

Twilio를 통한 휴대폰 인증 전까지의 흐름에 대해 정리할 예정이다. 참고로 하단의 넘버링은 위 이미지의 넘버링과 일치하지 않는다. 서술을 위한 넘버링이다.

1. 소셜 로그인 요청(Kakao를 중심으로) ✍️

Appbar에 위치한 카카오 로그인 버튼을 클릭하면 provider 파라미터를 통해 'kakao'라는 string 값이 전달된다. provider는 네이버와 구글 로그인을 포함한 분기 처리를 위해 존재한다.

전달받은 string 값을 통해 ``3000/kakao/login``이라는 서버 주소로 이동하게 된다.

2. 인가 코드 발급 요청 ✍️

컨트롤러의 ``3000/kakao/login`` 로직에서는 getKakaoUrl() 함수를 실행하고 있다. 해당 함수는 서비스 파일에 구체화되어 있다.

카카오에서 인가 코드 발급을 위해 요구하는 url 형식을 반환하는 함수다. 여기서 주목할 것은 KAKAO_CALLBACK_URL이 ``5173/redirect?provider=kakao``라는 것이다.

물론 ``5173/redirect?provider=kakao``으로 리다이렉트 되기 전에 사용자에게 동의 화면을 출력하고, 사용자로부터 동의를 받는다. 즉 리다이렉션은 사용자의 약관 동의를 전제로 한다.

3. 토큰 발급 요청 ✍️

해당 코드는 리다이렉트용 페이지인 RedirectPage.tsx에 작성된 useEffect 로직이다. 리다이렉트를 frontend로 시킨 이유가 있다.

결국 사용자 정보에 대한 'response'가 frontend로 떨어져야, 해당 유저 정보를 활용할 수 있기 때문이다.