Supabase Google 로그인 on Web

소개

소개

• 인물 Introduction
• the Supabase Google 로그인 - 일반 설정.

Implementation

예시 앱의 이 가이드는 주요 개념과 사용 방법을 설명합니다. supabaseAuthUtils.ts 인증 도우미 사용

인증 도우미 함수는 전체 인증 흐름을 처리합니다.

__CAPGO_KEEP_0__ authenticateWithGoogleSupabase __CAPGO_KEEP_1__

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

Critical: Redirect Handling

Critical: Redirect Handling

웹에서 Google 로그인을 사용할 때 MUST redirect가 발생할 때 플러그인을 초기화하기 위해 플러그인에서 함수를 호출해야 합니다. 플러그인이 redirect를 처리하고 팝업 창을 닫을 수 있도록 하기 위해. redirect를 처리할 수 있습니다. OR isLoggedIn() - 두 가지 모두 redirect 처리를 트리거합니다. initialize() OAuth 팝업 흐름이 올바르게 작동하기 위해 필수입니다.

Implementation Example

Implementation Example

Implementation Example

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 완전한 예제를 보려면

작동 방식

인증 흐름의 세부 설명, nonce 생성, JWT 검증 및 Supabase 로그인에 대한 자세한 설명을 위해서는 일반 설정 가이드의 .

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

SupabasePage.tsx

• 완전한 참조를 위해서는 일반 설정 가이드의 참조를 확인하세요. - __CAPGO_REDIRECT_EXAMPLE__
• SupabaseCreateAccountPage.tsx - __CAPGO_CREATE_ACCOUNT_PAGE__

중요한 주의 사항

__CAPGO_REDIRECT_HANDLING_SECTION__

MUST redirect가 발생할 때 플러그인에서 함수를 호출하여 플러그인을 초기화하여 redirect를 처리하고 팝업 창을 닫아야 합니다. 플러그인에서 redirect를 처리하고 팝업 창을 닫기 위해 OR isLoggedIn() - 두 가지 모두 redirect 처리를 트리거합니다. initialize() __CAPGO_REDIRECT_BOTH_WILL_TRIGGER__

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

Nonce 처리

Nonce 구현은 React Native Google Sign In 문서에서 설명하는 패턴을 따릅니다. Supabase로 이동:

• rawNonce Supabase는 SHA-256 해시를 생성하고 signInWithIdToken()
• 해시와 Google Sign-In에서 제공하는 ID 토큰의 rawNonce parameter를 비교합니다. nonceDigest (SHA-256 해시, 16진수 인코딩) Google Sign-In API의
• nonceDigest parameter로 이동 nonce 자동 재시도

__CAPGO_KEEP_0__

implementation에는 자동 재시도 논리가 포함되어 있습니다:

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

문제 해결

Redirect가 작동하지 않는다

• : 컴포넌트가 마운트 될 때 호출하십시오 (위의 예시 참조)잘못된 청중 isLoggedIn() __CAPGO_KEEP_0__
• __CAPGO_KEEP_0__: Google Client ID를 Google Cloud Console와 Supabase에서 일치하는지 확인하세요.
• Authorized redirect URLs: Google Cloud Console와 Supabase에서 허용된 리다이렉트 URL을 설정했는지 확인하세요.
• Nonce mismatch: 콘솔 로그를 확인하세요. 함수는 자동으로 다시 시도하지만 필요할 경우 수동으로 로그아웃할 수 있습니다.
• Token validation fails: initialize 함수에 idToken을 가져오기 위해 사용하는 것을 확인하세요. mode: 'online' in the initialize call to get an idToken
• Review the Capgo 예제 앱 code for reference

Keep going from Supabase Google Login on Web

Capgo를 사용하는 경우 Supabase Google Login on Web 인증 및 계정 흐름을 계획하고 연결하려면 Using @capgo/capacitor-social-login Capgo의 native 기능인 Using @capgo/capacitor-social-login에서 사용 @capgo/capacitor-social-login Capgo의 implementation detail인 @capgo/capacitor-social-login에서 사용 @capgo/capacitor-passkey Capgo의 implementation detail인 @capgo/capacitor-passkey에서 사용 @capgo/capacitor-native-biometric Capgo의 implementation detail인 @capgo/capacitor-native-biometric에서 사용 두 단계 인증 두 단계 인증 구현 세부 사항에 대한 설명