Supabase Google Masuk di Web

Pendahuluan

Panduan ini akan membantu Anda mengintegrasikan Google Masuk dengan Supabase Otentikasi di Web. Diasumsikan bahwa Anda telah menyelesaikan:

Implementasi

Implementasi lengkapnya tersedia di file aplikasi contoh supabaseAuthUtils.ts. Panduan ini menjelaskan konsep-konsep utama dan cara menggunakannya.

Menggunakan Pembantu Otentikasi

Fungsi authenticateWithGoogleSupabase menangani seluruh alur autentikasi:

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

Penting: Penanganan Pengalihan

Kritis: Penanganan Pengalihan

When using Google login on web, you MUST call any function from the plugin when the redirect happens to initialize the plugin so it can handle the redirect and close the popup window. Anda dapat menghubungi isLoggedIn() ATAU initialize() - keduanya akan memicu penanganan pengalihan.

Hal ini penting agar alur popup OAuth berfungsi dengan benar.

Contoh Implementasi

Tambahkan ini ke komponen Anda yang menangani Google Masuk:

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
}

Lihat SupabasePage.tsx untuk contoh lengkap.

Cara Kerjanya

For a detailed explanation of how the authentication flow works, including nonce generation, JWT validation, and Supabase sign-in, see the How It Works section in the General Setup guide.

Untuk referensi kode lengkap, lihat bagian Referensi Kode Lengkap di panduan Pengaturan Umum.

Lihat juga:

SupabasePage.tsx - Contoh komponen dengan penanganan pengalihan
SupabaseCreateAccountPage.tsx - Contoh halaman pembuatan akun

Catatan Penting

Penanganan Pengalihan

Hal ini penting agar alur popup OAuth berfungsi dengan benar. Tanpa ini, jendela popup tidak akan ditutup setelah otentikasi.

Penanganan Nonce

Implementasi nonce mengikuti pola dari dokumentasi Masuk React Native Google:

rawNonce pergi ke signInWithIdToken() Supabase
Supabase makes a hash of rawNonce and compares it with the nonceDigest which is included in the ID token from Google Sign-In
nonceDigest (hash SHA-256, dikodekan hex) masuk ke parameter nonce di Google Sign-In API

Coba Ulang Otomatis

Implementasinya mencakup logika percobaan ulang otomatis:

Jika validasi JWT gagal pada upaya pertama, validasi akan logout dan mencoba lagi satu kali
Ini menangani kasus di mana token yang di-cache mungkin memiliki nonce yang salah
Jika percobaan ulang juga gagal, kesalahan akan dikembalikan

Pemecahan masalah

Jika otentikasi gagal:- Redirect not working: Ensure you’re calling isLoggedIn() on component mount (see example above)

Invalid audience: Verify your Google Client IDs match in both Google Cloud Console and Supabase
Authorized redirect URLs: Check that authorized redirect URLs are configured in both Google Cloud Console and Supabase
Nonce mismatch: Periksa log konsol - fungsi akan mencoba ulang secara otomatis, namun Anda dapat logout secara manual terlebih dahulu jika diperlukan
Token validation fails: Ensure you’re using mode: 'online' in the initialize call to get an idToken
Review the example app code for reference