メインコンテンツにジャンプ
Capgoロゴ
チュートリアル

Setup Supabase Authentication with Capacitor Social Login Plugin

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

モバイルアプリの認証設定は複雑になることがありますが、SupabaseとCapacitorのSocial Loginプラグインを組み合わせることで サプバース と Capgo Social Login plugin makes it straightforward. This tutorial will guide you through integrating social authentication (Google, Apple, Facebook) with Supabase in your Capacitor app.

ソーシャルログインとSupabaseを使用する理由

Supabase ソーシャルログイン @capgo/capacitor-social-login Capacitorソーシャルログイン @capgo/capacitor-supabase Capacitor

  • ソーシャルログイン
  • Capacitor
  • Capacitor
  • ソーシャルログイン
  • Built-in user management

Prerequisites

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

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

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

まず、Capgo ソーシャルログインプラグインをインストールしてください:

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

See the ソーシャルログイン と Supabase プラットフォームごとの設定用のプラグインページ。

ステップ 2: Supabase プロジェクトの設定

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

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

    • 以下のサイトにアクセスしてください。 supabase.com サインアップ/サインインしてください。
    • 「新しいプロジェクト」をクリックしてください。 組織を選択してください。
    • プロジェクト名を入力してください。
    • Step 1: Install Capacitor CLI Step 3: Create a new Capacitor project （例：「MyApp Auth」）
    • セットする データベースパスワード (安全に保存してください)
    • 選択する リージョン (ユーザーに近いものを選択してください)
    • クリック 「新しいプロジェクトを作成」

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

    • 作成されたら、 設定 > API
    • プロジェクトURLをコピーしてください プロジェクトURL (例えば、 https://your-project-ref.supabase.co)
    • プロジェクトURLをコピーしてください 匿名パブリック APIキー
    • これらの情報は後でアプリで使用するために保存してください

認証設定を構成する

  1. 一般的な認証設定を設定する:

    • 以下の手順に従ってください 認証>設定
    • 以下 基本設定:
      • 設定 サイトURL あなたのアプリのURL (例えば、 https://yourdomain.com または http://localhost:3000 サイトURL
      • に設定してください。 開発用に 追加の 
        http://localhost:3000
https://yourdomain.com
capacitor://localhost (for mobile apps)

  2. リダイレクトURL 必要であれば

    • メール設定を構成する SMTP設定, メールプロバイダを設定する
    • メール確認とパスワードリセットを有効にする
    • 開発環境では、組み込みメールサービスを使用できます

社会的認証プロバイダを有効にする

  1. プロバイダのセクションにアクセスする:
    • Capgoのドキュメント SupabaseのダッシュボードのAuthentication > Providersに移動する 利用可能な社会的プロバイダの一覧が表示される
    • 各プロバイダには
    • 有効 をタップする 切り替えと設定オプション

さて、各ソーシャル プロバイダーを詳しく設定しましょう:

ステップ 3: Supabase でソーシャル プロバイダーを設定する

Supabase で Google 認証を設定する

まず、Google OAuth のクレデンシャルを取得しましょう:

Google の設定ガイドを徹底的に参照してください: Google 認証の設定

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

  • Google Cloud プロジェクトを作成する
  • iOS、Android、Web 向けの OAuth 2.0 クレデンシャルを設定する
  • consent スクリーンを設定する
  • 必要な Client ID とシークレットを取得する

Google設定を完了した後、CapacitorでSupabaseを設定します:

  1. SupabaseでGoogleプロバイダーを有効にします:
    • Supabaseダッシュボードで 認証 > プロバイダー
    • 以下の項目を検索します Google を ONに切り替えます
    • 設定値を入力します
      • クライアントID: Google OAuth Web 設定値 クライアントID（Google Cloud Consoleから）
      • クライアントシークレット: Google OAuth Web クライアントシークレット
      • リダイレクトURL: https://your-project-ref.supabase.co/auth/v1/callback (自動入力)
    • Click 「保存」

重要：Capgoで使用する Web クライアントID かつ __CAPGO_KEEP_0__ Web クライアントシークレット

Supabase では、モバイル アプリを構築している場合でも、Web クライアント ID を使用できます。モバイル クライアント ID は、プラグインの構成で別々に使用されます。

Apple 認証の設定

Apple 認証の設定のための資格情報を取得する 詳細な Apple 設定ガイドをご覧ください:

Apple 認証の設定

  • このガイドでは、以下の内容をカバーします。
  • Apple Developer アカウントの設定
  • App ID と Service ID の作成
  • Sign in with Apple の機能の設定
  • iOS、Android、Web向けのプラットフォーム固有の設定

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

  1. SupabaseでAppleプロバイダーを有効にする:
    • Go to 認証 > プロバイダー Appleを ONに切り替える 設定値を入力する
    • クライアントID
      • : サービスID識別子 (例えばクライアントシークレット com.yourapp.signin)
      • __CAPGO_KEEP_0__: Apple 秘密鍵を使用してこの JWT を生成します (Apple ドキュメントの "JWT の形式" を参照) Supabase の Apple ドキュメント Facebook 認証
      • リダイレクト URL: https://your-project-ref.supabase.co/auth/v1/callback 自動入力
    • クリック “Save”

「保存」をクリック注意

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

Supabase の Facebook 認証の設定

Facebook の資格情報を取得する Facebook認証設定

This guide covers:

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

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

  1. FacebookプロバイダをSupabaseで有効にする:
    • Go to 認証 > プロバイダ とスイッチ Facebook ON
    • 設定を入力してください
      • Client ID: FacebookアプリIDを入力してください
      • Client Secret: Facebookアプリシークレットを入力してください
      • Redirect URL: https://your-project-ref.supabase.co/auth/v1/callback (自動入力)
    • Click “Save”

重要な注意事項: SupabaseのコールバックURLを追加してください (https://your-project-ref.supabase.co/auth/v1/callbackFacebookアプリの Valid OAuth Redirect URIs Facebook Loginの設定

重要なSupabaseの設定の注記

Row Level Security (RLS):

  • 認証を設定した後、各テーブルでRLSを有効にします
  • Database > Tables とtoggle Enable RLS 各テーブルで for
  • 認証ユーザーに基づいてデータアクセスを制御するポリシーを作成

ユーザー管理:

  • 認証ユーザーを表示する 認証 > ユーザー
  • 認証イベントを監視する 認証 > ログ
  • メールテンプレートを設定する 認証 > メールテンプレート

設定のテスト:

  • Supabaseの組み込み認証テストツールを使用
  • 以下に移動 認証 > ユーザー とクリック 「ユーザーを招待」 テスト用のメールフローを設定
  • 確認する ログ セクションで認証エラーを確認

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

ソーシャル ログイン プラグインを設定するには、対応するクレデンシャルとともに、Supabase を設定した後、必要です。 重要: プラグインは、OAuth クレデンシャルを取得する必要があります。 元のプロバイダー (Supabase ではなく)、サーバー側の認証を Supabase が管理する

認証フローのしくみ

設定に進む前に、流れを理解してください

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

Google プラグイン設定

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

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

Googleの重要なポイント:

  • Web クライアント ID (Android/iOSクライアントIDではありません)の フィールド webClientId Web クライアント IDだけでもプラグインはすべてのプラットフォームで動作します
  • The plugin needs your
  • 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アプリの基本設定で見つけることができます
  • limitedLogin: true Facebookのプライバシーに焦点を当てたLimited Login機能を有効にします (iOSのみ)
  • 重要: 以下のリンクを参照してください Facebookの設定ガイド 詳細なLimited Login情報、包括的にATTの考慮事項については

プラグインの初期化を完了してください

CapgoでSupabaseとCapacitorをセットアップする

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

重要な注意事項

  • Capacitorを使用する場合、CapgoのAppflowとCapacitorを使用する場合の差異を理解することが重要です。 initialize() 一度 アプリが起動したときに呼び出す
  • 各ログイン前に呼び出すのではなく
  • 使用する予定のプロバイダーを設定する必要がある ここで記載されているクレデンシャルは、元のプロバイダーから取得したものであり、Supabaseから取得したものではありません。Supabaseに設定したプロバイダーと一致するようにしてください。
  • ステップ 5: Supabase Clientのセットアップ

Supabase Clientをインストールしてください。

__CAPGO_KEEP_0__

npm install @supabase/supabase-js

Supabase サービスを作成する

// 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: 認証フローを実装する

両方の認証サービスを組み合わせた認証サービスを作成する

// 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();

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

// 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の完全な設定については、関連するプラットフォームガイドを参照してください。

Step 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 の OAuth プロバイダーの設定が一致していることを確認してください
  • リダイレクト URL が正しく設定されていることを確認してください

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

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

認証フローの中断

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

まとめ

CapacitorとSupabaseを組み合わせた社会認証システムを構築しました。これにより、以下の機能が提供されます。

  • セキュアな社会認証
  • トークン管理のシームレス
  • リアルタイムデータベース統合
  • クロスプラットフォーム互換性

The combination of Supabase and the Capgo Social Login plugin offers a powerful, scalable authentication solution for your Capacitor apps.

より高度な機能 マルチファクター認証 または 、__CAPGO_KEEP_1__アプリケーションに高度な機能 カスタムクレーム と Social Login プラグイン ドキュメント.

Keep going from Setup Supabase Authentication with Capacitor Social Login Plugin

Capacitor と Capgo の Social Login プラグインを使用して Supabase の設定を続行してください。 Setup Supabase Authentication with Capacitor Social Login Plugin Capacitor と Capgo の Social Login プラグインを使用して Supabase の設定を続行してください。 @capgo/capacitor-social-login for the implementation detail in @capgo/capacitor-social-login, @capgo/capacitor-passkey for the implementation detail in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric for the implementation detail in @capgo/capacitor-native-biometric, 2要素認証 2要素認証の実装詳細について SSO (エンタープライズ) SSO (エンタープライズ)の実装詳細について。

Capacitor アプリのリアルタイム更新

When a web-layer bug is live, ship the fix through Capgo instead of waiting days for app store approval. Users get the update in the background while native changes stay in the normal review path.

ウェブ層のバグが生じた場合、__CAPGO_KEEP_0__ を通じて修正を配信するのではなく、数日間待ってアプリストアの承認を待つのではなく、ユーザーはバックグラウンドで更新を受け取り、ネイティブの変更は通常のレビュー経路に残す。

コンテキスト: Capgo マーケティング ウェブサイト。役割: サポートする説明文またはメタ説明文。見つける場所: component GetStarted.astro。Capgo の製品/ブランド名と開発者用語をそのまま保存。

マーティンから人間のサポート

Capgo gives you the best insights you need to create a truly professional mobile app.

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

2方向の通信をCapacitorアプリに実装する

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

OTA更新の5つの一般的なミスを避ける

モバイル アプリのライブ アップデートのための 5 つのセキュリティ ベスト プラクティス
開発 モバイル +1
2025 年 1 月 14 日

モバイル アプリのライブ アップデートのための 5 つのセキュリティ ベスト プラクティス

すべてのブログ記事を表示