Supabase Google 로그인

소개

이 가이드는 Google Sign-In을 Supabase 인증에 통합하는 데 도움이 됩니다. 웹 환경에서 작동합니다. 이미 완료한 것으로 가정합니다:

• 이 Google Login Web 설정
• Supabase Google Login - 일반 설정 Implementation.

구현

예제 앱의 example app’s supabaseAuthUtils.ts 파일. 이 안내서에서는 주요 개념과 사용 방법을 설명합니다.

인증 도우미 사용

The authenticateWithGoogleSupabase 함수는 인증 흐름의 모든 단계를 처리합니다:

import { authenticateWithGoogleSupabase } from './supabaseAuthUtils';

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

중요: 리다이렉트 처리

웹에서 Google 로그인 사용할 때,

반드시 리다이렉트가 발생할 때 플러그인에서 함수를 호출하여 플러그인을 초기화하여 리다이렉트를 처리하고 팝업 창을 닫아야 합니다. 플러그인에서 함수를 호출할 수 있습니다. isLoggedIn() 또는 initialize() - 두 가지 모두 리다이렉트 처리를 트리거합니다.

OAuth 팝업 흐름이 올바르게 작동하기 위해 필수입니다.

Implementation Example

Google Sign-In을 처리하는 컴포넌트에 이 코드를 추가하세요:

import { useEffect } from 'react';
import { SocialLogin } from '@capgo/capacitor-social-login';

function SupabasePage() {
  // Check Google login status on mount to invoke redirect handling
  // This doesn't serve any functional purpose in the UI but ensures
  // that any pending OAuth redirects are properly processed
  useEffect(() => {
    const checkGoogleLoginStatus = async () => {
      try {
        await SocialLogin.isLoggedIn({ provider: 'google' });
        // We don't use the result, this is just to trigger redirect handling
      } catch (error) {
        // Ignore errors - this is just for redirect handling
        console.log('Google login status check completed (redirect handling)');
      }
    };

    checkGoogleLoginStatus();
  }, []);

  // ... rest of your component
}

참조 SupabasePage.tsx 완전한 예제를 보려면

Capgo Builder에서 Native Build의 작동 방식

인증 흐름이 작동하는 방법에 대한 자세한 설명, 비회원 토큰 생성, JWT 검증 및 Supabase 로그인 포함, 일반 설정 가이드의 "How It Works" 섹션을 참조하십시오.

완전한 code 참조를 보려면 일반 설정 가이드의 "Complete Code Reference" 섹션을 참조하십시오.

또한 참조하십시오:

• SupabasePage.tsx - 리다이렉트 처리를 포함한 예제 컴포넌트
• SupabaseCreateAccountPage.tsx - 예제 계정 생성 페이지

중요한 주의 사항

리다이렉트 처리

웹에서 Google 로그인을 사용할 때 반드시 리다이렉트가 발생할 때 플러그인을 초기화하여 리다이렉트를 처리하고 팝업 창을 닫을 수 있도록 하기 위해 플러그인에서 함수를 호출해야 합니다. 리다이렉트 처리를 트리거하는 함수를 호출할 수 있습니다. isLoggedIn() 또는 initialize() - 두 함수 모두 리다이렉트 처리를 트리거합니다.

OAuth 팝업 흐름이 올바르게 작동하기 위해 필수입니다. 인증 후 팝업 창이 닫히지 않습니다.

Nonce 처리

Supabase로 이동합니다. Nonce:

• rawNonce Nonce signInWithIdToken()
• Supabase는 Google Sign-In의 ID 토큰에서 SHA-256 해시를 생성하고 rawNonce 그것을 Google Sign-In API의 nonceDigest parameter와 비교합니다.
• nonceDigest Google Sign-In API의 nonce 자동 재시도

자동 재시도

JWT 검증이 첫 번째 시도에서 실패하면 로그아웃하고 다시 시도합니다.

• 이것은 캐시된 토큰이 잘못된 nonce를 가지고 있는 경우를 처리합니다.
• 재시도도 실패하면 오류가 반환됩니다.
• 문제 해결

지원

인증이 실패하는 경우:

• Redirect가 작동하지 않는다: Mount 시 컴포넌트에서 isLoggedIn() (위 예시 참조)
• 유효하지 않은 청중: Google 클라우드 콘솔과 Supabase에서 Google Client ID가 일치하는지 확인하십시오
• 인증된 리다이렉트 URL: Google 클라우드 콘솔과 Supabase에서 인증된 리다이렉트 URL이 설정되어 있는지 확인하십시오
• Nonce 일치하지 않음: 콘솔 로그를 확인하십시오 - 함수는 자동으로 다시 시도하지만 필요할 경우 수동으로 로그아웃하십시오
• 토큰 유효성 검사 실패: 사용자가 올바르게 설정되어 있는지 확인하세요. mode: 'online' in initialize 함수 호출에서 idToken을 얻으세요.
• 리뷰를 하세요. 예시 앱 code 참조로

Supabase Google Login on Web에서 계속하세요.

Supabase Google Login on Web을 사용하는 경우 인증 및 계정 흐름을 계획하고 Supabase Google Login on Web을 연결하세요. @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login을 사용하여 @capgo/capacitor-social-login의 네이티브 기능을 사용하여 Using @capgo/capacitor-social-login @capgo/capacitor-social-login Capgo에서 @capgo/capacitor-social-login의 구현 세부 사항 @capgo/capacitor-passkey Capgo에서 @capgo/capacitor-passkey의 구현 세부 사항 @capgo/capacitor-native-biometric Capgo에서 @capgo/capacitor-native-biometric의 구현 세부 사항, 그리고 두 단계 인증 Capgo에서 두 단계 인증의 구현 세부 사항.