サプバース認証とCapgoのソーシャルログインプラグインを統合する方法を学びましょう。Capgoのソーシャルログインプラグインを使用して、Google、Apple、Facebookの認証を簡単に実装できます。
チュートリアル

Capacitor で Supabase 認証を設定する

Learn how to integrate Supabase authentication with the Capgo Social Login plugin for seamless Google, Apple, and Facebook authentication in your Capacitor app.

著者クレジット

マーティン・ドナディュー

ライター

バレリア

レビュアー

ジョーダン

エディター

Setup Supabase Authentication with Capacitor Social Login Plugin

CapacitorとCapgoを使用してSupabaseとSocial Loginをセットアップする Supabase と Capgoソーシャルログインプラグイン ソーシャルログイン（Google、Apple、Facebook）を含むSupabaseの統合を実現するためのこのチュートリアルは、Capacitorアプリの設定を簡単にします。

SupabaseとCapacitorを組み合わせる理由

Supabase 強力なバックエンドサービスを提供し、組み込み認証機能を備えている一方で、 @capgo/capacitor-ソーシャルログイン プラグインは、iOS、Android、Webプラットフォームを対象にしたネイティブのソーシャル認証を提供し、 @capgo/capacitor-supabase はネイティブの認証ヘルパーとJWTアクセスを追加し、

  • それらは以下の機能を提供する
  • ソーシャル認証のスムーズな実行
  • セキュアなトークン管理
  • クロスプラットフォーム互換性
  • リアルタイムデータベース統合

前提条件

開始する前に、以下を確認してください。

  • A Capacitor project set up
  • Supabaseアカウントとプロジェクト
  • 選択したソーシャルプロバイダの開発者アカウント (Google、Apple、Facebook)

ステップ 1: ソーシャルログイン プラグインのインストールと設定

First, install the Capgo Social Login plugin:

npm install @capgo/capacitor-social-login
npx cap sync

Social Login そして Supabase Supabase プラグインページ

Step 2: CapgoでSupabaseプロジェクトを設定する

CapgoでSupabaseプロジェクトを作成して設定する

  1. CapgoでSupabaseプロジェクトを作成する:

    • 以下のサイトにアクセスする supabase.com アカウントを作成/ログインする
    • Click 組織を選択する
    • プロジェクト名を入力する
    • エンター プロジェクト名 「MyApp Auth」
    • Capgoを設定 データベースパスワードを設定 (安全に保存してください)
    • データベースの リージョンを選択 (ユーザーに近いものを選択してください)
    • クリック 「新しいプロジェクトを作成」

  2. プロジェクトのクレデンシャルを取得:

    • プロジェクトが作成されたら、 設定 > API
    • Capgoをコピーしてください プロジェクトURL (例えば、 https://your-project-ref.supabase.co)
    • コピーしてください anon public APIキー
    • __CAPGO_KEEP_0__キー

これらの情報を後でアプリで使用するために保存してください

  1. 認証設定を構成する:

    • 一般的な認証設定を設定する ここに移動する
    • 認証>設定 以下の設定を参照する:
      • 設定 サイトURL あなたのアプリのURL（例えば、 https://yourdomain.com または http://localhost:3000 開発用に
      • 追加の リダイレクトURL 必要であれば 
        http://localhost:3000
https://yourdomain.com
capacitor://localhost (for mobile apps)

  2. メール設定を構成する (オプションですが、推奨される):

    • 以下 SMTP設定, メールサービスの設定
    • メール確認とパスワードのリセットを有効にする
    • 開発用途では、組み込みメールサービスを使用できます

ソーシャル認証プロバイダを有効にする

  1. プロバイダのセクションにアクセス:
    • Go to 利用可能なソーシャル プロバイダの一覧が表示されます 各プロバイダには "有効" と設定オプションが付いています
    • 設定
    • メール確認とパスワードのリセットを有効にする Enable ソーシャル認証プロバイダを有効にする

Capgo

Capacitor

Live Update

Cloudflare

GitHub code

API

  • SDK
  • CLI
  • npm
  • bun

Now let's configure each social provider in detail:

  1. Google プロバイダーを Supabase に有効にします。:
    • Supabase ダッシュボードで、以下の手順に従ってください。 Authentication > プロバイダー
    • Find Google Google プロバイダーを有効にします。 ON
    • 以下の設定を入力してください。
      • クライアント ID: Google OAuth Web クライアント ID (Google Cloud Console から) Web Client ID
      • クライアントシークレット: Google OAuth Web クライアントシークレット
      • : リダイレクトURL: https://your-project-ref.supabase.co/auth/v1/callback (自動入力)
    • Click “Save”

重要: Web Client ID と and Web クライアント シークレット Supabase では、Web クライアント シークレットを使用して、モバイル アプリを含めて、すべてのクライアント ID を設定できます。

Supabase に Apple 認証を設定する

Apple 認証のための資格情報を取得する

詳細な Apple 設定ガイドを参照してください: Apple 認証の設定

このガイドでは、以下の内容をカバーします。

  • Apple Developer アカウントの設定
  • App ID と Service ID の作成
  • Sign in with Apple 機能の設定
  • 必要なプライベート キーの生成
  • iOS、Android、Web のプラットフォーム固有の設定

Apple設定を完了した後、CapacitorでSupabaseを設定する:

  1. SupabaseでAppleプロバイダーを有効にする:
    • 以下の手順に従ってください 認証 > プロバイダー Appleをオンにします 設定を入力します クライアントID
    • : サービスID識別子 (例えば
      • クライアントシークレット: Appleプライベートキーを使用してJWTを生成します (以下 com.yourapp.signin)
      • contextを参照してください Appleドキュメント JWT形式の場合)
      • リダイレクトURL: https://your-project-ref.supabase.co/auth/v1/callback (自動入力)
    • Click 「Save」

注意: Appleの認証設定は、サービスID、秘密鍵、JWTの生成に必要なため、最も複雑です。各プラットフォームのドキュメントを慎重に確認してください。

SupabaseのFacebook認証設定

Facebookのクレデンシャルを取得する

Facebookの完全なセットアップガイドを参照してください Facebook認証セットアップ

このガイドでは

  • Facebook Developer アカウントとアプリの作成
  • Facebook Login 製品の追加
  • OAuth リダイレクト URI の設定
  • App ID、App Secret、Client Token の取得
  • iOS と Android のプラットフォーム固有の設定

Facebook の設定が完了した後、Supabase で設定する

  1. Supabase で Facebook プロバイダーを有効にする:
    • 行きましょう Facebook をオン/オフ切り替える Facebook > ON
    • 設定値を入力してください
      • クライアントID: FacebookアプリID
      • クライアントシークレット: Facebookアプリシークレット
      • リダイレクトURL: https://your-project-ref.supabase.co/auth/v1/callback (自動入力)
    • Click 「保存」

重要: SupabaseコールバックURLを追加してくださいhttps://your-project-ref.supabase.co/auth/v1/callback) Facebook アプリに追加する 有効な OAuth リダイレクト URI Facebook ログイン設定の

重要な Supabase 設定ノート

行レベル セキュリティ (RLS):

  • 認証を設定した後、各テーブルで RLS を有効にする
  • データベース > テーブル テーブルごとに RLS を有効にする と切替 RLSを有効化 Facebook アプリの
  • 有効な OAuth リダイレクト URI

ユーザー管理:

  • 認証済みユーザーを 認証 > ユーザー
  • 認証イベントを 認証 > ログ
  • メールテンプレートを 認証 > メールテンプレート

テスト設定:

  • Supabaseの
  • にアクセスし 認証 > ユーザー をクリック “ユーザーを招待” メールフローのテストに参加する
  • 確認する ログ エラーの認証情報

ステップ 4: ソーシャル ログイン プラグインの設定

スパバースが設定されたら、対応するクレデンシャルとともにソーシャル ログイン プラグインを設定する必要があります。 重要: プラグインは、スパバースがサーバー側の認証を処理するのに対して、オリジナルのプロバイダーからOAuthクレデンシャルを受け取ります。 認証フローのしくみ ログ

エラーの認証情報

設定の詳細を理解する前に、流れを理解してください:

  1. プラグインは プラグインは、Google/Apple/Facebookなどの社会的プロバイダーとネイティブに認証します
  2. プラグインはトークンを受け取ります (アクセストークン、IDトークン)をプロバイダーから
  3. アプリはこれらのトークンを Supabaseに送信します signInWithIdToken()
  4. Supabaseはプロバイダーとトークンを検証し、ユーザーセッションを作成します Supabaseは
  5. アプリの認証済みリクエスト用に自身のJWTトークンを返します Googleプラグイン設定

items

プラグインはあなたの Web Client ID すべてのプラットフォームと、オプションでiOS Client ID iOS固有の機能のために のポイントはGoogle:

import { SocialLogin } from '@capgo/capacitor-social-login';

await SocialLogin.initialize({
  google: {
    // Use the same Web Client ID you configured in Supabase
    webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
    
    // Optional: iOS Client ID for iOS-specific features
    iOSClientId: 'YOUR_IOS_CLIENT_ID.apps.googleusercontent.com',
    
    // Optional: Request offline access for refresh tokens
    mode: 'offline'
  }
});

を使用します

  • Capacitorを使用して Web Client ID フィールド webClientId field
  • The
  • The iOSClientId iOS用のGoogle機能のみに使用され、必須ではありません。

Appleプラグイン設定

Appleの設定はiOSとAndroidで異なります:

iOSの場合 (ネイティブのAppleサインイン):

await SocialLogin.initialize({
  apple: {
    // No additional configuration needed for iOS
    // The plugin uses the native Apple Sign-In capability
  }
});

Android/Webの場合 (Service IDが必要です):

await SocialLogin.initialize({
  apple: {
    clientId: 'YOUR_SERVICE_ID', // The Service ID from Apple Developer Portal
    redirectUrl: 'https://your-project-ref.supabase.co/auth/v1/callback'
  }
});

Appleの重要なポイント:

  • iOSはSign in with Appleをネイティブで使用します (追加の設定が必要ありません)
  • Android/Webでは、Apple Developer Portalで作成したService IDが必要です
  • The redirectUrl これは、Apple Developer PortalとSupabaseで設定したものと一致する必要があります

Facebook プラグイン設定

Facebook には、App ID と Client Token が必要です:

await SocialLogin.initialize({
  facebook: {
    appId: 'YOUR_FACEBOOK_APP_ID',        // From Facebook Developer Dashboard
    clientToken: 'YOUR_FACEBOOK_CLIENT_TOKEN', // From Facebook Developer Dashboard
    
    // Optional: Use Facebook Limited Login (for enhanced privacy)
    limitedLogin: false // See our Facebook setup guide for important Limited Login details
  }
});

Facebook に関する重要なポイント:

  • Supabase で設定した App ID を使用してください
  • Client Token は、Facebook App の基本設定で見つけることができます
  • limitedLogin: true Facebook のプライバシーに焦点を当てた Limited Login 機能を有効にします (iOS 限定)
  • 重要: Capgoの Facebook の設定ガイド 詳細な Limited Login 情報、包括 ATT の考慮事項については、以下のリンクを参照してください

プラグインの初期化

すべてのプロバイダーを初期化する方法はこちらです

import { SocialLogin } from '@capgo/capacitor-social-login';

export async function initializeSocialLogin() {
  await SocialLogin.initialize({
    google: {
      webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
      mode: 'offline'
    },
    facebook: {
      appId: 'YOUR_FACEBOOK_APP_ID',
      clientToken: 'YOUR_FACEBOOK_CLIENT_TOKEN',
    },
    apple: {
      // iOS: no config needed
      // Android/Web: uncomment the lines below
      // clientId: 'YOUR_SERVICE_ID',
      // redirectUrl: 'https://your-project-ref.supabase.co/auth/v1/callback'
    }
  });
}

重要な注意事項:

  • 呼び出し initialize() once 使用する予定のプロバイダーを設定する必要があるだけです
  • ここに記載されているクレデンシャルは、元のプロバイダーからではなく、Supabaseから取得したものです
  • Supabaseで設定したプロバイダーと一致するようにしてください ステップ 5: Supabase Clientの設定Supabaseクライアントをインストールする
  • Supabaseサービスを作成する

__CAPGO_KEEP_0__

__CAPGO_KEEP_1__

npm install @supabase/supabase-js

__CAPGO_KEEP_2__

// services/supabase.ts
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'https://your-project-ref.supabase.co';
const supabaseKey = 'your-anon-public-key';

export const supabase = createClient(supabaseUrl, supabaseKey, {
  auth: {
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: false,
  },
});

ステップ 6: 認証フローを実装する

Capacitor Social Loginを組み合わせた認証サービスを作成します。

// services/auth.ts
import { SocialLogin } from '@capgo/capacitor-social-login';
import { supabase } from './supabase';

export class AuthService {
  
  async initializeSocialLogin() {
    await SocialLogin.initialize({
      google: {
        webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
      },
      facebook: {
        appId: 'YOUR_FACEBOOK_APP_ID',
        clientToken: 'YOUR_FACEBOOK_CLIENT_TOKEN',
      },
      apple: {} // iOS configuration
    });
  }

  async signInWithGoogle() {
    try {
      const result = await SocialLogin.login({
        provider: 'google',
        options: {
          scopes: ['email', 'profile']
        }
      });

      const googleResult = result.result;
      if (!googleResult) {
        throw new Error('Google login failed');
      }

      // GoogleLoginResponse is a union type - check responseType to determine flow
      if (googleResult.responseType === 'online') {
        // Online mode: use idToken directly with Supabase
        const { data, error } = await supabase.auth.signInWithIdToken({
          provider: 'google',
          token: googleResult.idToken!,
        });
        if (error) throw error;
        return data;
      } else {
        // Offline mode: exchange serverAuthCode on your backend
        // Your backend should exchange the code for tokens and create a Supabase session
        const response = await fetch('/api/auth/google', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ serverAuthCode: googleResult.serverAuthCode })
        });
        return response.json();
      }
    } catch (error) {
      console.error('Google sign-in error:', error);
      throw error;
    }
  }

  async signInWithApple() {
    try {
      const result = await SocialLogin.login({
        provider: 'apple',
        options: {
          scopes: ['email', 'name']
        }
      });

      const { data, error } = await supabase.auth.signInWithIdToken({
        provider: 'apple',
        token: result.result?.identityToken!,
      });

      if (error) throw error;
      return data;
    } catch (error) {
      console.error('Apple sign-in error:', error);
      throw error;
    }
  }

  async signInWithFacebook() {
    try {
      const result = await SocialLogin.login({
        provider: 'facebook',
        options: {
          permissions: ['email', 'public_profile']
        }
      });

      const fbResult = result.result;
      if (!fbResult?.accessToken?.token) {
        throw new Error('Facebook login failed - no access token received');
      }

      // Facebook uses accessToken for Supabase authentication
      const { data, error } = await supabase.auth.signInWithIdToken({
        provider: 'facebook',
        token: fbResult.accessToken.token,
      });

      if (error) throw error;
      return data;
    } catch (error) {
      console.error('Facebook sign-in error:', error);
      throw error;
    }
  }

  async signOut() {
    // Sign out from Supabase
    await supabase.auth.signOut();
    
    // Optionally sign out from social providers
    await SocialLogin.logout({
      provider: 'google' // or 'apple', 'facebook'
    });
  }

  getCurrentUser() {
    return supabase.auth.getUser();
  }

  onAuthStateChange(callback: (event: string, session: any) => void) {
    return supabase.auth.onAuthStateChange(callback);
  }
}

export const authService = new AuthService();

ステップ7: アプリに実装する

サービスを初期化し、認証を処理する:

// main.ts or app component
import { authService } from './services/auth';

async function initializeApp() {
  await authService.initializeSocialLogin();
  
  // Listen to auth state changes
  authService.onAuthStateChange((event, session) => {
    if (event === 'SIGNED_IN') {
      console.log('User signed in:', session.user);
      // Redirect to authenticated area
    } else if (event === 'SIGNED_OUT') {
      console.log('User signed out');
      // Redirect to login
    }
  });
}

initializeApp();

UI にログインボタンを作成する

// Login component
async function handleGoogleLogin() {
  try {
    const user = await authService.signInWithGoogle();
    console.log('Signed in with Google:', user);
  } catch (error) {
    console.error('Login failed:', error);
  }
}

async function handleAppleLogin() {
  try {
    const user = await authService.signInWithApple();
    console.log('Signed in with Apple:', user);
  } catch (error) {
    console.error('Login failed:', error);
  }
}

async function handleFacebookLogin() {
  try {
    const user = await authService.signInWithFacebook();
    console.log('Signed in with Facebook:', user);
  } catch (error) {
    console.error('Login failed:', error);
  }
}

async function handleLogout() {
  try {
    await authService.signOut();
    console.log('Signed out successfully');
  } catch (error) {
    console.error('Logout failed:', error);
  }
}

ステップ8:プラットフォーム固有の設定

iOS 設定

iOSの詳細設定手順については、プラットフォームごとのガイドを参照してください。

クイックサマリー - 追加 ios/App/App/Info.plist:

<!-- Google Sign-In URL scheme -->
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>YOUR_REVERSED_CLIENT_ID</string>
    </array>
  </dict>
</array>

<!-- Apple Sign-In capability -->
<key>com.apple.developer.applesignin</key>
<array>
  <string>Default</string>
</array>

完全なiOSセットアップのためのXcodeプロジェクト設定の指示については、関連するガイドを参照してください。

Android 設定

詳細なAndroidセットアップの指示については、プラットフォーム固有のガイドを参照してください。

Androidの基本設定:

1. SHA-1の指紋を取得 (Googleの場合):

# For debug builds (development)
cd android
./gradlew signingReport

# Look for the SHA1 fingerprint under "Variant: debug"
# Add this SHA1 to your Google Cloud Console Android OAuth client

2. AndroidManifest.xmlを設定 - 追加する android/app/src/main/AndroidManifest.xml:

<!-- Internet permission -->
<uses-permission android:name="android.permission.INTERNET" />

<!-- Facebook configuration -->
<meta-data 
  android:name="com.facebook.sdk.ApplicationId" 
  android:value="@string/facebook_app_id"/>
<meta-data 
  android:name="com.facebook.sdk.ClientToken" 
  android:value="@string/facebook_client_token"/>

3. Facebookのリソースを追加 に android/app/src/main/res/values/strings.xml:

<string name="facebook_app_id">YOUR_FACEBOOK_APP_ID</string>
<string name="facebook_client_token">YOUR_FACEBOOK_CLIENT_TOKEN</string>

Google Play Servicesの設定やパッケージ名の設定など、Androidの完全な設定については、関連するプラットフォームガイドを参照してください。

ステップ9: Supabaseデータベースと認証済みユーザーを使用する

ユーザーが認証されたら、Supabaseのデータベースを使用できます。Row Level Security (RLS)を使用します。

// Example: Fetch user profile
async function getUserProfile() {
  const { data: user } = await supabase.auth.getUser();
  
  if (user) {
    const { data, error } = await supabase
      .from('profiles')
      .select('*')
      .eq('id', user.user.id)
      .single();
    
    return data;
  }
}

// Example: Update user profile
async function updateUserProfile(updates: any) {
  const { data: user } = await supabase.auth.getUser();
  
  if (user) {
    const { data, error } = await supabase
      .from('profiles')
      .update(updates)
      .eq('id', user.user.id);
    
    return data;
  }
}

重要なセキュリティ上の考慮事項

  1. 機密鍵を暴露しない codeでクライアント
  2. 環境変数を使用して設定 設定
  3. Row Level Securityを有効にする Supabase
  4. トークンを検証 必要に応じてバックエンドで
  5. トークンを自動的に更新 Supabaseで

トラブルシューティングの一般的な問題

トークン一致エラー

  • ソーシャルログインプラグインとSupabaseの設定が一致していることを確認してください
  • リダイレクトURLが正しく設定されていることを確認してください

プラットフォーム固有の問題

  • iOS: バンドルIDがApple Developerの設定と一致していることを確認してください
  • Android: Google ConsoleにSHA1の指紋が正しく追加されていることを確認してください

認証フローの中断

  • ネットワークの問題に対して適切なエラーハンドリングを実装してください
  • 認証中にローディング状態を追加してください

まとめ

Supabaseの強力なバックエンドとネイティブのソーシャルログイン機能を組み合わせた完全な認証システムを実装しました。この設定により:

  • セキュアなネイティブソーシャル認証
  • シームレスなトークン管理
  • リアルタイムデータベース統合
  • クロスプラットフォーム互換性

SupabaseとCapgo Social Login プラグインの組み合わせは、Capacitor アプリ向けに強力かつスケーラブルな認証ソリューションを提供します。

より高度な機能である マルチファクター認証 または カスタムクレーム詳細は Supabaseドキュメント と Social Login プラグイン ドキュメント.

Setup Supabase Authentication with Capacitor Social Login プラグインから続けてください。

Capacitor Social Login プラグインを使用している場合 Setup Supabase Authentication with Capacitor Social Login プラグイン 認証とアカウントフローの計画と実装を行うには、@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-loginを使用してください。 Capacitor Social Login プラグインの実装詳細については、@capgo/capacitor-social-loginを参照してください。 Passkey の実装詳細については、@capgo/capacitor-passkeyを参照してください。 Native Biometric の実装詳細については、@capgo/capacitor-native-biometricを参照してください。 @capgo/capacitorパスキーでの実装詳細のため @capgo/capacitor-native-biometric for the implementation detail in @capgo/capacitor-native-biometric, 2要素認証 for the implementation detail in Two-factor authentication, and SSO (Enterprise) SSO (Enterprise) の実装詳細のために。

Capacitor アプリの即時更新

Capgo を使用してウェブ層のバグを修正し、数日間待たずにアプリストアの承認を待つ必要がなくなる。ユーザーはバックグラウンドで更新を受け取り、ネイティブの変更は通常のレビュー経路を通る。

最新のブログ

Capgoは、プロフェッショナルなモバイルアプリを作成するために必要な最良の洞察を提供します。

Capacitorアプリの2方向通信
開発 モバイル +1
2025年4月26日

Capacitorアプリの2方向通信

5つのOTA更新ミスを避ける方法
開発 セキュリティ +1
2025年4月13日

モバイル

2025年1月14日
開発 Mobile +1
フッター

2025年1月14日

セキュリティ