[TIL #59] Next 카카오 소셜로그인 리디렉션

리디렉션이 안되서 6시간이나 한사람 나야나
결국엔 코드 3줄 추가로 해결했다...

---

문제

auth/service.ts

async socialLogin(provider: Provider): Promise<void>{
 	window.location.href = `${process.env.NEXT_PUBLIC_BASE_URL}/api/auth/social-login/?provider=${provider}`
}

하지만 이 코드는,
서버 응답을 사용한 리디렉션으로 서버로부터 소셜 로그인 URL을 받아와서 사용자를 해당 URL로 리디렉션하게 하는 코드이다.
예를 들어, 서버에서 OAuth2를 동적으로 인증 URL을 생성하는 경우, 클라이언트는 서버로부터 받은 정확한 URL로 리디렉션된다. 그래서 서버가 응답으로 전달하는 data.url이 소셜 로그인 페이지 URL이 된다.

자꾸 리디렉션 되기 전에 페이지가 열리고 그 페이지에서 url을 클릭해야 로그인이 되는 이유였다.

해결

  async socialLogin(provider: Provider): Promise<void>{
    const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/auth/social-login/?provider=${provider}`)
    const data = await response.json();
    window.location.href = data.url;
  }

이 코드는 사용자가 소셜 로그인 버튼을 클릭했을 때, 선택한 소셜 로그인 제공자에 따라 서버에 요청을 보내고, 서버로부터 받은 소셜 로그인 URL로 사용자를 리디렉션하여 소셜 로그인 프로세스를 시작하게 한다.

즉, 직접 URL을 구성하여 즉시 리디렉션 하기 때문에 다음과정을 거치지않고 바로 로그인이 된다!