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

CapacitorでSupabase認証をセットアップする

CapacitorアプリにGoogle、Apple、Facebook認証をシームレスに統合する方法を学びます。Capgoのソーシャルログインプラグインを使用してSupabase認証を統合します。

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

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

コンテンツマーケター
CapacitorでSupabase認証をセットアップする

モバイルアプリの認証設定は複雑ですが、Supabaseと__CAPGO_KEEP_0__ Social Login プラグインを組み合わせると簡単になります。このチュートリアルでは、Supabaseと__CAPGO_KEEP_0__アプリにGoogle、Apple、Facebookのソーシャル認証を組み込む方法を紹介します。 Supabaseとソーシャルログインの使用理由 Supabaseは、組み込み認証機能を備えた強力なバックエンドサービスを提供し、@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-loginプラグインは、iOS、Android、Webプラットフォームでネイティブのソーシャル認証を提供します。 Capgo Social Login plugin Supabaseは、組み込み認証機能を備えた強力なバックエンドサービスを提供し、@Capacitor/__CAPGO_KEEP_1__-supabaseは、ネイティブの認証ヘルパーとJWTアクセスを提供します。

Supabaseと__CAPGO_KEEP_0__ Social Loginプラグインを組み合わせると、

Supabaseと__CAPGO_KEEP_0__ Social Loginプラグインを組み合わせると、 Supabaseと__CAPGO_KEEP_0__ Social Loginプラグインを組み合わせると、 @capgo/capacitor-social-login Supabaseと__CAPGO_KEEP_0__ Social Loginプラグインを組み合わせると、 @capgo/capacitor-supabase Supabaseと__CAPGO_KEEP_0__ Social Loginプラグインを組み合わせると、

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

前提条件

開始する前に、次のことを確認してください。

  • Capacitor プロジェクトがセットアップされている
  • Supabase アカウントとプロジェクト
  • 選択したソーシャル プロバイダーの開発者アカウント (Google、Apple、Facebook)

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

最初に Capgo ソーシャル ログイン プラグインをインストールしてください:

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

プラットフォームごとの設定については、 Social Login と Supabase プラグインページを参照してください。

Step 2: Supabase Projectの設定

Supabase Projectを作成して設定する

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

    • をご覧ください。 supabase.com で会員登録/ログイン
    • をクリックしてください。 新しいプロジェクト
    • 組織を選択してください
    • プロジェクト名を プロジェクト名 (例： "MyApp Auth")
    • データベースの データベースパスワード (安全に保存してください)
    • 地域を選択してください (ユーザーに近いものを選択してください) クリック
    • __CAPGO_KEEP_0__ 新プロジェクトを作成

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

    • 作成後は 設定 > API
    • コピーする プロジェクトURL (例えば https://your-project-ref.supabase.co)
    • anon public __CAPGO_KEEP_0__ API key
    • 認証設定を構成

__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. プロバイダーセクションにアクセスする:
    • 以下に移動する 認証>プロバイダー __CAPGO_KEEP_0__のSupabaseダッシュボードで確認してください
    • __CAPGO_KEEP_1__の利用可能なソーシャルプロバイダーのリストが表示されます
    • 各プロバイダには __CAPGO_KEEP_2__と設定オプションが用意されています __CAPGO_KEEP_3__を有効にすると、各ソーシャルプロバイダーの詳細設定が可能になります:

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

SupabaseでGoogle認証を設定する

まず、Google OAuth認証情報を取得してください:

Google設定の詳細ガイドをご覧ください:

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

__CAPGO_KEEP_4__

  • Google Cloud Projectを作成する
  • iOS、Android、Web向けのOAuth 2.0資格情報を設定する
  • consent screenの設定
  • 必要なClient IDとシークレットを取得する

Googleの設定を完了したら、Supabaseに設定する:

  1. SupabaseでGoogleプロバイダーを有効にする:
    • Supabaseのダッシュボードに移動し、 認証>プロバイダー
    • 「Google」を見つける 「ON」に切り替える __CAPGO_KEEP_0__ __CAPGO_KEEP_1__
    • 設定を入力してください:
      • __CAPGO_KEEP_0__: Google OAuth のクライアント ID Web __CAPGO_KEEP_1__ (Google Cloud Console から)
      • __CAPGO_KEEP_2__: Google OAuth のクライアント シークレット Web __CAPGO_KEEP_3__
      • (自動入力): https://your-project-ref.supabase.co/auth/v1/callback クリック
    • Redirect URL “Save”

重要： Web Client ID と Web Client Secret をSupabaseに、モバイルアプリを開発している場合でも使用してください。モバイルクライアントIDはプラグイン設定で別途使用されます。

SupabaseでApple認証を設定する

Apple認証の取得:

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

このガイドでは:

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

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

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

注記: Apple の認証設定は、Service ID、プライベート キー、JWT の生成に必要な Apple の要件により最も複雑です。各プラットフォームごとに、ドキュメントを慎重に確認してください。

Facebook の Supabase 設定

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

Facebook の設定ガイドを完全に参照してください: Facebook 認証設定

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

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

Facebook の設定が完了した後、Supabase で設定を構成してください。

  1. Facebook プロバイダーを Supabase で有効にします。:
    • Go to 認証 > プロバイダー と Facebook を
    • 設定を入力してください:
      • Client ID: Facebook アプリ ID
      • Client Secret: Facebook アプリ シークレット
      • リダイレクト URL: https://your-project-ref.supabase.co/auth/v1/callback (auto-filled)
    • Click "保存"

重要：SupabaseのコールバックURL（https://your-project-ref.supabase.co/auth/v1/callback）をFacebookアプリの Valid OAuth Redirect URIs Facebookログイン設定の

重要なSupabaseの設定メモ

レコードレベルセキュリティ（RLS）：

  • 認証を設定した後、テーブルのRLSを有効にします
  • Go to データベース > テーブル と切り替え RLSを有効にする 各テーブル
  • 認証済みユーザーに基づいてデータアクセスを制御するポリシーを作成する

ユーザー管理:

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

Testing the Configuration:

  • Supabaseの組み込み認証テストツールを使用
  • Go to 認証 > ユーザー and click “ユーザーを招待” to test email flows
  • Check the ログ section for any authentication errors

Step 4: Configure the Social Login Plugin

Capgoでは、Supabaseの設定が完了した後、対応するクレデンシャルとともにSocial Loginプラグインを設定する必要があります 重要: プラグインは、OAuthのクレデンシャルを取得するために、 元のサービスプロバイダー (Supabaseではなく) にアクセスする必要があります。

認証フローのしくみ

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

  1. プラグインは ソーシャルプロバイダー (Google/Apple/Facebook) とネイティブに認証します。
  2. プラグインは プロバイダーからトークン (アクセストークン、IDトークン) を受け取ります。
  3. アプリはこれらのトークンを Supabaseに送信します。 signInWithIdToken()
  4. Supabase validates the tokens with the provider and creates a user session
  5. Supabase returns its own JWT token for your app’s authenticated requests

Google Plugin Configuration

The plugin needs your Web Client ID for all platforms and optionally an iOS Client ID for iOS-specific features:

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

Key points for Google:

  • Use the Web クライアント ID (Android/iOS クライアント ID ではない) webClientId フィールド
  • Web クライアント ID のみで、すべてのプラットフォームでプラグインが動作する
  • は iOSClientId オプションであり、iOS のみで使用される Google の機能に使用されます

Apple プラグイン設定

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

iOS (ネイティブ Apple Sign-In):

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 __CAPGO_KEEP_0__は、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のBasic Settingsで見つけることができます。
  • limitedLogin: true Facebookのプライバシーに焦点を当てたLimited Login機能 (iOSのみ) を有効にします。
  • 重要: See our 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() 使用する予定のプロバイダーだけを設定する必要があります ここに記載されているクレデンシャルは、
  • 元のプロバイダーから取得されています
  • original providers hereSupabase からデータを取得しないようにします。
  • Supabase のプロバイダーの資格情報は、Supabase で構成したものと一致するようにしてください。

ステップ 5: Supabase クライアントの設定

Supabase クライアントをインストールする:

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

ログインボタンを 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の設定の要点 - 追加 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>

Android の完全な設定、Google Play Services のセットアップ、およびパッケージ名の設定のためのリンクされたプラットフォーム ガイドを参照してください。

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

ユーザーが認証されたら、行レベル セキュリティ (RLS) を使用して Supabase のデータベースを使用できます。

// 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. 行レベル セキュリティを有効化 Supabase における
  4. トークンを検証する 必要に応じてバックエンドで
  5. トークンを自動的に更新する Supabase と

トラブルシューティング

トークン一致エラー

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

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

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

認証フローの中断

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

まとめ

Supabaseの強力なバックエンドとネイティブのソーシャルログイン機能を組み合わせた完全な認証システムを実装することができました。この設定では、以下の機能が提供されます。

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

SupabaseとCapgoソーシャルログインプラグインの組み合わせは、Capacitorアプリ向けに強力かつ拡張性のある認証ソリューションを提供します。

より高度な機能の実装、例えば 2要素認証 または カスタムクレーム、確認してください Supabaseドキュメント と Social Loginプラグインドキュメント.

Capacitor Social Login プラグインとSupabaseの設定から続けてください

Capgoを使用している場合 Capacitor Social Login プラグインとSupabaseの設定 認証とアカウントフローの計画と接続に使用する場合は @capgo/capacitor-social-login @capgo/capacitor-social-loginの実装詳細 @capgo/capacitor-passkey @capgo/capacitor-passkeyの実装詳細について @capgo/capacitor-native-biometric @capgo/capacitor-native-biometricの実装詳細について 2要素認証 2要素認証の実装詳細について SSO (企業) SSO (企業)の実装詳細について

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

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

Get Started Now

最新のブログ記事

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

Capacitorアプリの2方向のコミュニケーション
開発 モバイル +1
2025年4月26日

Capacitorアプリの2方向のコミュニケーション

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

5つのOTA更新ミスを避ける

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

モバイルアプリライブ更新の5つのセキュリティベストプラクティス

ブログからすべてを参照