프론트엔드에서 Auth.js를 사용했을 때, 질문 있습니다.

Question

안녕하세요. 좋은 품질의 강의를 제작해주셔서 감사합니다. 프론트엔드 부분을 vue.js에서 Next.js로 변경하여 프로젝트를 진행하고 있습니다. 해당 과정에서 막힘이 있어 질문을 드립니다.   Next.js를 기반으로 Auth.js 라이브러리를 사용하여 프론트엔드 소셜 로그인을 구현하고 있습니다. 소셜 로그인 흐름을 다음과 같이 생각하고 있습니다. 1. 유저가 소셜 로그인 버튼을 누른다. 2. 프론트엔드에서 해당 소셜 로그인 화면을 리다이렉트 시킨다. 3. 유저는 소셜 로그인을 진행한다. 4. 소셜 로그인 성공 시, 프론트엔드 서버는 인증 코드를 소셜 서버로부터 받은 후, 백엔드로 소셜 로그인 API를 인증 코드 첨부하여 요청한다. 5. 백엔드 서버에서 인증 코드를 가지고 액세스 토큰 발급, 엑세스 토큰으로 유저 정보를 받아서 JWT를 만들어 프론트엔드로 반환해준다.   하지만 다음 피드백을 받았습니다. "Auth.js를 사용하면 소셜 서버로부터 인가코드를 직접 받아올 수 없어 백엔드 서버로 인가코드 요청을 할 수 없다." 위 의견이 맞다면, 백엔드 서버에서 소셜 로그인 전 과정을 진행하고 JWT 값만 프론트엔드로 반환하는 방법 밖에 없는걸까요?   강의에서 사용되지 않은 기술에 대해서 질문하여 죄송합니다. 감사합니다.

bradkim · Answer

찾아보니 auth.js는 인가코드를 받기 어려운 구조라고 하네요.   그런데, 현재 저희 수업에서 다루는 2가지 방식 중에 서버에 의존적으로 로그인과정을 진행하는 방식을 사용할거면, 굳이 별도의 라이브러리 자체가 필요 없긴합니다. 그냥 서버에서 지정한 화면만 아래와 같이 라우팅 해주면 됩니다. ex) http://localhost:8080/oauth2/authorization/google 그래서 이 방식 또한 next.js에서 사용하는 auth.js의 기능을 살리는 방향은 아닐것 같아요. auth.js를 활용한 방식에 대한 레퍼런스를 더 찾아봐야 하지 않을까 싶습니다.   그와 별개로 제 개인적으로는 auth.js자체를 쓸필요가 없을것 같다는 생각이 듭니다. 저희 수업에서도 어떠한 라이브러리 없이 일반적인 axios를 통한 http요청으로 로그인 처리를 하고 있으니, 프레임워크와 상관없이 동일하게 구현하면 될것 같습니다.