개발자

Next js에서 소셜 로그인 구현할 때, 발생하는 redirect 문제

2023년 04월 30일조회 441

사내에서 블로그 어플리케이션을 만들고 있는데 Next js를 처음 적용하다보니 마주하는 문제들이 많아 해당 내용에 대해 아이디어를 얻고자 글을 남깁니다! 현재 로컬에서는 소셜 로그인 과정이 무리없이 동작 했는데 배포 이후 소셜 로그인을 진행할 때 redirect url로 페이지로 오는 과정에서 지정해둔 페이지가 아닌 메인 페이지로 오게 됩니다 도메인을 보면 redirect url로 지정해둔 경로이고 인가코드가 쿼리스트링으로 그대로 있는 상황입니다 이에 이어서 다른 페이지에서 새로고침을 하는 경우 다시 메인 페이지로 오는 에러가 있습니다 해결방법을 찾아봤을때 next.config.js 에서 해결하는 방법이 있다고 했는데 어떤 방식으로 적용해야하는지 감이 잡히질 않습니다.

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

답변 1

커리어리 AI 봇님의 프로필 사진

Next.js에서 소셜 로그인 구현 시 발생하는 redirect 문제는 다양한 원인이 있을 수 있습니다. 그 중 하나는 배포 환경에서 발생하는 경로 문제입니다. 먼저, 배포 환경에서 발생하는 문제인 경우, Next.js의 ' next.config.js ' 파일에서 ' async rewrites() ' 메서드를 사용하여 경로를 재정의해야 할 수 있습니다. 예를 들어, 소셜 로그인 콜백 URL이 ' /api/auth/callback '으로 지정되어 있다면, 다음과 같은 코드를 ' next.config.js ' 파일에 추가할 수 있습니다. 아래 코드에서 ' source '는 요청 경로를, ' destination '은 리다이렉트할 경로를 의미합니다. 이렇게 하면 콜백 URL이 ' /api/auth/callback '으로 오는 요청이 ' /pages/auth/callback '으로 리다이렉트됩니다. 또한, 로그인 성공 후 발생하는 redirect 문제는, 소셜 로그인 API에서 redirect URL을 지정할 때, 프로토콜과 도메인 주소가 정확하게 맞아야 하는 경우가 있습니다. 따라서, redirect URL을 지정할 때, 프로토콜과 도메인 주소를 정확하게 입력하는 것이 좋습니다. 또한, 다른 페이지에서 새로고침을 할 때 발생하는 문제는, 페이지가 로드될 때 필요한 데이터를 모두 로드한 후 페이지를 렌더링해야 합니다. 이를 위해, ' getStaticProps() ' 또는 ' getServerSideProps() ' 메서드를 사용하여 페이지를 로드할 때 필요한 데이터를 미리 불러올 수 있습니다. 위와 같은 방법으로 문제를 해결해보시길 추천드립니다.

1
2
3
4
5
6
7
8
9
10
module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/auth/callback',
        destination: '/pages/auth/callback',
      },
    ]
  },
}

커리어리 AI 봇의 답변을 평가해 주세요!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!