Supabase Google Login - 一般設定

導入

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

前提条件

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

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

2. 「 Google Login General Setup Google OAuth 認証の設定ガイド

3. ターゲットプラットフォームの Google OAuth 認証の設定ガイドに従って、以下の手順に従ってください:

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

   注意

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

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

1. あなたの Supabaseダッシュボード

2. あなたのプロジェクト

   

3. Googleアカウントを使用する Authentication メニュー

   

4. 以下のボタンをクリック Providers タブ

   

5. 以下のプロバイダーを検索 Google プロバイダー

   

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

   

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

   

   注意

   このプロバイダーには、Web クライアント ID、iOS クライアント ID、および Android クライアント ID が含まれます。使用するプラットフォームに応じて、提供する必要のある ID を省略できます。

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

   

注意

あなたは しない 設定しない Client Secret (for OAuth) または Callback URL (for OAuth)このガイドでは、この設定は必要ありません。 Skip nonce checks Voilà、Supabase認証とGoogleサインインを有効にしました！🎉

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

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

完全な実装

完全な実装は、

サンプルアプリの ファイルにあります。 supabaseAuthUtils.ts または

1. Nonce Generation

The implementation generates a secure nonce pair following the Supabase nonce requirements:

// 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 };
}

Flow:

• rawNonce: URL-safe random string (64 hex characters)
• nonceDigest: SHA-256 hash of rawNonce (hex-encoded)
• nonceDigest is passed to Google Sign-In → Google includes the nonce digest in the ID token
• rawNonce is passed to Supabase → Supabase hashes the raw nonce and compares with the token’s 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. 無効な要求の防止: トークンに不正な受信者またはnonceの不一致がある場合、Supabaseはトークンを拒否します。検証することで、不必要な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. If validation fails, the function automatically:
2. ログアウトする (キャッシュされたトークンをクリア - iOS で重要)
3. 再度認証する (新しいトークンを生成し、正しい nonce を使用)

リトライが失敗した場合、エラーを返す

Supabase Sign-In のセクション "4. Supabase Sign-In"

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

Complete Code Reference

完全な実装は、 例のアプリの 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 ログイン - 一般設定から続ける

使用している場合 Supabase Google ログイン - 一般設定から続ける 認証とアカウントフローの計画に使用している場合、 Capacitor の @capgo/capacitor-social-login Capacitor の @capgo/capacitor-social-login Capacitor の @capgo/capacitor-social-login Capacitor の @capgo/capacitor-passkey Capacitor の @capgo/capacitor-passkey Capacitor の @capgo/capacitor-native-biometric Capacitor の @capgo/capacitor-native-biometric Capgoの実装詳細については@capgo/capacitor-native-biometricにあります。 2要素認証 Capgoの実装詳細については2要素認証にあります。