Supabase Google Login - General Setup

導入

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

前提条件

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

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

2. 「Google Login General Setup」を読みました。 Google OAuthのクレデンシャルを設定するためのガイド ターゲットプラットフォーム向けのGoogle OAuthのクレデンシャルを設定するためのプラットフォーム固有のガイドを参照してください。

3. Followed the respective platform-specific guides to setup Google OAuth credentials for your target platform:

   • Android セットアップ
   • iOS セットアップ
   • Web セットアップ

   注意

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

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

1. Google OAuth プロバイダーを有効にするには、 Supabase ダッシュボード

2. プロジェクト

   

3. Do go to the Authentication メニュー

   

4. Click on the Providers タブ

   

5. Find the Google プロバイダー

   

6. プロバイダーを有効化

   

7. 各プラットフォームで使用する予定のプラットフォームのクライアントIDを追加

   

   注意

   この中にウェブ クライアント ID、iOS クライアント ID、Android クライアント IDが含まれます。使用するプラットフォームによって、提供する必要がある ID を選択できます。

8. ボタンをクリック Save ボタン

   

注意

あなたは セットアップしないでください セットアップしないでください Client Secret (for OAuth) または Callback URL (for OAuth)__CAPGO_KEEP_0__。 一部のソースでは、iOS用のGoogle設定も提案される場合がありますが、このガイドでは必要ありません。 Skip nonce checks Voilà、Supabase認証とGoogleサインインを有効にしました！🎉

GoogleサインインとSupabase認証ヘルパーのしくみ

GoogleサインインとSupabase認証ヘルパーのしくみ

完全な実装

完全な実装は、

例のアプリの ファイル supabaseAuthUtils.ts file.

1. Nonce Generation

実装は、Supabase nonce 要件に従って安全な nonce Pair を生成します。 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 には nonce Digest が含まれます → Google は ID トークンに nonce Digest を含めます
• rawNonce Supabase には nonce の raw 値が含まれます → Supabase は nonce のハッシュ値とトークンの nonce を比較します

2. Google Sign-In

Capgoプラグインを初期化し、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. 無効なリクエストを防ぐ: Supabaseはトークンが不正な受信者またはnonceの不一致の場合でも、トークンを拒否します。最初に検証することで、不必要なAPIコールを回避し、明確なエラーメッセージを提供します。

2. トークンキャッシュ問題: iOSのプラットフォーム (特にiOS) では、Google Sign-In SDK がパフォーマンスのためにトークンをキャッシュすることがあります。キャッシュされたトークンが返された場合、キャッシュされたトークンは異なるnonce (またはnonceが存在しない場合) で生成された可能性があり、Supabaseがトークンを「nonceの不一致」エラーで拒否する可能性があります。トークンをSupabaseに送る前に検証することで、早期にこの問題を検出し、自動リトライを実行して新しいトークンを取得できます。

3. Security (iOS): iOSでは、検証により、Google Client IDに特定されたトークンが発行されたことを確認し、他のアプリケーション用に意図されたトークンを使用する可能性のある潜在的なセキュリティ問題を防止します。

4. Better Error Handling: Supabaseに送る前にトークンを検証することで、iOSのキャッシュ問題を透明に自動リトライロジックを実行することができます。

If validation fails, the function automatically:

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

4. Supabase Sign-In

最後に、検証済みのトークンが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 pairを生成する
• decodeJWT() - JWTトークンをデコードする
• validateJWTToken() - JWTの受信者とnonceを検証する
• authenticateWithGoogleSupabase() - 自動リトライを含む主な認証関数

追加の例ファイル

• SupabasePage.tsx - Web へのリダイレクトハンドリングを含む例のコンポーネント
• SupabaseCreateAccountPage.tsx - アカウント作成ページの例

次のステップ

このターゲットプラットフォームのプラットフォーム固有のセットアップガイドに進んでください:

• Android用セットアップ
• iOS用セットアップ
• Web用セットアップ

Supabase Google Login - General Setup から続けてください

あなたが Supabase Google Login - General Setup を使用して認証とアカウントフローの計画を行っている場合、 Using @capgo/capacitor-social-login for the native capability in Using @capgo/capacitor-social-login, Using @capgo/capacitor-social-login を使用して、Using @capgo/capacitor-social-login のネイティブ機能を実装してください Using @capgo/capacitor-social-login を使用して、@capgo/capacitor-social-login の実装詳細を確認してください Using @capgo/capacitor-passkey 実装詳細については @capgo/capacitor-native-biometric に記載されています。 2要素認証 実装詳細については 2要素認証 に記載されています。