メインコンテンツへスキップ
Capgo - Capacitor アプリのビルド、リリース、アップデート Capgo

Supabase 連携の概要

GitHub

概要

「概要」セクション

このチュートリアルでは、Capacitor Social Login プラグインを使用して Supabase Authentication を設定する方法を説明します。この統合により、モバイルプラットフォームでネイティブのソーシャルログインプロバイダー（Google、Apple、Facebook、Twitter）を利用しつつ、バックエンドの認証には Supabase Auth、データストレージには PostgreSQL を活用できます。

学習内容

「学習内容」セクション
  • Supabase Authentication の設定方法
  • Supabase Auth と Capacitor Social Login プラグインの統合方法
  • Android、iOS、Web それぞれのプラットフォーム固有の設定
  • Supabaseでnonceを安全に扱う方法

必要なもの

「事前準備」セクション

開始前に、以下が用意されていることを確認してください：

  1. Supabaseプロジェクト

    • プロジェクトを作成： Supabase ダッシュボード
    • Google OAuthプロバイダーを有効にする
    • SupabaseプロジェクトのURLとanonキーを取得する

  2. Supabase JS SDK

    • プロジェクトにSupabaseをインストールします:
      ターミナル
      npm install @supabase/supabase-js

  3. Capacitor プロジェクト

    • 既存の Capacitor アプリケーション
    • インストール済みの Capacitor Social Login プラグイン
      ターミナル
      npm install @capgo/capacitor-social-login
      npx cap sync

  4. プラットフォーム別の Google 設定

サンプルアプリ

「サンプルアプリケーション」セクション

完全に動作するサンプルはリポジトリで公開しています:

Code リポジトリ: code リポジトリはこちらです

サンプルアプリのデモ内容:

  • Supabase によるメール/パスワード認証
  • Google Sign-In 連携（Android、iOS、Web）
  • Supabase PostgreSQL テーブルを使ったシンプルなキーバリューストア
  • Row Level Security（RLS）によるユーザー固有データの保存

実装の重要ポイント

「実装のポイント」セクション

Nonceの処理

「Nonceの処理」というセクション

Supabaseではセキュリティのため、nonceの特別な処理が必要です。実装は React Native Google Sign Inのドキュメント:

  • を生成します rawNonce （URLセーフなランダム文字列）
  • SHA-256でハッシュ化して nonceDigest
  • 渡す nonceDigest をGoogle Sign-Inに
  • 渡す rawNonce をSupabaseに送信します（Supabaseは内部でハッシュ化して比較します）

JWTの検証

「JWT Validation」セクション

サンプル実装には、以下を保証するための JWT validation が含まれています:

  • Token の audience が設定済みの Google Client ID と一致すること
  • nonce が期待される digest と一致すること
  • validation 失敗時の自動リトライ（特に iOS で重要）

プラットフォームごとの注意点

「Platform-Specific Considerations」セクション
  • iOSと: Token キャッシュにより nonce 問題が発生する可能性があります - 実装ではこれを自動的に処理します
  • Web：呼び出しが必要 isLoggedIn() マウント時にOAuthリダイレクトを処理する
  • Androidでは: SHA-1フィンガープリント設定を用いた標準的な実装

次のステップ

「次のステップ」セクション

セットアップガイドに進む：

Appleでサインイン

「Apple Sign-In」セクション

Supabase連携の導入から続ける

「Supabase 統合の紹介」から続けます

使用している場合 Supabase 連携の概要 認証とアカウントフローを計画するには、これを次と連携させてください @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要素認証 二要素認証の実装の詳細については。