Supabase インテグレーションイントロダクション

Copy a setup prompt with the install steps and the full markdown guide for this plugin.

Overview

This tutorial will guide you through setting up Supabase Authentication with the Capacitor Social Login plugin. This integration allows you to use native social login providers (Google, Apple, Facebook, Twitter) on mobile platforms while leveraging Supabase Auth for backend authentication and PostgreSQL for data storage.

学習すること

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

必要なもの

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

Supabase Project
- プロジェクトを作成する Supabase ダッシュボード
- Google OAuth プロバイダーを有効にする
- Supabase プロジェクトの URL と anon キーを取得する
Supabase JS SDK
- プロジェクトに Supabase をインストールする:
  ターミナルウィンドウ
```
npm install @supabase/supabase-js
```
Capacitor プロジェクト
- 既存の Capacitor アプリケーション
- Capacitor Social Login プラグインがインストールされている:
  ターミナルウィンドウ
```
npm install @capgo/capacitor-social-login
npx cap sync
```
Google のセットアップ (プラットフォームごと)
- Google Sign-Inの設定を、対象のプラットフォームで完了してください：

例のアプリケーション

リポジトリで利用可能な完全な実行可能な例があります：

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 ドキュメントに従っています。生成する:

(URL 安全のランダム文字列) rawNonce SHA-256 でハッシュして
Pass nonceDigest
__CAPGO_KEEP_0__ nonceDigest Google Sign-In にアクセスする
Pass rawNonce Supabase (内部でハッシュ化して比較する) へのアクセス

JWT 検証

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

トークンの受信者が、設定済みの Google Client ID と一致する
nonce が期待どおりのハッシュと一致する
検証失敗時の自動リトライ (iOS に特に重要)

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

iOS: Token キャッシングは、nonce の問題を引き起こす可能性があります - この実装では、この問題を自動的に処理します。
Web: 必ず呼び出す isLoggedIn() on mount で OAuth リダイレクトを処理する
Android: SHA-1 フィンガープリント設定の標準実装

次のステップ

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

Supabase Google ログイン - 一般設定 - 概要と前提条件
Android セットアップ - Android-用設定
iOSの設定 - iOS-用設定
Webの設定 - Web-用設定

Supabase Apple Login - 一般設定 - 概要と前提条件
iOSの設定 - iOS-用設定
Androidの設定 - Android-専用の設定

Supabase Integration イントロダクションから続けてください

Capgo を使用している場合 Supabase Integration イントロダクション 認証とアカウントフローの計画に使用し、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の実装詳細について 2要素認証 2要素認証の実装詳細について

Supabase インテグレーション イントロダクション