웹에서 Supabase Google 로그인

이 플러그인의 설치 단계와 전체 마크다운 가이드를 포함한 설정 지시를 복사하세요

소개

이 가이드는 Google Sign-In을 Supabase Authentication에 통합하는 데 도움이 될 것입니다. Google Sign-In을 Supabase Authentication에 통합하기 전에 다음을 완료한 것으로 가정합니다:

the Google Login Web 설정
the Supabase Google Login - 일반 설정.

Implementation

Implementation Implementation supabaseAuthUtils.ts Implementation

Authentication Helper를 사용하는 방법

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() OR initialize() - 두 함수 모두 리다이렉트 처리를 트리거합니다.

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

구현 예시

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 전체 예제를 참조하세요.

Native Build 방법

구성 방법 구성 방법 설명.

For the complete code reference, see the 전체 Code 참조.

또한 참조하세요.

SupabasePage.tsx 또한 참조하세요:
Redirect 처리를 하는 예제 컴포넌트 - SupabaseCreateAccountPage.tsx - 계정 생성 페이지 예시

중요한 참고 사항

리다이렉트 처리

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

Nonce Handling

Nonce 처리

Nonce 구현은 React Native Google Sign In 문서에서 패턴을 따릅니다. React Native Google Sign In 문서에서 패턴을 따르는 nonce 구현:

rawNonce Supabase로 이동 signInWithIdToken()
Supabase는 nonce를 해시화하고 rawNonce 해시화된 nonce를 Supabase의 nonceDigest 해시화된 nonce와 Google Sign-In ID 토큰의
nonceDigest SHA-256 해시 (16진수 인코딩)로 이동 nonce Google Sign-In API의 parameter로 이동

자동 재시도

자동 재시도 구현에 자동 재시도 논리 포함

JWT 유효성 검증이 첫 번째 시도에서 실패하면 로그아웃하고 다시 시도합니다.
캐시된 토큰이 잘못된 nonce를 가지고 있는 경우를 처리합니다.
재시도도 실패하면 오류가 반환됩니다.

문제 해결

인증이 실패하면:

리다이렉트가 작동하지 않습니다.: 컴포넌트가 마운트 될 때 호출하십시오 (위의 예시 참조) isLoggedIn() 유효한 청중이 아닙니다.
: Google 클라이언트 ID가 Google Cloud Console과 Supabase에서 일치하는지 확인하십시오.인증된 리다이렉트 URL
Ensure you’re calling: Google Cloud Console 및 Supabase에서 인증된 리다이렉트 URL이 구성되어 있는지 확인하세요.
Nonce 일치하지 않음: 콘솔 로그를 확인하세요 - 함수는 자동으로 다시 시도하지만 필요할 경우 수동 로그아웃을 먼저 하세요.
토큰 유효성 검사 실패: mode: 'online' initialize 함수에
Review the example app code 참고로

Supabase Google Login on Web에서 계속하세요 구글 로그인 인증 및 계정 흐름을 계획하고 연결하세요. @capgo/capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-passkey Using @capgo/capacitor-passkey Using @capgo/capacitor-native-biometric Using @capgo/capacitor-native-biometric for @capgo/capacitor-native-biometric 구현 세부 사항에 대해 두 단계 인증 구글 로그인