Supabase Google Login on Web

導入

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

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

実装

完全な実装は、 例のアプリケーション supabaseAuthUtils.ts file. このガイドでは、主な概念とその使用方法を説明します。

Authentication Helperの使用

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

Redirect処理：重要な注意事項

Redirect処理：重要な注意事項

Googleログインを使用する場合、Web上で、 MUST プラグインから任意の機能を呼び出す必要があります。リダイレクトが発生したときに、プラグインを初期化して、リダイレクトを処理し、ポップアップウィンドウを閉じることができます。任意の機能を呼び出すことができます。 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 を参照してください。

動作原理

詳細な説明については、nonce生成、JWT検証、Supabaseサインインの流れについては、 「How It Works」セクションを参照してください。.

詳細なcodeのリファレンスについては、 「Complete Code Reference」セクションを参照してください。.

参考資料：

• SupabasePage.tsx - リダイレクトハンドリングの例
• SupabaseCreateAccountPage.tsx - アカウント作成ページの例

重要な注意事項

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

ウェブ上のGoogleログインの場合、 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. You can call either isLoggedIn() OR initialize() -

This is essential for the OAuth popup flow to work correctly. Without this, the popup window won’t close after authentication.

Nonce Handling

Nonce Handling Nonceの取り扱い:

• rawNonce The nonce implementation follows the pattern from the React Native Google Sign In documentation goes to Supabase’s 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 が設定されていることを確認するnonce の一致
• : コンソールログを確認 - 関数は自動的に再試行しますが、必要に応じて手動でログアウトすることもできますトークン検証が失敗
• __CAPGO_KEEP_0__: __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要素認証の実装詳細