Supabase Google Login - 基本設定

はじめに

このガイドでは、Capacitor Social Login プラグインを使用して、Google Sign-In を Supabase Authentication に統合する方法を説明します。この設定により、モバイルプラットフォームでネイティブな Google Sign-In を利用しながら、バックエンドの認証に Supabase Auth を活用できます。

前提条件

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

1. Supabase プロジェクトの作成

2. 読む Google Login の基本設定 Google OAuth 認証情報の設定ガイド

3. 対象プラットフォーム向けの各ガイドに従って、Google OAuth 認証情報を設定してください：

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

   注意

   Supabase のチュートリアルを開始する前に、使用する予定のプラットフォームのクライアント ID を生成しておく必要があります。 生成した ID は、このガイドのステップ 7 で使用します。

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

1. ご利用の Supabase ダッシュボード

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

   

3. 次に移動するのは Authentication メニュー

   

4. クリックするのは Providers タブ

   

5. 探すのは Google プロバイダー

   

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

   

7. 使用するプラットフォームのクライアントIDを追加してください

   

   注意

   これにはWeb、iOS、Androidの各クライアントIDが含まれます。使用するプラットフォームに応じて、一部を省略することも可能です。

8. クリックするのは Save ボタン

   

注意

お客様 禁止事項 セットアップ Client Secret (for OAuth) または Callback URL (for OAuth). 一部のソースでは、以下を設定することを推奨している場合もあります Skip nonce checks iOS の Google 設定についてですが、このガイドに従えば設定は不要です。

これで、Supabase Authentication による Google Sign-In の設定は完了です 🎉

Supabase Authentication Helper による Google Sign-In の仕組み

このセクションでは、Google Sign-InとSupabaseの連携が内部でどのように動作するかを解説します。このフローを理解すると、認証プロセスの実装やトラブルシューティングに役立ちます。

実装の全容

完全な実装は、以下の サンプルアプリの supabaseAuthUtils.ts ファイルが含まれています。

1. Nonceの生成

実装では、以下に従って安全なnonceペアを生成します: Supabaseのnonce要件:

// Generate URL-safe random nonce
function getUrlSafeNonce(): string {
  const array = new Uint8Array(32);
  crypto.getRandomValues(array);
  return Array.from(array, (byte) => byte.toString(16).padStart(2, '0')).join('');
}

// Hash the nonce with SHA-256
async function sha256Hash(message: string): Promise<string> {
  const encoder = new TextEncoder();
  const data = encoder.encode(message);
  const hashBuffer = await crypto.subtle.digest('SHA-256', data);
  const hashArray = Array.from(new Uint8Array(hashBuffer));
  return hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');
}

// Generate nonce pair
async function getNonce(): Promise<{ rawNonce: string; nonceDigest: string }> {
  const rawNonce = getUrlSafeNonce();
  const nonceDigest = await sha256Hash(rawNonce);
  return { rawNonce, nonceDigest };
}

フロー:

• rawNonce: URLセーフなランダム文字列 (64文字の16進数)
• nonceDigest: のSHA-256ハッシュ rawNonce (16進数エンコード)
• nonceDigest Google Sign-Inに渡されます → GoogleはIDトークンにnonceのダイジェストを含めます
• rawNonce Supabaseに渡されます → Supabaseは生のnonceをハッシュ化し、トークンのnonceと比較します

2. Google Sign-In

この関数でプラグインを初期化し、Googleでサインインします：

await SocialLogin.initialize({
  google: {
    webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
    // iOS only:
    iOSClientId: 'YOUR_IOS_CLIENT_ID.apps.googleusercontent.com',
    mode: 'online', // Required to get idToken
  },
});

const response = await SocialLogin.login({
  provider: 'google',
  options: {
    scopes: ['email', 'profile'],
    nonce: nonceDigest, // Pass the SHA-256 hashed nonce
  },
});

3. JWTの検証

トークンをSupabaseに送信する前に、実装側でJWTトークンの検証を行います：

function validateJWTToken(idToken: string, expectedNonceDigest: string): { valid: boolean; error?: string } {
  const decodedToken = decodeJWT(idToken);

  // Check audience matches your Google Client IDs
  const audience = decodedToken.aud;
  if (!VALID_GOOGLE_CLIENT_IDS.includes(audience)) {
    return { valid: false, error: 'Invalid audience' };
  }

  // Check nonce matches
  const tokenNonce = decodedToken.nonce;
  if (tokenNonce && tokenNonce !== expectedNonceDigest) {
    return { valid: false, error: 'Nonce mismatch' };
  }

  return { valid: true };
}

なぜSupabaseに送る前に検証が必要なのですか？

Supabaseに送信する前にJWTトークンを検証することには、いくつかの重要な目的があります：

1. 不正なリクエストの防止: トークンの audience が正しくない、または nonce が一致しない場合、Supabase はトークンを拒否します。事前に検証することで、不要な API 呼び出しを避け、より明確なエラーメッセージを返せます。

2. トークンキャッシュの問題: 一部のプラットフォーム（特に iOS）では、パフォーマンス向上のために Google Sign-In SDK がトークンをキャッシュすることがあります。キャッシュされたトークンが返される際、そのトークンが異なる nonce（または nonce なし）で生成されていると、Supabase で「nonce mismatch」エラーが発生します。Supabase に送信する前に検証を行うことで、この問題を早期に検知し、新しいトークンで自動的にリトライできます。

3. セキュリティ (iOS): iOS での検証により、トークンがお使いの Google Client ID に対して発行されたものであることが保証され、他のアプリ向けのトークンを使用することによるセキュリティリスクを防ぎます。

4. エラーハンドリングの向上: Supabase に送信する前に問題を検知することで、自動リトライロジックを実装できます。これは iOS のキャッシュ問題を透過的に処理するために不可欠です。

検証に失敗した場合、関数は自動的に以下を実行します：

1. Google からログアウト（キャッシュされたトークンをクリア - iOS では特に重要）
2. 認証を1回リトライ（正しい nonce で新しいトークンの生成を強制）
3. リトライも失敗した場合は、エラーを返します

4. Supabaseでのサインイン

最後に、検証済みのトークンがSupabaseに送信されます：

const { data, error } = await supabase.auth.signInWithIdToken({
  provider: 'google',
  token: googleResponse.idToken,
  nonce: rawNonce, // Pass the raw (unhashed) nonce
});

Code リファレンスを完了する

完全な実装は、以下の サンプルアプリの supabaseAuthUtils.ts 以下の内容を含むファイル:

• getUrlSafeNonce() - URLセーフなランダムnonceの生成
• sha256Hash() - SHA-256による文字列のハッシュ化
• getNonce() - nonceペアの生成
• decodeJWT() - JWT tokenのデコード
• validateJWTToken() - JWTのaudienceとnonceの検証
• authenticateWithGoogleSupabase() - 自動リトライ機能付きのメイン認証関数

追加のサンプルファイル

• SupabasePage.tsx - リダイレクト処理を含むコンポーネント例 (Web)
• SupabaseCreateAccountPage.tsx - アカウント作成ページの例

次のステップ

対象プラットフォームごとのセットアップガイドに進んでください：

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

Supabase Google Login - General Setup からの続き

以下を使用している場合： Supabase Google Login - 基本設定 認証とアカウントフローを計画するには、以下と連携させてください @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 の実装詳細、および 二要素認証 二要素認証の実装詳細については、