feat: implement Google OAuth login with automatic user registration

[jiaah]

Purpose

구글 OAuth 인증

소셜 로그인 인증 정책

• 로그인과 회원가입은 구분되지 않습니다.
• 로그인 시, 신규 가입자일 경우 자동으로 회원가입을 진행하고 '환영 인사' 문구를 띄웁니다.

인증 Flow

클라이언트 -> API 서버 -> Supabase (<-> Google ) -> API 서버 -> 클라이언트

1. 유저 Google 로그인 진행
2. 로그인 후, 신규 회원인 경우 자동으로 회원 가입 처리
3. AccessToken(임시 저장)과 RefreshToken 발급
   • 이 토큰들을 Cookie에 저장
4. 상태에 따라 적절한 UI를 보여주는 콜백 페이지로 리다이렉트
   • 로그인 성공: 홈페이지로 리다이렉트
     • 기존 회원: '로그인 되었습니다' toast 메시지
     • 신규 회원: 환영 팝업 모달
   • 로그인 실패: 로그인 페이지로 리다이렉트, toast 메시지
5. 페이지 진입 혹은 리다이렉트 시, Root Layout 컴포넌트에서
   • AccessToken을 JS 메모리(Context API)에 저장, Cookie에서 AccessToken 삭제
   • supabase > getSession 메서드 사용하여 현재 세션 정보로 로그인 상태 확인
6. API 요청 시, Axios Interceptor에서
   • AccessToken이 없거나 유효하지 않은 경우, RefreshToken으로 재발급
     • supabase > setSession 메서드를 사용하여 새로운 AccessToken 발급
   • RefreshToken이 없거나 유효하지 않으면 로그아웃 처리

Token 관리

• Access Token: 클라이언트 메모리에 저장 → API 요청 시 인증.
• Refresh Token: HttpOnly + Secure 쿠키에 저장 → Access Token 갱신 시 사용.

Q&A

1. Supabase 인증 API를 Next.js에서 구현하지 않은 이유?
   앱 확장 시 일관된 인증 로직 관리를 위해 인증 로직을 Express 서버로 분리하였습니다. 이는 다양한 플랫폼과의 통합을 고려한 선택입니다.

2. Supabase에서 제공하는 세션 자동 갱신 기능을 사용하지 않은 이유?
   이 기능은 구현이 빠르고 강력하지만, 브라우저의 storage에 세션을 저장하게 되어 보안상의 우려가 있습니다.
   이를 해결하기 위해 세션을 브라우저 storage에 저장하지 않고 JS 메모리에 저장하여 보다 안전하게 사용합니다.

To do

[ ] User 데이터 types 정의
[ ] 클라이언트에 AccessToken 관리하는 ContextAPI 구현
[ ] 토큰 재발급 로직 구현
[ ] 로그인 페이지 UI 구현

[sonarqubecloud]

Quality Gate passed

Issues
9 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud