Supabase Apple Login - 일반 설정

개요

이 가이드는 Supabase Authentication에 Apple Sign-In을 연동하는 방법을 안내합니다. Apple Sign-In은 iOS, Android, Web 플랫폼에서 모두 작동하는 안전하고 개인정보 보호에 중점을 둔 인증 방식입니다.

사전 요구사항

시작하기 전에 다음 사항을 확인하세요:

1. Supabase 프로젝트 생성 완료

2. 앱 스위처 동작에 대한 Apple 로그인 기본 설정 Apple OAuth 자격 증명 설정 가이드

3. 대상 플랫폼별 가이드에 따라 Apple OAuth 자격 증명을 설정하세요:

   • Android 설정
   • iOS 설정
   • Web 설정

   참고

   Supabase 튜토리얼을 시작하기 전에, 사용할 플랫폼의 client ID를 먼저 생성해야 합니다.

   iOS의 경우, client ID는 app ID와 동일합니다. Android 및 Web의 경우, client ID는 service ID와 동일합니다. 이 값들은 이 가이드의 7단계에서 사용됩니다.

Supabase에서 Apple OAuth 프로바이더 활성화하기

1. 다음으로 이동하세요: Supabase 대시보드

2. 프로젝트 클릭

   

3. 다음으로 이동하세요: Authentication 메뉴

   

4. 다음을 클릭하세요: Providers 탭

   

5. 다음 Apple 프로바이더

   

6. 활성화: Apple 프로바이더

   

7. client ID 설정을 입력하세요:

   참고

   iOS에서 Apple login을 사용하는 경우, client ID는 app ID와 동일합니다. Android 또는 Web에서 Apple login을 사용하는 경우, client ID는 service ID와 동일합니다. 두 환경을 모두 사용하는 경우, app ID와 service ID를 모두 제공해야 합니다.

   

8. 다음을 클릭하세요: Save 버튼을 클릭하세요

   

   참고

   귀하 할 필요 없음 설정 Secret key (for OAuth). Apple login 처리를 위한 커스텀 백엔드 구현을 진행합니다.

이제 Supabase Authentication을 통한 Apple Sign-In 설정이 완료되었습니다 🎉

Authentication Helper 사용하기

전체 구현에는 다음을 포함하는 헬퍼 함수가 포함됩니다. authenticateWithAppleSupabase() 이 함수는 Supabase를 이용한 Apple Sign-In의 전체 흐름을 처리합니다:

• 플랫폼별 설정을 통한 Apple Sign-In 초기화
• 인증 흐름 처리 (iOS는 native, Android/Web은 OAuth redirect)
• Apple로부터 identity token 추출
• identity token을 사용하여 Supabase 로그인

전체 구현 코드

전체 구현 코드는 예제 앱의 supabaseAuthUtils.ts 다운로드됩니다.

기본 사용법

import { authenticateWithAppleSupabase } from './supabaseAuthUtils';

const result = await authenticateWithAppleSupabase();
if (result.success) {
  console.log('Signed in:', result.user);
  // Navigate to your authenticated area
} else {
  console.error('Error:', result.error);
}

작동 원리

헬퍼 함수가 플랫폼별 차이점을 자동으로 처리합니다:

• iOS: 네이티브 Apple Sign-In을 사용합니다 (redirect URL이 필요 없으며 bundle ID를 자동으로 사용합니다)
• Android: 백엔드 edge function과 함께 OAuth redirect flow를 사용합니다 (Service ID 필요)
• 웹: OAuth 팝업 플로우 사용 (Service ID와 현재 페이지 URL을 리다이렉트로 지정해야 함)

이 함수는 Apple로부터 identity token을 반환하며, 이 토큰은 다음을 사용해 Supabase 인증에 사용됩니다 supabase.auth.signInWithIdToken().

Supabase Apple Login - General Setup에서 계속하기

사용 중이라면 Supabase Apple Login - 일반 설정 인증 및 계정 흐름을 설계할 때, 이를 다음 항목과 연결하세요: @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단계 인증의 구현 세부 사항에 대해서는