Supabase Google 로그인 - 일반 설정

소개

이 가이드는 Supabase 인증을 사용하는 Capacitor Social Login 플러그인을 사용하여 Google Sign-In과 통합하는 방법을 안내합니다. 이 설정은 모바일 플랫폼에서 네이티브 Google Sign-In을 사용하면서 백엔드 인증을 Supabase Auth로 사용할 수 있도록 합니다.

준비 사항

시작하기 전에 다음을 확인하세요:

1. Supabase 프로젝트를 생성했습니다.

2. Google Login 일반 설정 Google OAuth 인증서를 설정하는 가이드 목적 플랫폼에 맞는 플랫폼별 가이드를 따라서 Google OAuth 인증서를 설정하세요:

3. 설정한 플랫폼에 맞는 플랫폼별 가이드를 따라서 Google OAuth 인증서를 설정하세요:

   • 안드로이드 설정
   • iOS 설정
   • 웹 설정

   주의

   Supabase 튜토리얼을 시작하기 전에, 사용할 플랫폼에 대한 클라이언트 ID를 생성해야 합니다. 이 가이드의 7단계에서 사용하겠습니다.

구글 OAuth 제공자 활성화

1. Supabase로 이동하세요 프로젝트 클릭

2. 프로젝트 선택기

   

3. Google에 로그인하기 Authentication 메뉴

   

4. 클릭 Providers 탭

   

5. 찾아보기 Google 제공자

   

6. 활성화

   

7. Google 플랫폼의 클라이언트 ID를 추가하세요

   

   참고

   이것은 웹 클라이언트 ID, iOS 클라이언트 ID 및 Android 클라이언트 ID를 포함합니다. 사용할 플랫폼에 따라 일부를 생략할 수 있습니다.

8. 클릭하여 Save 버튼

   

참고

당신은 하지 않아도 설정하지 않아도 Client Secret (for OAuth) 또는 Callback URL (for OAuth)이 가이드를 따라야 하는 경우 iOS에서 Google에 대해 설정하는 것이 필요하지 않습니다. Skip nonce checks Voilà, Supabase 인증과 함께 Google Sign-In을 이제 활성화했습니다 🎉

Google Sign-In과 Supabase 인증 Helper가 어떻게 작동하는지

Google Sign-In과 Supabase 인증 Helper가 어떻게 작동하는지

완전한 Implementation

완전한 Implementation은

예시 앱의 파일에서 supabaseAuthUtils.ts Google Sign-In과 Supabase 인증 Helper가 어떻게 작동하는지

1. Nonce Generation

구현은 Supabase nonce 요구 사항을 따르는 안전한 nonce pair를 생성합니다. Supabase 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 };
}

Flow:

• rawNonce: URL-safe random string (64 hex characters)
• nonceDigest: SHA-256 해시의 rawNonce (16진수 인코딩)
• nonceDigest Google Sign-In으로 전달 → Google은 ID 토큰에 nonce digest를 포함합니다.
• rawNonce Supabase로 전달 → Supabase는 raw nonce의 해시와 토큰의 nonce를 비교합니다.

2. Google Sign-In

기능은 플러그인을 초기화하고 구글로 로그인합니다:

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 전에 유효성 검사를 하나요?

JWT 토큰을 유효성 검사하기 전에 Supabase로 토큰을 전송하기 전에 유효성 검사를 하는 것은 여러 가지 중요한 목적을 위해 수행됩니다:

1. 잘못된 요청 방지: 토큰이 잘못된 청중 또는 nonce 일치 오류가 있는 경우 Supabase는 토큰을 거부하더라도 유효성 검사를 먼저 하는 것은 불필요한 API 호출을 피하고 더 명확한 오류 메시지를 제공합니다.

2. 토큰 캐싱 문제: iOS에서 Google Sign-In SDK은 성능을 위해 토큰을 캐싱할 수 있습니다. 캐시된 토큰이 반환될 때, 캐시된 토큰은 다른 nonce (또는 nonce가 없는 경우)로 생성되었을 수 있습니다. 이로 인해 Supabase는 nonce가 일치하지 않는 오류를 반환합니다. Supabase로 전송하기 전에 토큰을 검증하면 이 문제를 일찍 감지하고 자동으로 새 토큰으로 다시 시도할 수 있습니다.

3. 보안 iOS): iOS에서, 검증은 토큰이 특정 Google Client IDs에 발급된 것을 확인하여, 다른 애플리케이션의 토큰을 사용하여 잠재적인 보안 문제를 방지합니다.

4. 더 나은 오류 처리: Supabase로 전송하기 전에 토큰을 검증하면, iOS 캐싱 문제를 투명하게 처리하기 위한 자동 다시 시도 로직이 필수적입니다.

검증이 실패하면 함수는 자동으로:

1. Google에서 로그아웃 (iOS에서 캐시된 토큰을 삭제 - 중요)
2. 인증을 다시 시도 (새 토큰 생성을 강제하고 올바른 nonce를 사용)
3. 다시 시도도 실패하면 오류를 반환

4. Supabase 로그인

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

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

완전한 Code 참조

__CAPGO_KEEP_0__ 참조의 완전한 implementation은 예시 앱의 파일에 있습니다. supabaseAuthUtils.ts 예시 앱의

• getUrlSafeNonce() 파일에 포함되어 있습니다.
• sha256Hash() - URL-safe random nonce을 생성합니다.
• getNonce() - SHA-256로 문자열을 해시합니다.
• decodeJWT() - nonce pair을 생성합니다.
• validateJWTToken() - JWT 토큰을 해독합니다.
• authenticateWithGoogleSupabase() - JWT 토큰의 audience와 nonce을 검증합니다.

추가 예제 파일

• SupabasePage.tsx - 웹에서 리다이렉트 처리를 하는 예제 컴포넌트
• SupabaseCreateAccountPage.tsx - 계정 생성 페이지 예제

다음 단계

안드로이드 설정

• iOS 설정
• 웹 설정
• 다음 단계

Supabase Google 로그인 - 일반 설정에서 계속

Supabase Google 로그인 - 일반 설정을 사용 중이라면 Supabase Google 로그인 - 일반 설정 인증 및 계정 흐름을 계획하고 Supabase Google 로그인 - 일반 설정을 연결하려면 Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login @capgo/capacitor-social-login @capgo/capacitor-social-login @capgo/capacitor-passkey @capgo/capacitor-passkey @capgo/capacitor-native-biometric Capgo에서 @capgo/capacitor-native-biometric 구현 세부 사항에 대해 두 단계 인증 Capgo에서 두 단계 인증 구현 세부 사항에 대해