Supabase統合の導入

概要

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

学ぶこと

• Supabase Authenticationを設定する方法
• Capacitor Social LoginプラグインをSupabase Authと統合する方法
• Android、iOS、Web向けのプラットフォーム固有の設定
• Supabaseで非接触を安全に処理する方法

必要なもの

始める前に、以下のことを確認してください。

1. Supabaseプロジェクト

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

2. Supabase JS SDK

   • プロジェクトに Supabase をインストールする:

     npm install @supabase/supabase-js

3. A Capacitor プロジェクト

   • 既存の Capacitor アプリケーション
   • Capacitor Social Login プラグインがインストールされている:

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

4. プラットフォーム固有の Google セットアップ

   • Google Sign-Inのセットアップを完了してください。
     • GoogleログインAndroidセットアップ
     • GoogleログインiOSセットアップ
     • GoogleログインWebセットアップ

サンプルアプリケーション

リポジトリで利用可能な完全な実装があります。

Code リポジトリ: code リポジトリをここで見つけることができます。

サンプルアプリケーションでは、以下の機能を実装しています。

• Supabaseを使用したメール/パスワード認証
• Google Sign-Inの統合 (Android、iOS、Web)
• A simple key-value store using Supabase PostgreSQL tables
• ユーザー固有のデータ ストレージに Row Level Security (RLS) を使用

実装の詳細

非接触ハンドリング

セキュリティのために、Supabase には特別な非接触ハンドリングが必要です。実装は、 React Native Google Sign In ドキュメント:

• 生成する rawNonce (URL 安全のランダム文字列)
• SHA-256 でハッシュして nonceDigest
• パス nonceDigest Google Sign-In について
• Pass rawNonce Supabase にパスワードを渡す (Supabase は内部でハッシュ化して比較する)

JWT 検証

例の実装には、次のことを確認するために JWT 検証が含まれています。

• トークンの受信者があなたの設定済み Google Client ID と一致する
• nonce が期待どおりのダイジェストと一致する
• 検証失敗時の自動リトライ (iOS における特に重要)

プラットフォーム固有の考慮事項

• iOS: Token caching can cause nonce issues - __CAPGO_KEEP_0__ implementation handles this automatically
• Web: __CAPGO_KEEP_0__ Must call isLoggedIn() on mount to handle OAuth redirects
• Android: __CAPGO_KEEP_0__ Standard implementation with SHA-1 fingerprint configuration

次のステップ

Capgoのセットアップガイドを続けてください：

• Supabase Google Login - General Setup - __CAPGO_KEEP_0__
• Androidのセットアップ - Android-用設定
• iOSセットアップ - iOS-用設定
• Webセットアップ - Web-用設定

Appleサインイン

• Supabase Apple Login - 一般設定 - 概要と前提条件
• iOSセットアップ - iOS-用設定
• Androidセットアップ - Android-用設定

Supabase統合導入から続けて

Capgoを使用している場合 Supabase統合導入 認証とアカウントフローの計画に使用している場合、Capgoを Using @capgo/capacitor-social-login for the native capability in Using @capgo/capacitor-social-login, @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 @capgo/capacitor-native-biometricの実装詳細について Two-factor authentication Two-factor authenticationの実装詳細について