ログイン機能を30分で実装

User Pool（ユーザーの家）
├── ユーザーA
│   ├── メールアドレス
│   ├── パスワード（ハッシュ化）
│   └── カスタム属性
├── ユーザーB
└── ユーザーC

フロントエンド → App Client → User Pool
               （認証リクエスト）

ログイン成功
  ↓
┌─────────────────────────────────┐
│ ID Token                        │ ← ユーザー情報（名前、メールなど）
│ Access Token                    │ ← APIアクセス用
│ Refresh Token                   │ ← トークン更新用
└─────────────────────────────────┘

// infrastructure/lib/image-analysis-stack.ts

import * as cognito from 'aws-cdk-lib/aws-cognito';

// User Poolの作成
const userPool = new cognito.UserPool(this, 'UserPool', {
  userPoolName: 'image-analysis-users',

  // サインアップ設定
  selfSignUpEnabled: true,  // ユーザー自身で登録可能
  signInAliases: {
    email: true,  // メールアドレスでログイン
  },

  // パスワードポリシー
  passwordPolicy: {
    minLength: 8,
    requireLowercase: true,
    requireUppercase: true,
    requireDigits: true,
    requireSymbols: false,
  },

  // メール確認
  autoVerify: {
    email: true,
  },

  // アカウント復旧
  accountRecovery: cognito.AccountRecovery.EMAIL_ONLY,
});

// App Clientの作成
const userPoolClient = new cognito.UserPoolClient(this, 'UserPoolClient', {
  userPool,
  userPoolClientName: 'web-client',

  // SPAからの認証に対応
  generateSecret: false,

  // 認証フロー
  authFlows: {
    userPassword: true,
    userSrp: true,
  },

  // トークン有効期限
  accessTokenValidity: cdk.Duration.hours(1),
  idTokenValidity: cdk.Duration.hours(1),
  refreshTokenValidity: cdk.Duration.days(30),
});

npm install amazon-cognito-identity-js

// frontend/src/services/auth.ts

import {
  CognitoUserPool,
  CognitoUser,
  AuthenticationDetails,
} from 'amazon-cognito-identity-js';

// Cognito設定
const poolData = {
  UserPoolId: import.meta.env.VITE_USER_POOL_ID,
  ClientId: import.meta.env.VITE_USER_POOL_CLIENT_ID,
};

const userPool = new CognitoUserPool(poolData);

// ログイン
export function signIn(
  email: string,
  password: string
): Promise<string> {
  return new Promise((resolve, reject) => {
    const user = new CognitoUser({
      Username: email,
      Pool: userPool,
    });

    const authDetails = new AuthenticationDetails({
      Username: email,
      Password: password,
    });

    user.authenticateUser(authDetails, {
      onSuccess: (result) => {
        const token = result.getIdToken().getJwtToken();
        resolve(token);
      },
      onFailure: (err) => {
        reject(err);
      },
    });
  });
}

// ログアウト
export function signOut(): void {
  const user = userPool.getCurrentUser();
  if (user) {
    user.signOut();
  }
}

// 現在のトークンを取得
export function getToken(): Promise<string | null> {
  return new Promise((resolve) => {
    const user = userPool.getCurrentUser();
    if (!user) {
      resolve(null);
      return;
    }

    user.getSession((err: Error | null, session: CognitoUserSession | null) => {
      if (err || !session?.isValid()) {
        resolve(null);
        return;
      }
      resolve(session.getIdToken().getJwtToken());
    });
  });
}

// frontend/src/components/Login.tsx

import { useState } from 'react';
import { signIn } from '../services/auth';

export function Login({ onSuccess }: { onSuccess: () => void }) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    setLoading(true);

    try {
      await signIn(email, password);
      onSuccess();
    } catch (err) {
      setError('メールアドレスまたはパスワードが正しくありません');
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="max-w-md mx-auto">
      <h2 className="text-2xl font-bold mb-4">ログイン</h2>

      {error && (
        <div className="bg-red-100 text-red-700 p-3 rounded mb-4">
          {error}
        </div>
      )}

      <div className="mb-4">
        <label className="block mb-1">メールアドレス</label>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          className="w-full border rounded p-2"
          required
        />
      </div>

      <div className="mb-4">
        <label className="block mb-1">パスワード</label>
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          className="w-full border rounded p-2"
          required
        />
      </div>

      <button
        type="submit"
        disabled={loading}
        className="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 disabled:opacity-50"
      >
        {loading ? 'ログイン中...' : 'ログイン'}
      </button>
    </form>
  );
}

// infrastructure/lib/image-analysis-stack.ts

// Cognitoオーソライザー
const authorizer = new apigateway.CognitoUserPoolsAuthorizer(
  this,
  'CognitoAuthorizer',
  {
    cognitoUserPools: [userPool],
  }
);

// APIエンドポイントに適用
api.root.addResource('chat').addMethod(
  'POST',
  new apigateway.LambdaIntegration(chatFunction),
  {
    authorizer,
    authorizationType: apigateway.AuthorizationType.COGNITO,
  }
);

# backend/chat_handler.py

def handler(event, context):
    # Cognitoのユーザー情報はauthorizerから取得
    claims = event['requestContext']['authorizer']['claims']
    user_id = claims['sub']  # ユーザーの一意ID
    email = claims['email']

    # 以降の処理でユーザーIDを使用
    # ...

1. ユーザーがID/パスワードを入力
         ↓
2. フロントエンドがCognitoに送信
         ↓
3. Cognitoが検証
         ↓
4. 成功 → JWTトークンを発行
         ↓
5. フロントエンドがトークンを保存
         ↓
6. 以降のAPIアクセスにトークンを付与

1. フロントエンドがAPIをコール
   └─ Authorization: Bearer {JWT}
         ↓
2. API Gatewayが受信
         ↓
3. Cognito Authorizerがトークンを検証
   └─ 有効期限は？署名は正しい？
         ↓
4. 検証OK → Lambdaが実行される
   └─ ユーザー情報がeventに含まれる

// frontend/src/services/auth.ts

export function refreshToken(): Promise<string> {
  return new Promise((resolve, reject) => {
    const user = userPool.getCurrentUser();
    if (!user) {
      reject(new Error('ログインしていません'));
      return;
    }

    user.getSession((err: Error | null, session: CognitoUserSession | null) => {
      if (err) {
        reject(err);
        return;
      }

      // セッションが有効なら自動で更新される
      resolve(session.getIdToken().getJwtToken());
    });
  });
}

// トークンを更新してリトライ
try {
  await callApi();
} catch (e) {
  if (e.status === 401) {
    await refreshToken();
    await callApi();  // リトライ
  }
}

// .env.local を確認
VITE_USER_POOL_ID=us-west-2_xxxxxxxx  # リージョン + ID
VITE_USER_POOL_CLIENT_ID=xxxxxxxxxx

Access to fetch at 'https://api...' from origin 'https://app...'
has been blocked by CORS policy

// infrastructure/lib/image-analysis-stack.ts

const api = new apigateway.RestApi(this, 'Api', {
  defaultCorsPreflightOptions: {
    allowOrigins: ['https://your-app.com'],
    allowMethods: ['GET', 'POST', 'PUT', 'DELETE'],
    allowHeaders: ['Content-Type', 'Authorization'],
  },
});

Password did not conform with policy: Password must have uppercase characters

function validatePassword(password: string): string | null {
  if (password.length < 8) {
    return 'パスワードは8文字以上必要です';
  }
  if (!/[A-Z]/.test(password)) {
    return 'パスワードには大文字を含めてください';
  }
  if (!/[a-z]/.test(password)) {
    return 'パスワードには小文字を含めてください';
  }
  if (!/[0-9]/.test(password)) {
    return 'パスワードには数字を含めてください';
  }
  return null;  // OK
}