[Next] next-auth 사용기

소셜 로그인을 구현하던 도중 다른 프론트엔드 개발자분과 next-auth를 사용해보기로 했다.

 

쉬운 구현
속성으로 할 수 있는 다양한 기능
access token 및 refresh token 생성 가능
소셜 정보 가져오기 가능

여러가지 기능을 지원하고 있어 매우 좋아보였고, next와의 호환도 잘 될것 같아 한번 사용해보기로 했다.

 

사용하는 과정에서 여러가지 에러들을 만날 수 있었다.

 

Error 1. 앱 관리자 설정 오류(KOE006)

redirect 경로를 권장하는 주소와 다르게 해서 나타나는 오류였다. next-auth를 사용할 때에는 꼭 /api/auth/callback/[provider]로 지정해야한다. 왜 그런지는 나중에 알 수 있었다.

에러를 잡고나서 oauth는 redirect url로 authorization code를 주니까 그 경로에서 받아오려면 라우터 페이지를 만들어야겠네? 라는 생각에 라우터 페이지를 만들고 useSearchParams를 이용해 쿼리스트링에서 authorization code를 얻어왔다. 이제 이 code를 백엔드로 보내야하는데 자꾸 에러가 발생하였다.

 

Error2. 500 Internal Server Error 

500 에러 코드는 오류가 서버측 발생했지만 구체적인 문제를 모를 때 전송되는 코드이다.

이 것은 프론트에서 요청을 잘못 보내 서버에서 확인이 어려울 때 뜰 수도 있는데, 네트워크를 확인해보니 preflight 통신 말고도 xhr 요청이 두번 가면서 코드를 재사용하게 되어 나는 에러였다.

 

열심히 온갖 검색어를 조합해 찾아보니 next-auth에서는 authorization code를 자체적으로 사용해서 token을 리턴해 주는 방식이었다. 인증 코드는 한번 사용하면 재사용이 불가능한데 next-auth에서 자체적으로 사용했으니 우리가 그 코드를 사용할 수 없는 문제인 것 같았다. 

결국 next-auth를 걷어내기로 하고 라이브러리의 도움 없이 소셜측 redirect url을 사용하여 소셜 로그인을 구현하기로 했다.

 

const onKakaoSocialLogin = (): any => {
    const redirectUri = 'http://'
    const restApiKey = process.env.NEXT_PUBLIC_KAKAO_CLIENT_ID
    const kakaoURL = `https://kauth.kakao.com/oauth/authorize?client_id=${restApiKey}&redirect_uri=${redirectUri}&response_type=code`
    window.location.href = kakaoURL
  }