Android에서 Supabase Apple 로그인

사전 요구사항

이 가이드는 Android에서 Supabase Authentication과 Apple Sign-In을 연동하는 방법을 안내합니다. 다음 단계가 이미 완료되었다고 가정합니다:

• 해당 Supabase Apple Login - 일반 설정.

중요

Apple은 Android를 공식 지원하지 않으므로, Android에서 Apple Sign-In을 구현하려면 백엔드 서버가 필요합니다. 여기서는 Supabase Edge Function을 백엔드로 사용합니다.

1단계: 백엔드 Edge Function 배포

먼저 Apple OAuth 콜백을 처리할 Supabase Edge Function을 배포해야 합니다.

1. Supabase 프로젝트 디렉토리로 이동합니다.

   cd your-project/supabase

2. edge function 생성 (존재하지 않는 경우)

   supabase functions new apple-signin-callback

3. code edge function 복사

   전체 edge function 구현 코드는 다음에서 확인할 수 있습니다: 예제 앱.

   다음 파일들을 프로젝트로 복사하세요:

   • supabase/functions/apple-signin-callback/index.ts - 메인 edge function code
   • supabase/functions/apple-signin-callback/deno.json - 의존성용 import map (다음 포함) jose JWT 서명 라이브러리)

4. JWT 검증 설정

   Apple OAuth 콜백 엔드포인트는 Apple이 리다이렉트하므로 반드시 공개 상태(인증 불필요)여야 합니다. 다음을 업데이트하세요: supabase/config.toml 파일에 추가하세요:

   [functions.apple-signin-callback]
   enabled = true
   verify_jwt = false  # Important: Set to false for public OAuth callback
   import_map = "./functions/apple-signin-callback/deno.json"
   entrypoint = "./functions/apple-signin-callback/index.ts"

   중요

   설정 verify_jwt = false 이 엔드포인트를 공개로 설정합니다. Apple의 OAuth 리다이렉트에는 Supabase 인증 헤더가 포함되지 않으므로 이 작업이 필요합니다. 엔드포인트 자체에서 OAuth 흐름을 검증합니다.

5. 함수 배포하기

   supabase functions deploy apple-signin-callback

6. 함수 URL 가져오기

   배포가 완료되면 다음과 같은 URL이 생성됩니다:

   https://your-project-ref.supabase.co/functions/v1/apple-signin-callback

   URL을 찾을 수 없는 경우 다음 방법을 시도해 보세요:

   1. 열기 https://supabase.com/dashboard/project/YOUR_PROJECT_REF/functions
   2. 다음을 클릭하세요: apple-signin-callback function URL을 복사하려면 클릭하세요.

   이 URL을 저장하세요

   다음 단계인 Apple Developer Portal 설정 시 이 URL이 필요합니다.

2단계: Apple Developer Portal 설정

이제 백엔드 URL을 사용하여 Apple Developer Portal을 설정하고 필요한 모든 값을 가져와야 합니다.

함수 URL

진행하기 전에 1단계에서 확인한 Supabase Edge Function URL을 준비하세요. Apple Developer Portal에서 Return URL을 설정할 때 필요합니다.

1. Apple Login Android 설정 가이드 따라하기

   다음을 완료하세요: Apple Login Android 설정 가이드 대상:

   • Service ID 생성
   • 개인 키(.p8 파일) 생성
   • Team ID와 Key ID 확인
   • Return URL 설정

2. Apple Developer Portal에서 Return URL 설정

   Apple Developer Portal에서 Return URL을 설정할 때(Apple 가이드 6.9단계) 다음 Supabase Edge Function URL을 사용하세요:

   https://your-project-ref.supabase.co/functions/v1/apple-signin-callback

   중요: Supabase Edge Function URL을 사용하세요

   주의: 다음의 리다이렉트 URL을 Apple Login Android 설정 가이드사용하지 마세요. 해당 가이드는 커스텀 백엔드 서버 URL을 기준으로 합니다. Supabase 연동 시에는 해야 합니다 대신 Supabase Edge Function URL을 사용해야 합니다.

   정확한 일치 필요

   Return URL은 여기서 설정한 값과 반드시 정확히 일치해야 합니다. Apple은 리다이렉트 URI 일치 여부를 매우 엄격하게 검사합니다.

3. 필요한 모든 값 수집하기

   Apple 설정 가이드를 완료하면 다음 값들을 확보하게 됩니다:

   • APPLE_TEAM_ID: Apple Developer Team ID
   • APPLE_KEY_ID: Apple Developer Portal의 Key ID
   • APPLE_PRIVATE_KEY: .p8 private key 파일 (base64 인코딩 필요)
   • ANDROID_SERVICE_ID: Apple Service ID (예: com.example.app.service)
   • BASE_REDIRECT_URL: deep link URL (예: capgo-demo-app://path)

   딥링크 URL

   이 BASE_REDIRECT_URL is the deep link scheme configured in your AndroidManifest.xml인증 후 백엔드가 리다이렉트할 URL입니다.

   Deep link 값은 다음에 따라 달라집니다: android:scheme="capgo-demo-app" code. 만약 설정했다면 android:scheme="capgo-demo-app" 에서 AndroidManifest.xml, 그러면 deep link는 다음과 같습니다: capgo-demo-app://path.

3단계: Supabase Secrets 설정

이제 Supabase Edge Function의 환경 변수(secrets)를 설정해야 합니다.

1. 개인 키 인코딩하기

   먼저 Apple 개인 키(.p8 파일)를 base64로 인코딩하세요:

   base64 -i AuthKey_XXXXX.p8

   출력 전체를 복사하세요(하나의 긴 문자열입니다).

2. Supabase CLI로 secret 설정하기

   supabase secrets set APPLE_TEAM_ID=your_team_id
   supabase secrets set APPLE_KEY_ID=your_key_id
   supabase secrets set APPLE_PRIVATE_KEY=your_base64_encoded_key
   supabase secrets set ANDROID_SERVICE_ID=your.service.id
   supabase secrets set BASE_REDIRECT_URL=your-app://path
   supabase secrets set APPLE_REDIRECT_URI=https://your-project-ref.supabase.co/functions/v1/apple-signin-callback

   플레이스홀더 교체

   모든 플레이스홀더 값을 2단계에서 얻은 실제 값으로 교체하세요.

3. 대안: Supabase Dashboard에서 secret 설정하기

   대시보드를 사용하는 것이 편하다면:

   1. Supabase 프로젝트 대시보드로 이동하세요
   2. 다음으로 이동: Edge Functions → 설정 → Secrets
   3. 각 secret 변수와 해당 값을 추가하세요

Android 앱 설정

이 Apple Login Android 설정 가이드 이미 Android 앱 설정 방법을 다루고 있습니다:

• 딥 링크 인텐트 필터 추가: AndroidManifest.xml
• 추가: onNewIntent 핸들러를 다음 항목에 추가: MainActivity.java

다음 단계로 넘어가기 전에 해당 작업들을 완료했는지 확인하세요. 여기서 설정한 딥 링크 스킴이 3단계의 BASE_REDIRECT_URL 가 됩니다.

4단계: Authentication Helper 사용

이제 앱에서 code 인증 헬퍼를 사용할 수 있습니다.

구현 방법

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

Authentication Helper 사용하기

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);
}

Helper 함수 업데이트

다음 authenticateWithAppleSupabase helper function을 사용할 때, 해야 합니다 설정값에 맞춰 아래 항목들을 업데이트하세요:

1. 업데이트 redirectUrl - Supabase Edge Function URL을 입력하세요:

   const redirectUrl = platform === 'android'
     ? 'https://your-project-ref.supabase.co/functions/v1/apple-signin-callback'
     : undefined;

2. 업데이트 clientId - 다음을 Apple Service ID로 설정하세요:

   await SocialLogin.initialize({
     apple: {
       clientId: isIOS
         ? undefined // iOS uses bundle ID automatically
         : 'your.service.id.here', // Your Apple Service ID for Android
       redirectUrl: redirectUrl,
     },
   });

   중요

   교체 'your.service.id.here' 실제 Apple Service ID를 입력하세요 (Step 3에서 사용한 ANDROID_SERVICE_ID 값과 동일해야 합니다).

참고하세요: 예제 앱의 전체 구현 예시 참고용.

5단계: 연동 테스트

1. Android 앱 빌드 및 실행

   npx cap sync android
   npx cap run android

2. 인증 흐름 테스트

   • “Sign in with Apple” 버튼 클릭
   • 브라우저에 Apple OAuth 페이지가 나타납니다
   • 인증을 마치면 앱으로 다시 리다이렉트됩니다
   • 콘솔 로그에서 에러가 있는지 확인하세요

3. 흐름 검증

   전체 흐름은 다음과 같습니다:

   1. 사용자가 “Sign in with Apple”을 탭합니다
   2. 앱이 Apple OAuth로 브라우저를 엽니다
   3. 사용자가 Apple로 인증합니다
   4. Apple이 다음으로 리다이렉트합니다: https://your-project-ref.supabase.co/functions/v1/apple-signin-callback
   5. Edge function이 code를 토큰으로 교환합니다
   6. Edge function이 다음으로 리다이렉트합니다: your-app://path?id_token=...&access_token=...
   7. Android 앱이 딥링크를 수신하고 identity token을 처리합니다
   8. 앱이 identity token으로 Supabase에 로그인합니다

문제 해결

인증에 실패하는 경우:

• Redirect URI 불일치: Apple Developer Portal의 Return URL이 다음 항목과 정확히 일치하는지 확인하세요: APPLE_REDIRECT_URI secret
• Deep link가 작동하지 않음: 다음 사항을 확인하세요: AndroidManifest.xml intent filter가 다음 항목과 일치하는지 확인: BASE_REDIRECT_URL
• secret 누락: 다음을 사용하여 모든 secret이 올바르게 설정되었는지 확인하세요: supabase secrets list
• Token exchange 실패: 자세한 에러 메시지는 Supabase Dashboard의 edge function logs에서 확인하세요
• 앱이 callback을 받지 못함: 다음 사항을 확인하세요. onNewIntent MainActivity에 올바르게 구현됨
• 다음을 참고하세요: 예제 앱 code 참고용

작동 원리

Android에서 Apple Sign-In은 OAuth 리다이렉트 흐름을 사용합니다:

1. 초기화: Service ID와 백엔드 리다이렉트 URL로 플러그인을 초기화합니다
2. OAuth 흐름: Apple OAuth 페이지가 포함된 브라우저 또는 Chrome Custom Tab을 엽니다
3. 백엔드 콜백: Apple이 인증 code와 함께 Supabase Edge Function으로 리다이렉트합니다
4. Token 교환: edge function이 Apple의 token endpoint를 사용하여 code를 token으로 교환합니다.
5. Deep Link 리다이렉트: edge function이 identity token과 함께 앱으로 다시 리다이렉트합니다.
6. Supabase 인증: 앱이 token을 수신하고 Supabase에 로그인합니다.

Apple이 Sign in with Apple에 대한 Android 네이티브 지원을 제공하지 않기 때문에 이 흐름이 필요합니다.

Supabase Apple Login on Android에서 계속하기

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