WebでのSupabase Googleログイン

インストール手順と、このプラグインの完全なMarkdownガイドを含むセットアッププロンプトをコピーします。

はじめに

このガイドでは、Web環境でGoogle Sign-InをSupabase Authenticationに統合する方法を解説します。以下の手順は完了しているものとします：

実装方法

完全な実装内容は、サンプルアプリの supabaseAuthUtils.ts ファイルで確認できます。このガイドでは、主要な概念とその使用方法について説明します。

Authentication Helperの使用

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

重要：リダイレクトの処理について

WebでGoogleログインを使用する場合、必ずリダイレクトが発生した際に、プラグインを初期化するためにプラグインの関数を呼び出す必要があります。これにより、リダイレクトの処理とポップアップウィンドウのクローズが可能になります。以下のいずれかを呼び出してください： 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 完全な実装例はこちらです。

仕組み

nonceの生成、JWTの検証、Supabaseへのサインインを含む認証フローの詳細については、 General Setupガイドの「仕組み」セクションを参照してください.

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

あわせてこちらも参照：

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

重要な注意事項

リダイレクトの処理

WebでGoogleログインを使用する場合、必ずリダイレクト発生時にプラグインの関数を呼び出して初期化を行う必要があります。これにより、プラグインがリダイレクトを処理し、ポップアップウィンドウを閉じることができます。以下のいずれかを呼び出してください： isLoggedIn() または initialize() - いずれもリダイレクト処理をトリガーします。

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

Nonceの処理

Nonceの実装は、以下のパターンの通りです： React Native Google Sign Inのドキュメント:

rawNonce Supabaseの〜へ送られます signInWithIdToken()
Supabaseは〜をハッシュ化し、 rawNonce それを〜と比較します nonceDigest これはGoogle Sign-InのIDトークンに含まれる
nonceDigest (SHA-256ハッシュ、16進数エンコード) が〜へ送られます nonce Google Sign-In APIの parameter

自動リトライ

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

初回試行でJWT検証に失敗した場合、ログアウトして1回リトライします
これにより、キャッシュされたトークンのnonceが正しくないケースに対応します
リトライも失敗した場合は、エラーが返されます

トラブルシューティング

認証に失敗する場合：

リダイレクトが機能しない: 以下を呼び出しているか確認してください isLoggedIn() コンポーネントのマウント時（上記の例を参照）
audienceが不正です: Google Cloud ConsoleとSupabaseの両方で、Google Client IDが一致しているか確認してください
承認済みのリダイレクトURL: 承認済みのリダイレクトURLが、Google Cloud ConsoleとSupabaseの両方で設定されているか確認してください
Nonceの不一致: コンソールログを確認してください。関数は自動的にリトライしますが、必要に応じて手動でログアウトしてから再度試行してください
トークンの検証に失敗しました: idTokenを取得するために、initializeの呼び出し時に mode: 'online' を使用しているか確認してください
こちらのサンプルアプリ code を参考にしてください

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