Supabase 연동 소개

개요

이 튜토리얼에서는 Capacitor Social Login 플러그인으로 Supabase 인증을 설정하는 방법을 안내합니다. 이 통합을 사용하면 모바일 플랫폼에서 네이티브 소셜 로그인 제공자(Google, Apple, Facebook, Twitter)를 사용하면서 백엔드 인증은 Supabase Auth, 데이터 저장은 PostgreSQL을 활용할 수 있습니다.

배우게 될 내용

• Supabase 인증 설정 방법
• Capacitor Social Login 플러그인을 Supabase Auth에 통합하는 방법
• Android, iOS, Web 플랫폼별 설정
• Supabase에서 nonce를 안전하게 처리하는 방법

준비 사항

시작하기 전에 다음이 준비되어 있는지 확인하세요:

1. Supabase 프로젝트

   • 다음에서 프로젝트를 생성하세요 Supabase 대시보드
   • Google OAuth 제공자 활성화
   • Supabase 프로젝트 URL과 anon 키를 가져오세요

2. Supabase JS SDK

   • 프로젝트에 Supabase를 설치하세요:

     npm install @supabase/supabase-js

3. Capacitor 프로젝트

   • 기존 Capacitor 애플리케이션
   • Capacitor Social Login 플러그인 설치 완료:

     npm install @capgo/capacitor-social-login
     npx cap sync

4. 플랫폼별 Google 설정

   • 대상 플랫폼에 대한 Google Sign-In 설정을 완료하세요:
     • Android용 Google Login 설정
     • iOS용 Google Login 설정
     • Google Login 웹 설정

예제 애플리케이션

전체 동작 예제는 다음 저장소에서 확인할 수 있습니다:

Code 저장소: code 저장소는 여기에서 확인할 수 있습니다

예제 앱에서 보여주는 기능:

• Supabase 이메일/비밀번호 인증
• Google Sign-In 연동 (Android, iOS, Web)
• Supabase PostgreSQL 테이블을 활용한 간단한 키-값 저장소
• Row Level Security(RLS)를 활용한 사용자별 데이터 저장

주요 구현 세부 사항

Nonce 처리

Supabase는 보안을 위해 특별한 nonce 처리가 필요합니다. 구현은 다음을 따릅니다: React Native Google Sign In 문서:

• 생성하세요: rawNonce (URL-safe 랜덤 문자열)
• SHA-256으로 해시하여 다음을 얻습니다: nonceDigest
• 전달하세요: nonceDigest 를 Google Sign-In에
• 전달하세요: rawNonce 를 Supabase에 (Supabase가 내부적으로 해싱하여 비교함)

JWT 검증

예제 구현에는 다음을 보장하는 JWT 검증이 포함되어 있습니다:

• 토큰 audience가 설정된 Google Client ID와 일치
• nonce가 예상 digest와 일치
• 검증 실패 시 자동 재시도 (특히 iOS에서 중요)

플랫폼별 고려 사항

• iOS: 토큰 캐싱으로 nonce 문제가 발생할 수 있지만, 구현에서 자동으로 처리합니다
• 웹: 반드시 호출해야 합니다 isLoggedIn() OAuth 리다이렉트를 처리하기 위한 on mount
• Android: SHA-1 지문 설정이 포함된 표준 구현 방식

다음 단계

설정 가이드를 계속 진행하세요:

• Supabase Google Login - 일반 설정 - 개요 및 사전 요구사항
• Android 설정 - Android 전용 설정
• iOS 설정 - iOS 전용 설정
• Web 설정 - Web 전용 설정

Apple로 로그인

• Supabase Apple Login - 일반 설정 - 개요 및 사전 요구사항
• iOS 설정 - iOS 전용 설정
• Android 설정 - Android 전용 설정

Supabase 연동 소개부터 계속하기

사용 중이라면 Supabase 연동 소개 인증 및 계정 흐름을 설계할 때, 이를 다음 항목과 연결하세요: @capgo/capacitor-social-login 사용하기 @capgo/capacitor-social-login 사용 시 네이티브 기능을 위해, @capgo/capacitor-social-login @capgo/capacitor-social-login의 구현 세부 사항은, @capgo/capacitor-passkey @capgo/capacitor-passkey의 구현 세부 사항은 @capgo/capacitor-native-biometric @capgo/capacitor-native-biometric의 구현 세부 사항은, 2단계 인증 2단계 인증의 구현 세부 사항에 대해서는