Supabase Googleログイン - 一般設定

導入

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

前提条件

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

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

2. 「 Google Login General Setup 」のガイドに従ってGoogle OAuthのクレデンシャルを設定

3. ターゲットプラットフォームのGoogle OAuthのクレデンシャルを設定するためのプラットフォーム固有のガイドを参照してください:

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

   Note

   Before starting the Supabase tutorial, you need to generate the client IDs for the platforms you plan to use. You will use them in step 7 of this guide.

Enabling Google OAuth provider in Supabase

1. Go to your Supabase Dashboard

2. Click on your project

   

3. Do go to the Authentication menu

   

4. クリックして Providers タブ

   

5. 使用するプラットフォームを検索 Google プロバイダ

   

6. プロバイダを有効化

   

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

   

   Note

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

8. Click on the Save button

   

Note

You SHOULD NOT setup Client Secret (for OAuth) or Callback URL (for OAuth). Some sources might also suggest setting Skip nonce checks for Google on iOS, but with this guide this isn’t needed.

Voilà, you have now enabled Google Sign-In with Supabase Authentication

How Google Sign-In with Supabase Authentication Helper Works

This section explains how the Google Sign-In integration with Supabase works under the hood. Understanding this flow will help you implement and troubleshoot the authentication process.

Complete Implementation

The complete implementation is available in the example app’s supabaseAuthUtils.ts file.

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

フロー:

• rawNonce: URL-safe random string (64 hex characters)
• nonceDigest: SHA-256 hash of rawNonce (hex-encoded)
• nonceDigest Google Sign-In により、nonce digest が ID トークンに含まれます
• rawNonce Supabase に渡されるのは raw nonce です → 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 への検証を実行する必要があるのか

JWT トークンを Supabase への送信前に検証することは、以下の重要な目的を果たします：

1. 無効なリクエストの防止：トークンが不正な受信者または非一致の nonce を持っている場合、Supabase はどちらの場合もトークンを拒否します。検証を実行することで、不必要な API 呼び出しを回避し、明確なエラーメッセージを提供します。

2. トークンキャッシュの問題：特に iOS の場合、Google Sign-In SDK はパフォーマンスのためにトークンをキャッシュすることがあります。キャッシュされたトークンが返される場合、キャッシュされたトークンは、異なる nonce (または nonce がない場合) で生成された可能性があり、Supabase によってトークンが “nonce の一致” エラーで拒否される可能性があります。トークンを Supabase への送信前に検証することで、早期にこの問題を検出し、自動的に新しいトークンで再試行できます。

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

4. Better Error Handling: iOSのキャッシュ問題を透明に処理するために自動リトライロジックが不可欠なため、問題を検出することで、Supabaseがリトライを自動的に実行できるようになります。

検証が失敗した場合、関数は自動的に:

1. Googleからログアウト (キャッシュされたトークンをクリア - iOSでは重要)
2. 再度認証を試みる (正しい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 -
• SupabaseCreateAccountPage.tsx - Example create account page

Next Steps

Please proceed to the platform-specific setup guide for your target platform:

• Android Setup
• iOS Setup
• Web Setup

Keep going from Supabase Google Login - General Setup

If you are using Supabase Google Login - General Setup を使用して Using @capgo/capacitor-social-login for the native capability in Using @capgo/capacitor-social-login, @capgo/capacitor-social-login for the implementation detail in @capgo/capacitor-social-login, @capgo/capacitor-passkey for the implementation detail in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric for the implementation detail in @capgo/capacitor-native-biometric, and Two-factor authentication __CAPGO_KEEP_0__の実装詳細については、2要素認証の詳細を参照してください。