1. 本日の概要

本日は、アサーションCheckのAmazon Cognitoを利用した認証機能について、ログイン・ログアウト処理とログイン状態に応じたUI切り替えを実装した。

また、事前に作成していたUI設計書と画面遷移図を確認し、今後の画面構成や開発方針についても整理した。

本日の主な作業

• Cognitoを利用したログイン処理の実装
• ログイン画面の実装
• Cognitoを利用したログアウト処理の実装
• ログアウトボタンの実装
• ログイン状態を取得する処理の実装
• ログイン状態に応じたUI切り替え
• UI設計書・画面遷移図の確認
• 今後の実装方針の整理

2. ログイン機能の実装

実装ファイル

frontend/src/
├── app/
│   └── login/
│       └── page.tsx
├── components/
│   └── auth/
│       └── LoginForm.tsx
└── lib/
    └── auth/
        └── login.ts

login.ts

AWS AmplifyのsignIn()を利用し、Amazon Cognitoへのログイン処理を実装した。

import { signIn } from "aws-amplify/auth";

// ログイン時に必要な入力情報
type LoginInput = {
  email: string;
  password: string;
};

// Cognitoにメールアドレスとパスワードを送信して認証する
export async function loginUser({ email, password }: LoginInput) {
  const result = await signIn({
    username: email,
    password,
  });

  return result;
}

LoginForm.tsx