웹에서 Supabase Google 로그인

소개

이 가이드는 Google Sign-In을 Supabase Authentication과 Web에서 통합하는 데 도움이 됩니다. Google Login Web 설정과 Supabase Google Login - 일반 설정이 이미 완료된 것으로 가정합니다.

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

Implementation

__CAPGO_KEEP_0__의 완전한 구현은 __CAPGO_KEEP_0__의 __CAPGO_KEEP_0__의 supabaseAuthUtils.ts 파일에 있습니다. 이 안내서에서는 주요 개념과 사용 방법을 설명합니다.

인증 도우미 사용

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

중요: 리다이렉트 처리

__CAPGO_KEEP_2__: 리다이렉트 처리

Google 로그인 사용 시 웹에서 MUST plugin에서 함수를 호출하여 리다이렉트가 발생할 때 plugin을 초기화하여 리다이렉트를 처리하고 팝업 창을 닫을 수 있도록 하십시오. isLoggedIn() OR 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
}

See the SupabasePage.tsx __CAPGO_KEEP_0__

How It Works

__CAPGO_KEEP_0__ 설명을 위해 nonce 생성, JWT 검증, Supabase 로그인과 같은 인증 흐름이 어떻게 작동하는지 자세히 설명한 문서를 참조하십시오. General Setup 가이드의 How It Works 섹션을 참조하십시오..

code 설명을 위해 자세한 설명을 참조하십시오. Code 설명을 위해 Complete Code Reference 섹션을 참조하십시오..

또한 참조하십시오.

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

주의 사항

리다이렉트 처리

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

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

Nonce 처리

nonce 구현은 React Native Google Sign In 문서에서 패턴을 따릅니다. Google Sign-In으로 이동:

• rawNonce Supabase의 signInWithIdToken()
• Supabase는 rawNonce 그것과 nonceDigest Google Sign-In의 ID 토큰에서 포함된
• nonceDigest (SHA-256 해시, 16진수 인코딩)으로 이동 nonce Google Sign-In API의

자동 다시 시도

자동 다시 시도 로직이 포함되어 있습니다:

• JWT 검증이 첫 번째 시도에서 실패하면 로그아웃하고 다시 시도합니다.
• 이러한 경우 캐시된 토큰의 잘못된 nonce가 있을 수 있습니다.
• 재시도도 실패하면 오류가 반환됩니다.

문제 해결

인증이 실패하는 경우:

• 리다이렉트가 작동하지 않는 경우: 컴포넌트 마운트 시 호출하십시오 (위의 예시 참조) isLoggedIn() 유효한 청중
• : Google 클라이언트 ID가 Google Cloud Console과 Supabase에서 일치하는지 확인하십시오.인증된 리다이렉트 URL
• : Google Cloud Console과 Supabase에서 인증된 리다이렉트 URL이 구성되어 있는지 확인하십시오.__CAPGO_KEEP_0__
• Nonce 불일치: 콘솔 로그를 확인하세요 - 함수는 자동으로 다시 시도하지만 필요 시 로그아웃을 수동으로 먼저 해보세요
• 토큰 유효성 검사 실패: __CAPGO_KEEP_0__ 초기화 호출에서 idToken을 사용하는 것을 확인하세요 mode: 'online' 예시 앱 __CAPGO_KEEP_0__
• 참조 example app code 이전