feat: display user list on table

client/hooks/useCognitoClient.ts

@@ -0,0 +1,26 @@
+import { CognitoIdentityProviderClient } from '@aws-sdk/client-cognito-identity-provider';
+import type { DefaultConfigs } from 'common/types/api';
+import { atom, useAtom, useAtomValue } from 'jotai';
+import { NEXT_PUBLIC_API_ORIGIN } from 'utils/envValues';
+
+const defaultsAtom = atom<DefaultConfigs | { [Key in keyof DefaultConfigs]?: undefined }>({});
+const clientAtom = atom((get) => {
+  const defaults = get(defaultsAtom);
+
+  return new CognitoIdentityProviderClient(
+    defaults.accessKey
+      ? {
+          endpoint: NEXT_PUBLIC_API_ORIGIN,
+          region: defaults.region,
+          credentials: { accessKeyId: defaults.accessKey, secretAccessKey: defaults.secretKey },
+        }
+      : {},
+  );
+});
+
+export const useCognitoClient = () => {
+  const [defaults, setDefaults] = useAtom(defaultsAtom);
+  const cognitoClient = useAtomValue(clientAtom);
+
+  return { defaults, setDefaults, cognitoClient };
+};

client/layouts/BasicHeader/BasicHeader.module.css

@@ -15,7 +15,6 @@
   height: 100%;
   padding: 0 16px;
   margin: 0 auto;
-  user-select: none;
 }
 
 .userBtn {

client/pages/_app.page.tsx

@@ -3,10 +3,12 @@ import '@aws-amplify/ui-react/styles.css';
 import { Amplify } from 'aws-amplify';
 import { I18n } from 'aws-amplify/utils';
 import { AuthLoader } from 'components/Auth/AuthLoader';
+import { useCognitoClient } from 'hooks/useCognitoClient';
 import type { AppProps } from 'next/app';
 import dynamic from 'next/dynamic';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo } from 'react';
 import { apiClient } from 'utils/apiClient';
+import { catchApiErr } from 'utils/catchApiErr';
 import { NEXT_PUBLIC_API_ORIGIN } from 'utils/envValues';
 import '../styles/globals.css';
 
@@ -15,21 +17,29 @@ I18n.setLanguage('ja');
 
 function MyApp({ Component, pageProps }: AppProps) {
   const SafeHydrate = dynamic(() => import('../components/SafeHydrate'), { ssr: false });
-  const [configured, setConfigured] = useState(false);
+  const { defaults, setDefaults } = useCognitoClient();
 
-  useEffect(() => {
-    apiClient.public.defaults.$get().then((defaults) => {
-      Amplify.configure({
-        Auth: { Cognito: { ...defaults, userPoolEndpoint: NEXT_PUBLIC_API_ORIGIN } },
-      });
+  useMemo(() => {
+    if (defaults.userPoolId === undefined) return;
 
-      setConfigured(true);
+    Amplify.configure({
+      Auth: {
+        Cognito: {
+          userPoolId: defaults.userPoolId,
+          userPoolClientId: defaults.userPoolClientId,
+          userPoolEndpoint: NEXT_PUBLIC_API_ORIGIN,
+        },
+      },
     });
+  }, [defaults]);
+
+  useEffect(() => {
+    apiClient.public.defaults.$get().then(setDefaults).catch(catchApiErr);
   }, []);
 
   return (
     <SafeHydrate>
-      {configured && (
+      {defaults.userPoolId && (
         <Authenticator.Provider>
           <AuthLoader />
           <Component {...pageProps} />

client/pages/console/index.page.tsx

@@ -1,12 +1,49 @@
+import type { ListUsersResponse } from '@aws-sdk/client-cognito-identity-provider';
+import { ListUsersCommand } from '@aws-sdk/client-cognito-identity-provider';
 import type { UserEntity } from 'common/types/user';
+import { useCognitoClient } from 'hooks/useCognitoClient';
 import { Layout } from 'layouts/Layout';
+import { useEffect, useState } from 'react';
+import { catchApiErr } from 'utils/catchApiErr';
 import styles from './index.module.css';
 
 const Main = (_: { user: UserEntity }) => {
+  const { defaults, cognitoClient } = useCognitoClient();
+  const [users, setUsers] = useState<ListUsersResponse['Users']>();
+
+  useEffect(() => {
+    cognitoClient
+      .send(new ListUsersCommand({ UserPoolId: defaults.userPoolId }))
+      .then((res) => setUsers(res.Users))
+      .catch(catchApiErr);
+  }, []);
+
   return (
     <div className={styles.container}>
       <div className={styles.main}>
-        <div className={styles.card}></div>
+        <div className={styles.card}>
+          <table>
+            <caption>User List</caption>
+            <thead>
+              <tr>
+                <th>ID</th>
+                <th>Name</th>
+                <th>Email</th>
+                <th>Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              {users?.map((user) => (
+                <tr key={user.Username}>
+                  <td>{user.Attributes?.find((attr) => attr.Name === 'sub')?.Value}</td>
+                  <td>{user.Username}</td>
+                  <td>{user.Attributes?.find((attr) => attr.Name === 'email')?.Value}</td>
+                  <td>{user.UserStatus}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
   );

server/api/public/defaults/controller.ts

@@ -1,11 +1,21 @@
-import { DEFAULT_USER_POOL_CLIENT_ID, DEFAULT_USER_POOL_ID } from 'service/envValues';
-import { returnSuccess } from 'service/returnStatus';
+import {
+  ACCESS_KEY,
+  DEFAULT_USER_POOL_CLIENT_ID,
+  DEFAULT_USER_POOL_ID,
+  REGION,
+  SECRET_KEY,
+} from 'service/envValues';
 import { defineController } from './$relay';
 
 export default defineController(() => ({
-  get: () =>
-    returnSuccess({
+  get: () => ({
+    status: 200,
+    body: {
       userPoolId: DEFAULT_USER_POOL_ID,
       userPoolClientId: DEFAULT_USER_POOL_CLIENT_ID,
-    }),
+      region: REGION,
+      accessKey: ACCESS_KEY,
+      secretKey: SECRET_KEY,
+    },
+  }),
 }));

server/api/public/defaults/index.ts

@@ -1,8 +1,6 @@
 import type { DefineMethods } from 'aspida';
-import type { EntityId } from 'common/types/brandedId';
+import type { DefaultConfigs } from 'common/types/api';
 
 export type Methods = DefineMethods<{
-  get: {
-    resBody: { userPoolId: EntityId['userPool']; userPoolClientId: EntityId['userPoolClient'] };
-  };
+  get: { resBody: DefaultConfigs };
 }>;

server/common/types/api.ts

@@ -0,0 +1,9 @@
+import type { EntityId } from './brandedId';
+
+export type DefaultConfigs = {
+  userPoolId: EntityId['userPool'];
+  userPoolClientId: EntityId['userPoolClient'];
+  region: string;
+  accessKey: string;
+  secretKey: string;
+};