Supabase 기반 Web-Mobile 통합 Auth 아키텍처 설계

How to share Supabase auth between Next.js and Expo (one client, both platforms)

Shipstack2026년 6월 27일2분intermediate

AI 요약

Context

Next.js와 Expo 환경에서 각각 독립적인 Auth 통합을 수행함에 따라 발생하는 로직 파편화 문제 분석. 플랫폼별 서로 다른 세션 저장소와 환경 변수 처리 방식으로 인한 유지보수 비용 증가 해결 필요.

Technical Solution

@supabase/supabase-js 기반의 Framework-agnostic 클라이언트 팩토리 설계를 통한 로직 단일화
플랫폼별 Storage Adapter(Browser Storage vs AsyncStorage) 주입 방식으로 세션 지속성 확보
Cookie 기반 세션을 배제하고 Bearer Token 방식의 API 인증을 채택하여 Web과 Mobile의 인증 경로 통일
Monorepo 환경에서 Metro 번들러의 심볼릭 링크 이슈 해결을 위한 node-linker=hoisted 설정 적용
Stripe Webhook 기반의 Server-authoritative 구독 관리 구조를 통한 클라이언트 데이터 변조 방지

실천 포인트

- Supabase 클라이언트 생성 시 Storage 옵션을 외부에서 주입받는 Factory 패턴 적용 검토 - Next.js/Expo 환경 변수 접근 시 Dynamic Access를 피하고 Literal 표기법 사용 여부 확인 - Mobile App과 공유하는 API Route 설계 시 Cookie 대신 Authorization Header 기반 인증 체계 구축 - PNPM Monorepo 구성 시 Metro.config.js의 watchFolders와 nodeModulesPaths 설정 최적화

태그

#Supabase #Expo #Monorepo #Authentication #Next.js

원문 읽기