FF | Lucy.Space

1. 프로젝트 개요

기간: 2024.06 - 2024.09

인원: Frontend(1명), Backend(1명), PD(1명)

설명: Google Maps API를 활용해 외국인들이 한국 레스토랑 정보를 확인하고 예약할 수 있는 서비스 개발

도메인: 사용자가 온라인(웹/앱)에서 한국 내 레스토랑 정보를 확인하고 예약할 수 있는 위치 기반 O2O 플랫폼

프론트엔드 개발 담당

Frontend: Next.js, React, Tailwindcss, TypeScript, React-Native, SWR, NextAuth

배포: Vercel

✅ Next-i18n을 활용하여 다국어 지원

✅ NextAuth 라이브러리를 활용하여 OAuth 로그인 기능 구현

✅ Google Maps API를 활용하여 사용자 위치에 따른 가까운 지하철역과 공항 정보 제공 ⇒ 데이터 캐시 + SWR 캐시를 활용하여 API 호출 수 감소

✅ React-Native를 활용하여 웹뷰 방식의 모바일 화면 개발

✅ 사용자가 현재 위치를 기반으로 레스토랑 탐색 기능 및 예약 기능 제공

📌 문제 상황:

React-Native-WebView에서 NextAuth OAuth 로그인 시 403 오류 발생

Google OAuth 정책 상, 인앱 브라우저에서의 인증이 차단됨

📌 원인 분석:

WebView 환경에서 OAuth 요청 시, 인증이 인앱 브라우저(WebView 내부에서 열리는 브라우저)에서 수행됨

Google OAuth는 인앱 브라우저 환경에서의 로그인 요청을 보안상 차단

NextAuth의 기본 설정상 OAuth 요청을 새로운 브라우저에서 열리도록 하는 방법은 불가능함

🎯 해결 과정 및 적용한 접근법:

✅ 1. WebView 내부에서 직접 OAuth 요청 → 실패

WebView 내에서 OAuth 요청을 시도했으나, 403 오류로 차단됨

user-agent를 변경하거나 WebView 설정을 수정해도 Google 정책상 해결 불가능

✅ 2. NextAuth 설정 변경 검토 → 불가능

NextAuth의 OAuth 인증 방식은 기본적으로 브라우저에서의 인증 요청을 기대

WebView 내에서 NextAuth를 통한 OAuth 요청을 직접 수행하는 것은 제한됨

✅ 3. React-Native에서 기본 브라우저를 통한 OAuth 인증 방식으로 변경 (최종 해결)

로그인 버튼 클릭 시 React-Native의 Linking API를 활용하여 OAuth URL을 기본 브라우저에서 열도록 변경

WebView가 아닌 기본 브라우저에서 로그인 인증 진행

인증 완료 후, 커스텀 스킴(Custom URL Scheme)을 사용하여 WebView로 인증 결과 전달