Supabase Appleログイン - 基本設定

概要

このガイドでは、Apple Sign-InをSupabase Authenticationと統合する方法を説明します。Apple Sign-Inは、iOS、Android、Webで利用できる、安全でプライバシー重視の認証方法です。

前提条件

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

1. Supabase プロジェクトを作成済み

2. 以下の Apple Loginの基本設定 Apple OAuth認証情報のセットアップガイド

3. 対象プラットフォームに応じて、それぞれのプラットフォーム別ガイドに従い、Apple OAuth認証情報を設定してください:

   • Android セットアップ
   • iOSのセットアップ
   • Web の設定

   注意

   Supabaseのチュートリアルを開始する前に、使用するプラットフォームのクライアントIDを生成しておく必要があります。

   iOSの場合、クライアントIDはアプリIDと同じです。 AndroidおよびWebの場合、クライアントIDはサービスIDと同じです。 これらは本ガイドのステップ7で使用します。

SupabaseでApple OAuthプロバイダーを有効にする

1. 以下に移動してください： Supabase ダッシュボード

2. プロジェクトをクリック

   

3. 次に、以下に移動してください： Authentication メニュー

   

4. 次の Providers タブ

   

5. 〜を探します Apple プロバイダーを有効にする

   

6. その Apple プロバイダーを有効にする

   

7. Client ID の設定を入力してください:

   注意

   iOSでAppleログインを使用する場合、Client IDはApp IDと同じです。 AndroidまたはWebでAppleログインを使用する場合、Client IDはService IDと同じになります。 両方を使用する場合は、App IDとService IDの両方を指定する必要があります。

   

8. 次の Save ボタンをクリックします

   

   注意

   お客様 不要です セットアップ Secret key (for OAuth). Appleログインを処理するために、カスタムバックエンドの実装を行います。

これで、Supabase Authenticationを使用したApple Sign-Inの設定が完了しました 🎉

Authentication Helperの使用方法

完全な実装には、ヘルパー関数が含まれています authenticateWithAppleSupabase() この関数は、Supabaseを使用したApple Sign-Inのフロー全体を処理します。具体的には以下の通りです：

• プラットフォームごとの設定でApple Sign-Inを初期化
• 認証フローの制御（iOSはネイティブ、Android/WebはOAuthリダイレクト）
• AppleからIDトークンを取得
• IDトークンを使用してSupabaseにサインイン

完全な実装例

完全な実装は以下にあります： サンプルアプリの supabaseAuthUtils.ts ファイル。

基本的な使い方

import { authenticateWithAppleSupabase } from './supabaseAuthUtils';

const result = await authenticateWithAppleSupabase();
if (result.success) {
  console.log('Signed in:', result.user);
  // Navigate to your authenticated area
} else {
  console.error('Error:', result.error);
}

仕組み

ヘルパー関数がプラットフォームごとの違いを自動的に処理します：

• iOSとiOS: ネイティブの Apple Sign-In を使用（リダイレクトURLは不要、bundle ID を自動使用）
• AndroidAndroid: バックエンドの edge function を使用した OAuth リダイレクトフロー（Service ID が必要）
• Web: OAuthポップアップフローを使用（Service IDと現在のページURLをリダイレクト先として指定する必要があります）

この関数はAppleからIDトークンを返し、そのトークンはSupabaseでの認証に使用されます。 supabase.auth.signInWithIdToken().

Supabase Apple Login - General Setup の続きへ

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