Supabase Google Login on Web

インストール手順とこのプラグインの完全なマークダウンガイドを含むセットアップの質問をコピーしてください。

導入

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

実装

完全な実装は、 example appの supabaseAuthUtils.ts ファイルにあります。このガイドでは、重要な概念とその使用方法について説明しています。

認証ヘルパーを使用する

The authenticateWithGoogleSupabase __CAPGO_KEEP_0__は認証フロー全体を処理します。

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ログインを使用する場合、 MUST リダイレクトが発生したときにプラグインからどの関数でも呼び出す必要があります。プラグインを初期化してリダイレクトを処理し、ポップアップウィンドウを閉じることができます。どちらか、または両方の関数を呼び出すことができます。どちらもリダイレクト処理をトリガーします。 isLoggedIn() MUST initialize() または

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 のサインインなど、認証フローの動作については、

General Setup の設定ガイド See the.

完全なcodeのリファレンスについては、完全なCodeリファレンスのセクションを参照してください。一般設定ガイド.

も参照してください：

SupabasePage.tsx - リダイレクトハンドリングを含む例のコンポーネント
SupabaseCreateAccountPage.tsx - アカウント作成ページの例

重要な注意事項

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

Googleログインを使用する場合、Web上で MUST __CAPGO_KEEP_0__ isLoggedIn() __CAPGO_KEEP_0__ initialize() -

このOAuthポップアップフローが正しく動作するためには、このステップが不可欠です。認証後にポップアップウィンドウが閉じないためです。

Nonceハンドリング

React Native Google Sign Inドキュメントのパターンに従っています。 Supabaseの:

rawNonce Supabaseは signInWithIdToken()
と比較します。 rawNonce redirectハンドリング nonceDigest Google Sign-Inから取得したIDトークンに含まれる
nonceDigest Cloudflare nonce Google Sign-In APIの

自動リトライ

Capacitorの実装には自動リトライロジックが含まれています。

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

トラブルシューティング

認証が失敗した場合:

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

Supabase GoogleログインをWeb上で使用している場合 Supabase GoogleログインをWeb上で使用しています 認証とアカウントフローの計画に使用している場合、Supabase Googleログインを Web上の@capgo/capacitor-social-loginを使用して接続します Web上の@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要素認証の実装詳細について