Next.JS에서 OAuth를 활용하기

이전 글에서 SSR 환경에서 쿠키를 활용하는 방법을 다뤘습니다. 이번 글에서는 그 연장선으로, OAuth를 활용한 소셜 로그인에서 발생한 문제와 이를 해결한 과정을 공유하려고 합니다. 특히, 쿠키의 도메인 통일이 중요한 이유와 이를 구현하는 방법을 중심으로 설명하겠습니다.

배경

프로젝트에서 소셜 로그인을 도입하며 OAuth 방식을 사용했습니다. 소셜 로그인은 Facebook, Google, GitHub 등의 플랫폼을 통해 사용자의 인증 정보를 받아오는 편리한 방법입니다.

이전에 구현했던 로컬 회원가입 및 로그인은 Next.js 리라이트를 활용해 쿠키 도메인을 통일했기 때문에 SSR 환경에서도 잘 동작했습니다. 그러나 소셜 로그인의 특성상, OAuth 과정에서 쿠키의 도메인이 다시 백엔드로 설정되는 문제가 발생했습니다. 이 문제를 어떻게 해결했는지 차근차근 살펴보겠습니다.

Callback URL의 동작

OAuth의 요청 흐름

OAuth 로그인 과정은 다음과 같은 순서로 진행됩니다:

1. 클라이언트: 소셜 로그인 요청을 보냅니다.
2. 백엔드: 소셜 로그인 URL을 생성해 클라이언트로 전달합니다.
3. 소셜 플랫폼: 사용자가 인증 정보를 입력하면, 설정된 Callback URL로 인증 결과를 전달합니다.
4. 백엔드: 소셜 플랫폼에서 받은 데이터를 처리하고 JWT 토큰을 발급하거나 세션을 생성합니다.
5. 클라이언트: 백엔드에서 받은 응답을 받아 쿠키를 저장합니다.

문제가 발생한 이유

OAuth 과정에서 중요한 부분은 Callback URL입니다. 이 URL은 소셜 플랫폼이 인증 결과를 전달하는 주소로, 보통 백엔드 URL을 설정합니다.

하지만, 이 방식은 다음과 같은 문제가 있습니다:

• 소셜 플랫폼에서 백엔드로 Callback 요청이 전달되므로, 요청의 주체가 Next.js 서버에서 백엔드 서버로 변경됩니다.
• 이에 따라, 백엔드에서 발급한 쿠키는 백엔드 도메인에 저장됩니다.
• 결국, Next.js SSR 환경에서는 해당 쿠키를 사용할 수 없습니다.

호스트의 변경

이전 글에서 설명한 도메인 기반 쿠키의 동작과 마찬가지로, 호스트 변경은 쿠키를 활용하는 데 중요한 영향을 미칩니다.

• 호스트 변경의 문제: 초기 요청은 Next.js 서버를 통해 이루어졌지만, Callback URL이 백엔드로 설정되어 있으므로 최종적으로 쿠키가 백엔드 도메인에 저장됩니다.
• 호스트 유지의 필요성: 쿠키의 도메인을 통일하려면, 소셜 플랫폼에서의 Callback 요청 역시 Next.js 서버로 보내야 합니다.

해결 방법

Callback URL을 Next.js로 설정하기

이 문제를 해결하기 위해 Callback URL을 Next.js 서버로 설정했습니다. 이렇게 하면, 소셜 플랫폼에서의 응답이 Next.js 서버로 전달되며, 이후 이를 백엔드로 리라이트하여 처리할 수 있습니다.

구현 방법

1. 소셜 플랫폼의 Callback URL을 Next.js로 설정

   https://next.example.com/api/auth/callback

2. 소셜 로그인 플랫폼의 개발자 설정 페이지에서 Callback URL을 Next.js 서버의 경로로 지정합니다. 예:
3. Next.js에서 리라이트 처리

   module.exports = {
     async rewrites() {
       return [
         {
           source: '/api/auth/callback',
           destination: 'https://api.example.com/auth/callback',
         },
       ];
     },
   };

4. Next.js의 next.config.js 파일에서 소셜 로그인과 관련된 경로를 리라이트하도록 설정합니다.
5. Next.js에서 응답 처리
6. Next.js가 소셜 플랫폼으로부터 받은 Callback 요청을 백엔드로 전달하고, 백엔드에서 생성한 쿠키가 Next.js 도메인에 설정되도록 합니다.

동작 확인

이 설정을 통해 OAuth 과정에서 발급되는 쿠키의 도메인을 Next.js로 통일할 수 있습니다. 이제 SSR 환경에서도 해당 쿠키를 활용할 수 있습니다.

결론

소셜 로그인은 사용자 경험을 개선하는 강력한 도구이지만, OAuth 과정에서 발생하는 도메인 문제를 해결하는 것이 중요합니다. 이번 글에서는 Callback URL 설정 변경과 리라이트를 활용한 호스트 유지 방법을 소개했습니다. 이 방법이 여러분의 프로젝트에서도 도움이 되길 바랍니다.