개발자
안녕하세요 NextAuth를 사용해서 구글 로그인을 구현하고 있는 중 어떻게 해결해야 할지 모르겠습니다ㅜㅜ...
아래 블로그를 참고하여 route.ts, AuthContext.tsx를 만들고 siginIn 이벤트는 사용하는 컴포넌트의 버튼 요소에 걸어주었습니다. 하지만 버튼을 누르면 404 페이지가 나오면서 url이 http://localhost:3000/api/auth/error로 뜹니다... .env 파일을 수정하고 NextAuthOptions를 사용해서 NEXTAUTH_URL, NEXTAUTH_SECRET 설정도 해보았고, 아래 코드처럼 스택 오버플로우 사이트를 참고해서 적어보기도 했지만 여전히 같은 에러가 반복됩니다... <button onClick={(e) => { e.preventDefault(); signIn('google', { callbackUrl: '/' }); }}> 구글 </button> 404 에러를 해결할 수 있는 방법이 있을까요... https://velog.io/@uni/NextAuth.js-%EA%B5%AC%EA%B8%80-%EB%A1%9C%EA%B7%B8%EC%9D%B8-Next%EB%B2%84%EC%A0%84-13.4.2
답변 2
개발자도구에서 네트워크로 확인해보셔야될것같아여 그리고 콜백 주소 저거 아니지 않나요? 구글 설정에서 다시 확인해서 주소 수정해야될것같아요
도연
작성자
웹 개발자 • 2023년 09월 04일
말씀해주신대로 callbackUrl: 'http://localhost:3000/api/auth/callback/google'로 넣긴했는데 똑같은 에러가 나네요... 네트워크 탭을 확인해봐도 요청 URL이 http://localhost:3000/api/auth/error로 GET 요청이 가면서 404만 계속 무한으로 뜹니다...
프레드윰
개발대발소발 • 2023년 09월 04일
여기 블로그 글 보고 따라한건가요? https://cpro95.tistory.com/518 에러 내용이 정확히 뭔지를 몰라서.. 어떻게 도움드려야할지 모르겠네요
도연
작성자
웹 개발자 • 2023년 09월 04일
제가 올려둔 블로그 글 참고해서 그대로 다시 해봤는데 다른 next 파일에서는 oauth가 잘됩니다 그런데 지금 프로젝트 하고 있는 파일에서만 계속 500대 에러가 계속 나는데 네트워크 탭에는 별 다른 내용이 없이 500 상태코드와 http://localhost:3000/api/auth/provider 또는 http://localhost:3000/api/auth/session 이라고만 뜹니다
프레드윰
개발대발소발 • 2023년 09월 04일
그럼 localhost:3000은 작동 되는건가요? 이 내부에서 어떻게 된건지 궁금하는데요
도연
작성자
웹 개발자 • 2023년 09월 08일
백엔드에서 구현하는 oauth를 사용하기로 해서 해결했습니다 답변 감사합니다!
/api/auth/session 이 html로 리턴되는거 보니 api 라우팅이 잘못되었나보군요 api폴더 구조를 봐야할듯 싶습니다
도연
작성자
웹 개발자 • 2023년 09월 08일
다른 프로젝트 파일에서는 에러 없이 똑같이 api 라우팅을 설정했는데 잘 되었습니다...! 백엔드에서 구현하는 oauth를 사용하기로 해서 해결했습니다 답변 감사합니다!
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!