웹에서 Supabase Google Login

GitHub

이 플러그인의 설치 단계와 전체 마크다운 가이드가 포함된 설정 프롬프트를 복사하세요.

소개

이 가이드는 Web 환경에서 Supabase Authentication에 Google Sign-In을 통합하는 방법을 안내합니다. 다음 단계가 이미 완료되었다고 가정합니다:

해당 Google Login Web 설정
해당 Supabase Google Login - 일반 설정.

구현 방법

전체 구현 코드는 다음 예제 앱의 supabaseAuthUtils.ts 파일에서 확인할 수 있습니다. 이 가이드는 핵심 개념과 사용 방법을 설명합니다.

Authentication Helper 사용하기

이 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 팝업 흐름이 올바르게 작동하려면 이 과정이 필수적입니다.

구현 예시

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 전체 예시를 확인하려면 참고하세요.

작동 원리

nonce 생성, JWT 검증, Supabase 로그인 등 인증 흐름에 대한 자세한 설명은 General Setup 가이드의 How It Works 섹션을 확인하세요..

전체 code 레퍼런스는 General Setup 가이드의 Complete Code Reference 섹션을 확인하세요..

다음 내용도 참고하세요:

SupabasePage.tsx - 리다이렉트 처리가 포함된 예시 컴포넌트
SupabaseCreateAccountPage.tsx - 계정 생성 페이지 예시

주의사항

리다이렉트 처리

웹에서 Google 로그인을 사용할 때는 반드시 리다이렉트 발생 시 플러그인을 초기화하기 위해 플러그인의 함수를 호출해야 합니다. 그래야 리다이렉트를 처리하고 팝업 창을 닫을 수 있습니다. 다음 중 하나를 호출하면 됩니다. isLoggedIn() 또는 initialize() - 둘 다 리다이렉트 처리를 트리거합니다.

OAuth 팝업 플로우가 정상적으로 작동하려면 이 과정이 필수적입니다. 이 설정이 없으면 인증 후에도 팝업 창이 닫히지 않습니다.

Nonce 처리

Nonce 구현 방식은 다음 패턴을 따릅니다: React Native Google Sign In 문서:

rawNonce goes to Supabase’s signInWithIdToken()
Supabase는 다음을 해시화합니다 rawNonce and compares it with the nonceDigest Google Sign-In의 ID token에 포함되어 있습니다
nonceDigest (SHA-256 hash, hex-encoded) goes to the nonce Google Sign-In API의 파라미터

자동 재시도

구현 내용에는 다음과 같은 자동 재시도 로직이 포함되어 있습니다:

첫 번째 JWT 검증에 실패하면, 로그아웃 후 한 번 더 재시도합니다.
이는 캐시된 토큰의 nonce 값이 잘못되었을 경우를 처리합니다.
재시도마저 실패하면 에러를 반환합니다.

문제 해결

인증에 실패하는 경우:

리다이렉트가 작동하지 않는 경우: 다음 함수를 호출하고 있는지 확인하세요. isLoggedIn() 컴포넌트 마운트 시점에 (위의 예시 참고)
잘못된 audience 값: Google Cloud Console과 Supabase의 Google Client ID가 일치하는지 확인하세요
승인된 리다이렉트 URL: Google Cloud Console과 Supabase 모두에 승인된 리다이렉트 URL이 설정되었는지 확인하세요
Nonce 불일치: 콘솔 로그를 확인하세요. 함수가 자동으로 재시도하지만, 필요 시 수동으로 로그아웃한 후 다시 시도할 수 있습니다
토큰 검증 실패: idToken을 받으려면 initialize 호출 시 mode: 'online' 를 사용 중인지 확인하세요
다음 내용을 검토하세요 code 예제 앱 검토하세요

사용 중이라면 웹에서 Supabase Google Login 인증 및 계정 흐름을 설계할 때, 이를 다음 항목과 연결하세요: @capgo/capacitor-social-login 사용하기 @capgo/capacitor-social-login의 네이티브 기능 활용 @capgo/capacitor-social-login @capgo/capacitor-social-login의 구현 세부 사항은, @capgo/capacitor-passkey @capgo/capacitor-passkey의 구현 세부 사항 @capgo/capacitor-native-biometric @capgo/capacitor-native-biometric의 구현 세부 사항은, 2단계 인증 2단계 인증의 구현 세부 사항에 대해서는