__CAPGO_KEEP_1__

소개

이 가이드는 Google Sign-In을 Web에서 Supabase Authentication과 통합하는 데 도움이 될 것입니다. Google Sign-In Web 설정을 완료한 것으로 가정합니다.

• Google Login Web 설정 Supabase Google Login - 일반 설정
• 구현 구현에 대한 완전한 구현은.

예제 앱의

example app’s 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() OR initialize() - both will trigger the redirect handling.

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 를 참조하십시오. How It Works

How It Works 설명입니다.

For a detailed explanation of how the authentication flow works, including nonce generation, JWT validation, and Supabase sign-in, see the How It Works section in the General Setup guide.

For the complete code reference, see the Complete Code Reference section in the General Setup guide.

Also see:

• SupabasePage.tsx - 예시 컴포넌트에서 리다이렉트 처리
• SupabaseCreateAccountPage.tsx - 예시 계정 생성 페이지

중요한 주의 사항

Redirect Handling

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

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

Nonce 처리

Supabase로 이동 __CAPGO_KEEP_0__:

• rawNonce __CAPGO_KEEP_1__ signInWithIdToken()
• Supabase는 해시를 생성하고 rawNonce Google Sign-In의 ID 토큰에서 nonceDigest SHA-256 해시(16진수 인코딩)가 포함된
• nonceDigest Google Sign-In API의 nonce 자동 재시도

자동 재시도

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

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

__CAPGO_KEEP_0__

인증이 실패한 경우:

• 리다이렉트가 작동하지 않는다: 인증이 성공적으로 완료되었는지 확인하십시오. isLoggedIn() 컴포넌트가 마운트 될 때 호출하십시오 (위의 예시 참조)
• 유효한 청중: Google 클라우드 콘솔과 Supabase에서 Google Client ID가 일치하는지 확인하십시오.
• 인증된 리다이렉트 URL: Google 클라우드 콘솔과 Supabase에서 인증된 리다이렉트 URL이 구성되어 있는지 확인하십시오.
• Nonce 일치하지 않음: 콘솔 로그를 확인하십시오 - 함수는 자동으로 다시 시도하지만 필요할 경우 수동으로 로그아웃할 수 있습니다.
• 토큰 유효성 검사 실패: mode: 'online' initialize call을 사용하여 idToken을 얻기 위해
• Review the 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_KEEP_0__/__CAPGO_KEEP_1__-social-login을 사용하여 native capability를 사용합니다. @capgo/capacitor-social-login을 사용하여 native capability를 사용합니다. @capgo/capacitor-social-login을 사용하여 native capability를 사용합니다. @capgo/capacitor-social-login capgo/capacitor-social-login 구현 세부 사항을 참조하십시오. @capgo/capacitor-passkey capgo/capacitor-passkey 구현 세부 사항을 참조하십시오. @capgo/capacitor-native-biometric capgo/capacitor-native-biometric 구현 세부 사항을 참조하십시오. Two-factor authentication 두 단계 인증 구현 세부 사항을 참조하십시오.