div diary 20251121

i studied the auth/resouce.ts and the corresponding frontend.

// app/page.tsx

'use client'
import { Authenticator } from '@aws-amplify/ui-react';
// 💡 以下は、ご自身のプロジェクト構成に合わせてインポートパスを確認してください
import NotesList from '../app/dashboard/page'; 
import UserProfileEditor from './setting/userProfileEditor';

// 💡 stylesのインポートも、ご自身のファイルパスに合わせて確認してください
import styles from './app.module.css';

export default function DashboardPage() {
  return (
    <Authenticator>
      {({ signOut, user }) => {

        // --- ログイン中のユーザー情報をコンソールに出力 ---
        console.log("--- ログイン中の User オブジェクト ---");
        // この user オブジェクトに、ユーザー情報や属性が含まれています
        console.log(user); 
        console.log("---------------------------------------");

        // --- 表示名の取得 ---
        // user?.attributes?.nickname を優先的に使用し、存在しない場合は 'Guest' を表示名とする
        // user?.username は sub の値（UUID）になるため、ここでは nickname を使用します
        const displayNickname = user?.attributes?.nickname ?? 'Guest';

        return (
          <main>
            {/* <h1>Hello, {user?.username}!</h1> をニックネーム表示に変更 */}
            <h1>Hello, {displayNickname}!</h1>

            <UserProfileEditor user={user} />

            <NotesList /> {/* 👈 NotesListコンポーネントを配置 */}

            <button 
              className={styles.signOutButton} 
              onClick={signOut}
            >
              sign out
            </button>
          </main>
        );
      }}
    </Authenticator>
  );
}

by this console.log, the result is following,

{
    "username": "******",
    "userId": "******",
    "signInDetails": {
        "loginId": "***mail.adress",
        "authFlowType": "USER_SRP_AUTH"
    }
}

this object don't have the "attribute", it should be. now i'm confirming. i guess need to use import { fetchUserAttributes } from 'aws-amplify/auth'; current spec.