💥 에러 발생!
구글과 네이버는 정상적으로 로그인이 되는데 카카오로 로그인을 시도하면 메인페이지로 리디렉션 되는 대신 url에 다음과 같이 표시되면서 로그인이 되지 않는 문제 발생
💦 과정
터미널에서는 다음과 같은 에러로그가 찍히고 있었다.
로그에 찍힌 에러 관련 안내 url을 클릭하니
1. 이메일 콜백 프로세스 중 발생한 문제라면 콜백 url에 오타가 있었나? 살펴도 봤고
(문제는 없었다.)
2. 카카오톡 email 동의도 잘 설정 해 놓았고
3. NEXTAUTH_URL과 로컬 주소 모두 localhost:3000으로 같게 설정 했는데 문제가 뭘까...?
하다가 url의 http://localhost:3000/users/login?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2F&error=OAuthAccountNotLinked 로 구글링을 다시 해보았다.
❓❗ 그러다 찾은 나와 같은 에러가 발생했다는 이슈글 발견!
https://github.com/nextauthjs/next-auth/issues/519
위의 글에서 원인을 찾을 수 있었다.
OAuthAccountNotLinked 동일한 이메일 주소와 연결된 다른 제공업체에 이미 로그인했다는 의미입니다.
로그인 시 자동 계정 연결을 사용하면 악의적인 행위자가 이를 악용하여 다른 사용자의 이메일 주소와 연결된 OAuth 계정을 생성하여 계정을 탈취할 수 있습니다.
이러한 이유로 로그인 시 임의 공급자 간의 계정을 자동으로 연결하는 것은 안전하지 않습니다. 이것이 바로 이 기능이 일반적으로 인증 서비스에서 제공되지 않으며 NextAuth.js에서도 제공되지 않는 이유입니다.
나의 경우 카카오 로그인 시 네이버 이메일을 사용해서 로그인하고 있었는데 이메일이 동일해 문제가 되었다는 것을 알 수 있었다.
✅ 해결
KakaoProvider의 옵션 중 allowDangerousEmailAccountLinking라는 옵션을 true로 설정하니 로그인 성공!!
KakaoProvider({
clientId: process.env.KAKAO_CLIENT_ID || "",
clientSecret: process.env.KAKAO_CLIENT_SECRET || "",
allowDangerousEmailAccountLinking: true,
}),해당 옵션은 KakaoProvider가 내 계정과 자동 연결을 허용하도록 하는 옵션인데 설명글에서도 에러가 생겼던 원인을 파악할 수 있었다.
일반적으로 OAuth 제공업체로 로그인하고 동일한 이메일 주소를 가진 다른 계정이 이미 존재하는 경우 해당 계정은 자동으로 연결되지 않습니다. 로그인 시 자동 계정 연결은 임의의 공급자 간에 안전하지 않으며 기본적으로 비활성화되어 있습니다( 보안 FAQ 참조 ). 그러나 관련 제공업체가 계정과 연결된 이메일 주소를 안전하게 확인했다고 신뢰하는 경우 자동 계정 연결을 허용하는 것이 바람직할 수 있습니다. allowDangerousEmailAccountLinking: true자동 계정 연결을 활성화하려면 공급자 구성을 설정하기만 하면 됩니다 .
Next-auth로 로그인 구현 시 같은 에러를 마주친분들께 도움이 되셨길 바랍니다.😊😉
