Supabase Google Login on Web

導入

このガイドでは、Google Sign-InをWeb上のSupabase Authenticationと統合する方法を説明します。以下のステップをすでに完了していることを前提としています。

• の Google Login Webの設定
• の Supabase Google Login - General Setup.

実装

完全な実装は、 のアプリケーションにあります。 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 ログインを使用する場合、Web 上で、 必須 プラグインから任意の関数を呼び出す必要があります。リダイレクトが発生したときに、プラグインを初期化して、リダイレクトを処理し、ポップアップウィンドウを閉じることができます。どちらの関数でも呼び出すことができます。 isLoggedIn() OR initialize() - both will trigger the redirect handling.

OAuth ポップアップ フローが正しく動作するためには、この設定が不可欠です。

実装例

Google Sign-In を扱うコンポーネントに次のコードを追加してください。

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 で確認できます。

機能のしくみ

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.

For the complete code reference, see the Complete Code Reference section in the General Setup guide.

Also see:

• SupabasePage.tsx - Redirect handlingの例となるコンポーネント
• SupabaseCreateAccountPage.tsx - アカウント作成ページの例

重要な注意事項

リダイレクトハンドリング

ウェブ上のGoogleログインの場合、 MUST プラグインから任意の関数を呼び出す必要があります。 isLoggedIn() OR initialize() -

-

このOAuthポップアップフローが正しく動作するためには、このステップが不可欠です。

Nonceの実装は、 React Native Google Sign Inのドキュメント:

• rawNonce のパターンに従っています。 signInWithIdToken()
• Supabaseはハッシュ化し rawNonce と比較します。 nonceDigest Google Sign-InのIDトークンから取得される
• nonceDigest のハッシュ値（SHA-256ハッシュ、16進数エンコード）が nonce Google Sign-In APIの

自動リトライ

自動リトライロジックが含まれています。

• JWT検証が最初の試行で失敗した場合、ログアウトし、1度リトライします。
• キャッシュされたトークンが不正なnonceを持っている可能性があるケースを処理します。
• リトライも失敗した場合、エラーが返されます。

トラブルシューティング

認証が失敗した場合:

• リダイレクトが機能しない: 正しく呼び出していることを確認してください isLoggedIn() コンポーネントがマウントされたときに呼び出してください (上記の例を参照)
• 無効な受信者: Google Cloud Console と Supabase で Google Client ID が一致していることを確認してください
• 承認されたリダイレクト URL: Google Cloud Console と Supabase で承認されたリダイレクト URL が設定されていることを確認してください
• ノンス マッチ: コンソールログを確認してください - 関数は自動的に再試行しますが、必要に応じて手動でログアウトしてください
• トークン検証が失敗: __CAPGO_KEEP_0__の使用を確認してください。 mode: 'online' in the initialize call to get an idToken
• Review the example app code for reference

Supabase Google Login on Webから続けてください。

If you are using Supabase Google Login on Web to plan authentication and account flows, connect it with Using @capgo/capacitor-social-login for the native capability in Using @capgo/capacitor-social-login @capgo/capacitor-social-login @capgo/capacitor-social-loginの実装詳細 @capgo/capacitor-passkey @capgo/capacitor-passkeyの実装詳細 @capgo/capacitor-native-biometric @capgo/capacitor-native-biometricの実装詳細 2要素認証 2要素認証の実装詳細