Supabase Apple 로그인 Web

사전 요구사항

이 가이드는 Web에서 Supabase Authentication과 Apple Sign-In을 통합하는 데 도움이 됩니다. 다음을 이미 완료했다고 가정합니다:

구현

전체 구현은 예제 앱의 supabaseAuthUtils.ts 파일에서 사용할 수 있습니다. 이 가이드는 주요 개념과 사용 방법을 설명합니다.

인증 도우미 사용

authenticateWithAppleSupabase 함수는 전체 인증 흐름을 처리합니다:

import { authenticateWithAppleSupabase } from './supabaseAuthUtils';

const result = await authenticateWithAppleSupabase();
if (result.success) {
  console.log('Signed in:', result.user);
  // 인증된 영역으로 이동합니다
} else {
  console.error('Error:', result.error);
}

작동 방식

Web에서 Apple Sign-In은 OAuth 팝업 흐름을 사용합니다:

초기화: 플러그인은 서비스 ID와 현재 페이지 URL을 리다이렉트 URL로 초기화됩니다
OAuth 팝업: Apple OAuth 페이지가 있는 팝업 창 열기
사용자 인증: 팝업에서 사용자가 Apple로 인증
신원 토큰: Apple은 사용자 정보를 포함하는 신원 토큰(JWT) 반환
Supabase 인증: 신원 토큰은 signInWithIdToken()을 사용하여 Supabase로 전송됨

도우미 함수는 웹 플랫폼을 자동으로 감지하고 모든 것을 적절하게 구성합니다.

중요한 참고사항

서비스 ID 구성

Web은 Apple 서비스 ID(Android과 동일) 필요
서비스 ID는 Apple Developer Portal에서 올바른 Return URL로 구성되어야 합니다
Apple Developer Portal에서 도메인이 허용된 도메인에 추가되었는지 확인하세요

리다이렉트 URL

Web에서 리다이렉트 URL은 자동으로 window.location.href(현재 페이지 URL)로 설정됩니다
이는 Apple Developer Portal에서 구성된 Return URL 중 하나와 일치해야 합니다
Apple Developer Portal에서 후행 슬래시가 있는 URL과 없는 URL이 모두 구성되어 있는지 확인하세요

Supabase 클라이언트 ID

Supabase에서 Apple 제공자를 다음과 같이 구성합니다:

Client ID: Apple 서비스 ID(예: com.example.app.service)

iOS도 사용하는 경우 Supabase의 Client ID 필드에서 앱 ID와 서비스 ID를 모두 제공해야 합니다(쉼표로 구분).

도우미 함수 업데이트

authenticateWithAppleSupabase 도우미 함수를 사용할 때 clientId를 Apple 서비스 ID와 일치하도록 업데이트해야 합니다:

await SocialLogin.initialize({
  apple: {
    clientId: isIOS
      ? undefined // iOS는 번들 ID를 자동으로 사용합니다
      : 'your.service.id.here', // Web 및 Android용 Apple 서비스 ID
    redirectUrl: redirectUrl,
  },
});

문제 해결

인증이 실패하면:

서비스 ID 불일치: 서비스 ID가 Apple Developer Portal과 코드에서 일치하는지 확인하세요
Return URL이 구성되지 않음: 현재 페이지 URL(후행 슬래시 포함 및 제외)이 Apple Developer Portal에서 구성되었는지 확인하세요
팝업 차단됨: 브라우저 설정 확인 - 일부 브라우저는 기본적으로 팝업을 차단합니다
도메인이 허용되지 않음: Apple Developer Portal에서 도메인이 허용된 도메인에 추가되었는지 확인하세요
Supabase 구성: 서비스 ID가 Supabase Apple 제공자 설정에서 올바르게 구성되었는지 확인하세요
예제 앱 코드를 참조하세요