Supabase Google Login on Web

GitHub

インストール

導入

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

その Google Login Webの設定
その Supabase Google Login - 一般設定.

実装

完全な実装は例のアプリケーション 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 上で、 MUST リダイレクトが発生したときに、プラグインから任意の関数を呼び出す必要があります。プラグインを初期化して、リダイレクトを処理し、ポップアップウィンドウを閉じることができます。どちらかを呼び出すことができます。 isLoggedIn() または 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 」の詳細な例を参照してください。

それがどうやって動くか

詳細な認証フローについての説明は、非接続ノンス生成、JWT検証、Supabaseサインインを含む General Setupガイドの「How It Works」セクション.

完全なcodeリファレンスについては、 General Setupガイドの「Complete Code Reference」セクション.

も参照してください

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

重要な注意

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

Web上でGoogleログインを使用する場合、 MUST リダイレクトが発生したときにプラグインから任意の関数を呼び出す必要があります。プラグインを初期化してリダイレクトを処理し、ポップアップウィンドウを閉じることができます。どちらかを呼び出すと、リダイレクトハンドリングがトリガーされます。 isLoggedIn() OR initialize() - 両方を呼び出すと、リダイレクトハンドリングがトリガーされます。

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

Nonceハンドリング

Nonceの実装はReact Native Google Sign Inドキュメントのパターンに従っています Capacitorのドキュメント:

rawNonce Capgoのドキュメント signInWithIdToken()
SupabaseはGoogle Sign-InのIDトークンから得られる rawNonce をハッシュ化し、 nonceDigest と比較します。
nonceDigest はGoogle Sign-In APIの nonce パラメータに送られます。

自動リトライ

自動リトライロジックが含まれる実装:

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

トラブルシューティング

認証が失敗した場合:

リダイレクトが機能しない: 以下の例を参照してください isLoggedIn() 無効な受信者
: Google Cloud Console と Supabase で Google Client ID が一致していることを確認してください承認されたリダイレクト URL
: Google Cloud Console と Supabase で承認されたリダイレクト URL が設定されていることを確認してくださいnonce の不一致
: コンソールログを確認してください - 関数は自動的に再試行しますが、必要に応じて手動でログアウトしてくださいトークン検証が失敗
Token validation fails: Supabaseを使用していることを確認してください mode: 'online' initialize呼び出しでidTokenを取得するために
Review the 例としてはcode 参考として

Supabase Google Login on Webを使用して認証とアカウントフローの計画をし、接続する Using @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login Using @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login for the native capability in Using @capgo/capacitor-social-login for the native capability in Using @capgo/capacitor-social-login @capgo/capacitor-social-login Capgoの実装詳細については@capgo/capacitor-social-loginを参照してください。 @capgo/capacitor-passkey Capgoの実装詳細については@capgo/capacitor-passkeyを参照してください。 @capgo/capacitor-native-biometric Capgoの実装詳細については@capgo/capacitor-native-biometricを参照してください。 2要素認証 2要素認証の実装詳細については、2要素認証を参照してください。