[Vvue] Next-Auth redirect mismatch

상황

vvue.site로는 소셜 로그인이 안되는데 vercel로 배포한 상황에서는 문제가 되지 않는다.

 

 

---

 

발생 원인

# Nginx에서 Backend Server로 보내기 위한 URL의 Prefix와 next-auth가 로그인,인증 과정에서 사용하는 URL의 Prefix가 일치했다.

[1]  (Reverse Proxy 설정을 해놔서) Nginx에서 /api는 모두 Backend Server로 보내진다.

[2] next-auth는 공식문서에서 확인한 결과 다음과 같은 URL을 사용한다

 

따라서, Next Auth의 /api/auth/** 도 백엔드로 요청가는 상황이 발생했다.

 

Vercel 사용하면 자동으로 detect 된다고 한다.

---

 

해결방안

따라서, Backend context-path를 바꾸어 nginx에서 next-auth로의 요청과 Backend Server로의 요청을 분리하였다.

 

 

 

---

관련 공식 문서와 next-auth 설정 방법

 

  NextAuth 사용하기 위해서, 다음과 같은 환경 변수를 세팅했다

 

NEXTAUTH_URL=

NEXTAUTH_URL_INTERNAL=

NEXTAUTH_SECRET=

  환경변수 세팅 :  NEXTAUTH_URL, NEXTAUTH_URL_INTERNAL, NEXTAUTH_SECRET

https://next-auth.js.org/configuration/options#nextauth_url

Options | NextAuth.js

 

 

  NextAuth가 /api/auth/**를 사용한다  

https://next-auth.js.org/v3/getting-started/rest-api

REST API | NextAuth.js

이렇게 Next Auth 설정해야 한다고 한다.