OAuth2.0 는 어떻게 동작할까?(supabase 와 next.js 로 추상화된 연결 설명하기)
- OAuth 2.0은 Next.js와 Supabase를 활용한 구글 로그인 데모로 시작하여 동작 원리를 시연합니다. 🚀
- 실제 프로덕트 엔지니어 커뮤니티 사이트에서 구글 로그인 과정을 직접 보여주며 이해를 돕습니다. 🌐
- 사용자가 로그인 버튼을 클릭하면
/auth/signin 페이지로 이동하여 소셜 로그인 옵션을 제공합니다. 🖱️
- 구글 소셜 로그인 버튼 클릭 시 Supabase의
signInWithOAuth 메서드가 호출되어 구글 인증 페이지로 리다이렉트됩니다. ➡️
- 구글 로그인 성공 후, 미리 설정된
redirect_to URL(예: /auth/callback)로 code 파라미터와 함께 이동합니다. ↩️
/auth/callback 라우트에서는 수신된 code를 Supabase의 exchangeCodeForSession 메서드를 통해 세션 토큰(액세스 토큰, 리프레시 토큰)으로 교환하고 브라우저 쿠키에 저장합니다. 🔄
- 세션 교환이 완료되면 사용자는 원래 요청했던 페이지로 리다이렉트되고, SSR 요청 시
getUser를 호출하여 쿠키에 저장된 세션으로 사용자 인증 및 정보를 표시합니다. ✅
- OAuth 2.0은 'Open Authorization'의 약자로, 구글, 깃허브 등 외부 프로바이더에게 인증 권한을 위임하는 표준화된 시스템입니다. 🤝
- 로그인 성공 후 콜백 라우트를 사용하는 이유는 직접 리다이렉트 시 보안 취약점이 발생할 수 있어, 콜백에서 안전하게 토큰 및 세션을 발급하기 위함입니다. 🛡️
PKCE (Proof Key for Code Exchange)는 코드 탈취를 방지하기 위한 추가 보안 기법으로, 클라이언트와 인증 서버 간에 임의의 값을 교환하여 코드의 유효성을 검증합니다. 🔐
- Supabase는
HttpOnly, Secure, SameSite=Lax 등 다양한 쿠키 보안 옵션을 적용하며, 액세스 토큰의 짧은 유효 기간과 리프레시 토큰을 활용하여 보안을 강화합니다. 🍪
데브허브 | DEVHUB | OAuth2.0 는 어떻게 동작할까?(supabase 와 next.js 로 추상화된 연결 설명하기)