Supabase Google Login - Setup Umum

Pendahuluan

Panduan ini akan memandu Anda mengintegrasikan Google Sign-In dengan Supabase Authentication menggunakan plugin Capacitor Social Login. Setup ini memungkinkan Anda menggunakan native Google Sign-In di platform mobile sambil memanfaatkan Supabase Auth untuk autentikasi backend.

Prerequisites

Sebelum memulai, pastikan Anda sudah:

1. Membuat proyek Supabase

2. Membaca Setup Umum Google Login panduan untuk setup kredensial Google OAuth

3. Mengikuti panduan spesifik platform untuk setup kredensial Google OAuth pada platform target Anda:

   • Setup Android
   • Setup iOS
   • Setup Web

   Catatan

   Sebelum memulai tutorial Supabase, Anda perlu membuat client ID untuk platform yang akan digunakan. ID ini akan digunakan pada langkah 7 di panduan ini.

Mengaktifkan provider Google OAuth di Supabase

1. Buka Dashboard Supabase

2. Klik proyek Anda

   

3. Lalu buka Authentication menu

   

4. Klik pada Providers tab

   

5. Temukan Google provider

   

6. Aktifkan provider

   

7. Tambahkan client ID untuk platform yang akan digunakan

   

   Catatan

   Ini mencakup web client ID, iOS client ID, dan Android client ID. Anda bisa melewati beberapa di antaranya, tergantung platform yang akan digunakan.

8. Klik pada Save tombol

   

Catatan

Anda TIDAK SEHARUSNYA setup Client Secret (for OAuth) atau Callback URL (for OAuth). Beberapa sumber mungkin menyarankan untuk mengatur Skip nonce checks untuk Google di iOS, tapi dengan panduan ini hal itu tidak diperlukan.

Selesai, Anda sekarang telah mengaktifkan Google Sign-In dengan Supabase Authentication 🎉

Cara Kerja Helper Google Sign-In dengan Supabase Authentication

Bagian ini menjelaskan cara kerja integrasi Google Sign-In dengan Supabase di balik layar. Memahami alur ini akan membantu Anda mengimplementasikan dan melakukan troubleshooting pada proses autentikasi.

Implementasi Lengkap

Implementasi lengkapnya tersedia di aplikasi contoh supabaseAuthUtils.ts file.

1. Pembuatan Nonce

Implementasi ini menghasilkan pasangan nonce yang aman sesuai dengan persyaratan nonce Supabase:

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

Alur:

• rawNonce: String acak URL-safe (64 karakter hex)
• nonceDigest: Hash SHA-256 dari rawNonce (hex-encoded)
• nonceDigest dikirim ke Google Sign-In → Google menyertakan digest nonce dalam ID token
• rawNonce dikirim ke Supabase → Supabase melakukan hash pada nonce mentah dan membandingkannya dengan nonce token

2. Google Sign-In

Fungsi ini menginisialisasi plugin dan melakukan sign-in dengan 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. Validasi JWT

Sebelum mengirim token ke Supabase, implementasi akan memvalidasi token 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 };
}

Mengapa perlu validasi sebelum ke Supabase?

Memvalidasi token JWT sebelum dikirim ke Supabase memiliki beberapa tujuan penting:

1. Mencegah Request Tidak Valid: Jika token memiliki audience yang salah atau nonce tidak cocok, Supabase akan tetap menolak token tersebut. Validasi di awal menghindari API yang tidak perlu dan memberikan pesan error yang lebih jelas.

2. Masalah Token Caching: Pada beberapa platform (terutama iOS), SDK Google Sign-In dapat menyimpan cache token demi performa. Saat token dari cache dikembalikan, token tersebut mungkin dibuat dengan nonce yang berbeda (atau tanpa nonce), sehingga Supabase menolak token dengan error “nonce mismatch”. Dengan validasi sebelum dikirim ke Supabase, kita bisa mendeteksi masalah ini lebih awal dan otomatis mencoba lagi dengan token baru.

3. Keamanan (iOS): Pada iOS, validasi memastikan token diterbitkan untuk Google Client ID spesifik Anda, guna mencegah masalah keamanan dari penggunaan token yang ditujukan untuk aplikasi lain.

4. Error Handling yang Lebih Baik: Mendeteksi masalah sebelum ke Supabase memungkinkan adanya logika retry otomatis, yang sangat penting untuk menangani masalah caching di iOS secara transparan.

Jika validasi gagal, fungsi akan otomatis:

1. Logout dari Google (menghapus token cache - krusial di iOS)
2. Mencoba autentikasi ulang sekali (memaksa pembuatan token baru dengan nonce yang benar)
3. Jika retry juga gagal, akan mengembalikan error

4. Login Supabase

Terakhir, token yang sudah divalidasi dikirim ke Supabase:

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

Referensi Lengkap Code

Implementasi lengkapnya tersedia di aplikasi contoh supabaseAuthUtils.ts file, yang mencakup:

• getUrlSafeNonce() - Membuat nonce acak yang URL-safe
• sha256Hash() - Melakukan hashing string dengan SHA-256
• getNonce() - Membuat pasangan nonce
• decodeJWT() - Mendecode JWT token
• validateJWTToken() - Memvalidasi JWT audience dan nonce
• authenticateWithGoogleSupabase() - Fungsi autentikasi utama dengan retry otomatis

File Contoh Tambahan

• SupabasePage.tsx - Contoh komponen dengan penanganan redirect (Web)
• SupabaseCreateAccountPage.tsx - Contoh halaman buat akun

Next Steps

Silakan lanjut ke panduan setup spesifik platform untuk target platform Anda:

• Setup Android
• Setup iOS
• Setup Web

Lanjutkan dari Supabase Google Login - General Setup

Jika Anda menggunakan Supabase Google Login - Setup Umum untuk merencanakan alur autentikasi dan akun, hubungkan dengan Menggunakan @capgo/capacitor-social-login untuk kapabilitas native di Menggunakan @capgo/capacitor-social-login, @capgo/capacitor-social-login untuk detail implementasi di @capgo/capacitor-social-login, @capgo/capacitor-passkey untuk detail implementasi di @capgo/capacitor-passkey, @capgo/capacitor-native-biometric untuk detail implementasi di @capgo/capacitor-native-biometric, dan Autentikasi dua faktor untuk detail implementasi di autentikasi dua faktor.