Supabase Google 웹에서 로그인

소개

이 가이드는 웹에서 Supabase 인증과 Google 로그인을 통합하는 데 도움이 됩니다. 이미 다음 작업을 완료했다고 가정합니다.

구현

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

인증 도우미 사용

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 로그인을 처리하는 구성 요소에 다음을 추가하세요.

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 로그인을 포함하여 인증 흐름이 작동하는 방식에 대한 자세한 설명은 일반 설정 가이드의 작동 방식 섹션을 참조하세요.

전체 코드 참조는 일반 설정 가이드의 전체 코드 참조 섹션을 참조하세요.

다음도 참조하세요.

SupabasePage.tsx - 리디렉션 처리가 포함된 예제 구성 요소
SupabaseCreateAccountPage.tsx - 계정 생성 페이지 예시

중요 참고사항

리디렉션 처리

웹에서 Google 로그인을 사용할 때 리디렉션이 발생하면 플러그인에서 모든 함수를 호출하여 리디렉션을 처리하고 팝업 창을 닫을 수 있도록 플러그인을 초기화해야 합니다. isLoggedIn() 또는 initialize()을 호출할 수 있습니다. 둘 다 리디렉션 처리를 트리거합니다.

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

Nonce 처리

nonce 구현은 React Native Google 로그인 문서의 패턴을 따릅니다.

rawNonce은(는) Supabase의 signInWithIdToken()(으)로 이동합니다.
Supabase는 rawNonce의 해시를 만들고 이를 Google의 ID 토큰에 포함된 nonceDigest과 비교합니다.
nonceDigest(SHA-256 해시, 16진수 인코딩)은 Google 로그인 API의 nonce 매개변수로 이동합니다.

자동 재시도

구현에는 자동 재시도 논리가 포함됩니다.

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

문제 해결

인증이 실패하는 경우:- 리디렉션이 작동하지 않음: 구성 요소 마운트 시 isLoggedIn()을 호출하고 있는지 확인하세요(위 예 참조).

잘못된 대상: Google 클라이언트 ID가 Google Cloud Console과 Supabase 모두에서 일치하는지 확인하세요.
승인된 리디렉션 URL: 승인된 리디렉션 URL이 Google Cloud Console과 Supabase 모두에 구성되어 있는지 확인하세요.
Nonce 불일치: 콘솔 로그를 확인하세요. 기능이 자동으로 재시도되지만 필요한 경우 먼저 수동으로 로그아웃할 수 있습니다.
토큰 유효성 검사 실패: idToken을 가져오기 위한 초기화 호출에서 mode: 'online'을 사용하고 있는지 확인하세요.
참고용으로 예제 앱 코드를 검토하세요.