[Next] NextAuth로 소셜 로그인 시 에러 해결하기 (Feat. prisma)

1. NextAuth로 구글, 카카오 로그인 구현 후 구글 로그인은 됐는데 카카오 로그인이 되지 않았다.

DB에는 카카오 로그인 정보가 들어가긴 하지만 

To confirm your identity, sign in with the same account you used originally.
페이지엔 위와 같은 오류와 함께 콘솔에는 아래 오류가 발생했다.

Unknown argument `refresh_token_expires_in`. Available options are listed in green. PrismaClientValidationError: Invalid `prisma.account.create()` invocation:

refresh_token_expires_in가 정의 되지 않았거나 잘못된 이름을 사용 시 나타내는 에러

나는 prisma 스키마 작성 시 refresh_token_expires_in 필드를 넣지 않아서 발생한 문제였다.

Account 모델에 refresh_token_expires_in Int? 로 설정해줬다.

 

카카오에서 로그인 시 어떤 값이 들어오는지 확인하려면 여기서 확인하기

https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api

 

 

2. 그렇게 prisma 스키마를 수정하고 카카오 로그인을 하니 잘 됐다.

하지만 이번엔 구글로그인이 되지 않았다..^^

 

prisma.account.findUnique()에서 null값을 반환한다,,?

위에 카카오 로그인 수정하느라 스키마를 변경했는데 이걸 반영했어야했다.

npx prisma generate를 터미널에 입력하고

혹시 몰라서 캐시를 제거하기 위해 npx prisma clear를 해줬더니 잘 됐다.

 

그리고 잊지 말아야하는 건

배포 후 Redirect URL를 배포한 페이지 주소로 넣어줄 것

https://배포주소/auth/callback/kakao

 

 

3. 액세스 차단됨: 승인오류

403 오류: disallowed_useragent

컴으로 로그인 했을 땐 오류가 안 났는데 카톡링크를 통해 구글 로그인을 하려고 하면 아래 같은 오류가 발생한다.

 

구글 소셜로그인은 구글 내부 정책으로 인해 허용되는 브라우저 외에 로그인을 차단하고 있는 것으로 보인다.

https://developers.googleblog.com/2016/08/modernizing-oauth-interactions-in-native-apps.html

 

그러니 구글 로그인할 땐 허용되는 브라우저인 Chrome, Safari, Firefox, Opera, Edge 를 사용해야 할 것 같다.