Supabase Apple Login - 一般設定

概要

このガイドでは、Supabase認証にAppleサインインを統合する方法を説明します。Appleサインインは、iOS、Android、Webプラットフォーム全体で機能する、安全でプライバシー重視の認証方法を提供します。

前提条件

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

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

2. Apple Login一般設定ガイドを読み、Apple OAuth認証情報を設定済み

3. ターゲットプラットフォーム向けのApple OAuth認証情報を設定するため、それぞれのプラットフォーム固有のガイドに従った:

   • Android設定
   • iOS設定
   • Web設定

   Note

   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. クライアントID設定を入力:

   Note

   iOS用にAppleログインを使用している場合、クライアントIDはアプリIDと同じです。 AndroidまたはWeb用にAppleログインを使用している場合、クライアントIDはサービスIDと同じです。 両方を使用している場合は、アプリIDとサービスIDの両方を提供する必要があります。

   

8. Saveボタンをクリック

   

   Note

   Secret key (for OAuth)を設定する必要は__ありません__。Appleログインを処理するためのカスタムバックエンド実装を行います。

これで、Supabase認証でAppleサインインが有効になりました 🎉

認証ヘルパーの使用

完全な実装には、Supabaseを使用したAppleサインインフロー全体を処理するヘルパー関数authenticateWithAppleSupabase()が含まれています。この関数は以下を行います:

• プラットフォーム固有の設定でAppleサインインを初期化
• 認証フローを処理(iOSではネイティブ、Android/WebではOAuthリダイレクト)
• AppleからIDトークンを抽出
• IDトークンでSupabaseにサインイン

完全な実装

完全な実装は、サンプルアプリのsupabaseAuthUtils.tsファイルで利用可能です。

基本的な使用方法

import { authenticateWithAppleSupabase } from './supabaseAuthUtils';

const result = await authenticateWithAppleSupabase();
if (result.success) {
  console.log('サインイン:', result.user);
  // 認証されたエリアに移動
} else {
  console.error('エラー:', result.error);
}

仕組み

ヘルパー関数は、プラットフォーム固有の違いを自動的に処理します:

• iOS: ネイティブなAppleサインインを使用(リダイレクトURL不要、自動的にバンドルIDを使用)
• Android: バックエンドEdge Functionを使用したOAuthリダイレクトフロー(Service IDが必要)
• Web: OAuthポップアップフロー(Service IDと現在のページURLをリダイレクトとして必要)

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