Supabase Apple Login - Web

前提条件

このガイドでは、WebでSupabase認証を用いたAppleサインインを統合する方法を説明します。以下の手順を既に完了していることを前提としています:

実装

完全な実装は、サンプルアプリのsupabaseAuthUtils.tsファイルで利用可能です。このガイドでは、主要な概念と使用方法について説明します。

認証ヘルパーの使用

authenticateWithAppleSupabase関数は、認証フロー全体を処理します:

import { authenticateWithAppleSupabase } from './supabaseAuthUtils';

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

仕組み

Webでは、AppleサインインはOAuthポップアップフローを使用します:

初期化: プラグインはサービスIDと現在のページURLをリダイレクトURLとして初期化されます
OAuthポップアップ: AppleのOAuthページを含むポップアップウィンドウを開きます
ユーザー認証: ユーザーがポップアップでAppleで認証します
IDトークン: Appleはユーザー情報を含むIDトークン(JWT)を返します
Supabase認証: IDトークンはsignInWithIdToken()を使用してSupabaseに送信されます

ヘルパー関数は自動的にWebプラットフォームを検出し、すべてを適切に設定します。

重要な注意事項

サービスID設定

Webには(Androidと同じ)AppleサービスIDが必要です
サービスIDは、正しいReturn URLでApple Developer Portalで設定する必要があります
ドメインがApple Developer Portalの許可されたドメインに追加されていることを確認してください

リダイレクトURL

Webでは、リダイレクトURLは自動的にwindow.location.href(現在のページURL)に設定されます
これは、Apple Developer Portalで設定されているReturn URLの1つと一致する必要があります
末尾のスラッシュありとなしの両方のURLがApple Developer Portalで設定されていることを確認してください

SupabaseクライアントID

Supabaseで、Appleプロバイダーを以下のように設定してください:

クライアントID: AppleサービスID(例: com.example.app.service)

iOSも使用している場合は、SupabaseのクライアントIDフィールドにアプリIDとサービスIDの両方を提供する必要があります(カンマ区切り)。

ヘルパー関数の更新

authenticateWithAppleSupabaseヘルパー関数を使用する際、clientIdをAppleサービスIDに合わせて必ず更新してください:

await SocialLogin.initialize({
  apple: {
    clientId: isIOS
      ? undefined // iOSは自動的にバンドルIDを使用
      : 'your.service.id.here', // WebとAndroid用のAppleサービスID
    redirectUrl: redirectUrl,
  },
});

トラブルシューティング

認証に失敗した場合:

サービスIDの不一致: Apple Developer Portalとコードの両方でサービスIDが一致することを確認
Return URLが設定されていない: 現在のページURL(末尾のスラッシュありとなし)がApple Developer Portalで設定されていることを確認
ポップアップがブロックされた: ブラウザ設定を確認 - 一部のブラウザはデフォルトでポップアップをブロックします
ドメインが許可されていない: ドメインがApple Developer Portalの許可されたドメインに追加されていることを確認
Supabase設定: SupabaseのAppleプロバイダー設定でサービスIDが正しく設定されていることを確認
リファレンスについては、サンプルアプリコードを確認