Supabase Google 로그인 - 일반 설정

소개

이 가이드는 Capacitor 소셜 로그인 플러그인을 사용하여 Google 로그인과 Supabase 인증을 통합하는 과정을 안내합니다. 이 설정을 사용하면 백엔드 인증을 위해 Supabase 인증을 활용하면서 모바일 플랫폼에서 기본 Google 로그인을 사용할 수 있습니다.

전제조건

시작하기 전에 다음 사항을 확인하세요.

Supabase 프로젝트 생성
Google OAuth 자격 증명 설정에 대한 Google 로그인 일반 설정 가이드를 읽어보세요.
해당 플랫폼별 가이드에 따라 대상 플랫폼에 대한 Google OAuth 자격 증명을 설정했습니다.
:::참고 Supabase 튜토리얼을 시작하기 전에 사용하려는 플랫폼에 대한 클라이언트 ID를 생성해야 합니다. 이 가이드의 7단계에서 이를 사용하게 됩니다. :::

Supabase에서 Google OAuth 공급자 활성화

Supabase 대시보드로 이동합니다.
프로젝트를 클릭하세요
Authentication 메뉴로 이동하세요.
Providers 탭을 클릭하세요.
Google 공급자 찾기
공급자 활성화
사용하려는 플랫폼의 클라이언트 ID를 추가하세요.

:::참고 여기에는 웹 클라이언트 ID, iOS 클라이언트 ID 및 Android 클라이언트 ID가 포함됩니다. 사용하려는 플랫폼에 따라 일부 제공을 건너뛸 수 있습니다. :::
Save 버튼을 클릭하세요.

짜잔, 이제 Google Supabase 인증으로 로그인이 활성화되었습니다 🎉

Google Supabase 인증 도우미를 사용한 로그인 작동 방식

이 섹션에서는 Google 로그인 통합이 Supabase과 어떻게 작동하는지 설명합니다. 이 흐름을 이해하면 인증 프로세스를 구현하고 문제를 해결하는 데 도움이 됩니다.

1. 논스 생성

구현에서는 Supabase nonce 요구 사항에 따라 보안 nonce 쌍을 생성합니다.

// Generate URL-safe random nonce
function getUrlSafeNonce(): string {
  const array = new Uint8Array(32);
  crypto.getRandomValues(array);
  return Array.from(array, (byte) => byte.toString(16).padStart(2, '0')).join('');
}

// Hash the nonce with SHA-256
async function sha256Hash(message: string): Promise<string> {
  const encoder = new TextEncoder();
  const data = encoder.encode(message);
  const hashBuffer = await crypto.subtle.digest('SHA-256', data);
  const hashArray = Array.from(new Uint8Array(hashBuffer));
  return hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');
}

// Generate nonce pair
async function getNonce(): Promise<{ rawNonce: string; nonceDigest: string }> {
  const rawNonce = getUrlSafeNonce();
  const nonceDigest = await sha256Hash(rawNonce);
  return { rawNonce, nonceDigest };
}

흐름:

rawNonce: URL 안전 임의 문자열(64자리 16진수)
nonceDigest: rawNonce의 SHA-256 해시(16진수 인코딩)
nonceDigest은 Google 로그인으로 전달됩니다. → Google은 ID 토큰에 nonce 다이제스트를 포함합니다.
rawNonce는 Supabase로 전달됩니다. → Supabase는 원시 nonce를 해시하고 토큰의 nonce와 비교합니다.

2. Google 로그인

이 함수는 플러그인을 초기화하고 Google을 사용하여 로그인합니다.

await SocialLogin.initialize({
  google: {
    webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
    // iOS only:
    iOSClientId: 'YOUR_IOS_CLIENT_ID.apps.googleusercontent.com',
    mode: 'online', // Required to get idToken
  },
});

const response = await SocialLogin.login({
  provider: 'google',
  options: {
    scopes: ['email', 'profile'],
    nonce: nonceDigest, // Pass the SHA-256 hashed nonce
  },
});

3. JWT 유효성 검사

토큰을 Supabase로 보내기 전에 구현에서는 JWT 토큰의 유효성을 검사합니다.

function validateJWTToken(idToken: string, expectedNonceDigest: string): { valid: boolean; error?: string } {
  const decodedToken = decodeJWT(idToken);

  // Check audience matches your Google Client IDs
  const audience = decodedToken.aud;
  if (!VALID_GOOGLE_CLIENT_IDS.includes(audience)) {
    return { valid: false, error: 'Invalid audience' };
  }

  // Check nonce matches
  const tokenNonce = decodedToken.nonce;
  if (tokenNonce && tokenNonce !== expectedNonceDigest) {
    return { valid: false, error: 'Nonce mismatch' };
  }

  return { valid: true };
}

Supabase 전에 검증해야 하는 이유는 무엇입니까?

Supabase에 토큰을 보내기 전에 JWT 토큰을 검증하는 것은 몇 가지 중요한 목적을 제공합니다.

잘못된 요청 방지: 토큰에 잘못된 대상이 있거나 nonce 불일치가 있는 경우 Supabase은 어쨌든 토큰을 거부합니다. 먼저 검증하면 불필요한 API 호출을 방지하고 더 명확한 오류 메시지를 제공합니다.
토큰 캐싱 문제: 일부 플랫폼(특히 iOS)에서는 Google 로그인 SDK이 성능을 위해 토큰을 캐시할 수 있습니다. 캐시된 토큰이 반환되면 캐시된 토큰이 다른 nonce로 생성되었을 수 있습니다(또는 nonce가 전혀 없음). 이로 인해 Supabase에서 “nonce 불일치” 오류와 함께 토큰을 거부하게 됩니다. Supabase로 보내기 전에 확인함으로써 이 문제를 조기에 감지하고 새로운 토큰으로 자동으로 재시도할 수 있습니다.
보안(iOS): iOS에서 유효성 검사를 통해 특정 Google 클라이언트 ID에 대해 토큰이 발급되었는지 확인하여 잠재적인 보안 문제가 다른 애플리케이션용 토큰을 사용하는 것을 방지합니다.
더 나은 오류 처리: Supabase 이전에 문제를 감지하면 iOS 캐싱 문제를 투명하게 처리하는 데 필수적인 자동 재시도 논리가 허용됩니다.

유효성 검사에 실패하면 함수는 자동으로 다음을 수행합니다.

Google에서 로그아웃합니다(캐시된 토큰 지우기 - iOS에서 중요).
인증을 한 번 재시도합니다(올바른 nonce로 새로운 토큰 생성을 강제합니다).
재시도도 실패하면 오류를 반환합니다.

4. Supabase 로그인

마지막으로 검증된 토큰이 Supabase로 전송됩니다.

const { data, error } = await supabase.auth.signInWithIdToken({
  provider: 'google',
  token: googleResponse.idToken,
  nonce: rawNonce, // Pass the raw (unhashed) nonce
});

전체 코드 참조

전체 구현은 다음을 포함하는 예제 앱의 supabaseAuthUtils.ts 파일에서 사용할 수 있습니다.

getUrlSafeNonce() - URL 안전 임의 논스를 생성합니다.
sha256Hash() - SHA-256을 사용하여 문자열을 해시합니다.
getNonce() - nonce 쌍을 생성합니다.
decodeJWT() - JWT 토큰을 디코딩합니다.
validateJWTToken() - JWT 대상 및 nonce를 검증합니다.
authenticateWithGoogleSupabase() - 자동 재시도를 통한 기본 인증 기능

추가 예제 파일

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

다음 단계

대상 플랫폼에 대한 플랫폼별 설정 가이드를 진행하세요.