feat: use displayName and photoUrl

README.md

@@ -108,6 +108,9 @@ S3_BUCKET=
 S3_ENDPOINT=
 S3_REGION=
 S3_SECRET_KEY=
+COGNITO_ACCESS_KEY= # optional
+COGNITO_SECRET_KEY= # optional
+COGNITO_REGION= # optional
 PORT= # optional
 ```
 

client/layouts/basicHeader/BasicHeader.module.css

@@ -59,6 +59,13 @@
   background: #f0f0f0;
 }
 
+.photo {
+  width: 24px;
+  height: 24px;
+  background-size: cover;
+  border-radius: 50%;
+}
+
 .menu {
   position: absolute;
   top: 100%;

client/layouts/basicHeader/BasicHeader.tsx

@@ -54,8 +54,15 @@ export const BasicHeader = (props: { user: UserDto }) => {
         </Link>
         <div className={styles.btnContainer}>
           <div className={styles.userBtn} onClick={(e) => setAnchorEl(e.currentTarget)}>
-            <HumanIcon size={18} fill="#336" />
-            {props.user.signInName}
+            {props.user.photoUrl ? (
+              <div
+                className={styles.photo}
+                style={{ backgroundImage: `url(${props.user.photoUrl})` }}
+              />
+            ) : (
+              <HumanIcon size={18} fill="#336" />
+            )}
+            {props.user.displayName}
           </div>
           <Menu open={Boolean(anchorEl)} onClose={() => setAnchorEl(null)}>
             <MenuItem onClick={() => setOpenProfile(true)}>Your profile</MenuItem>
@@ -67,7 +74,9 @@ export const BasicHeader = (props: { user: UserDto }) => {
       <Modal open={openProfile} onClose={() => setOpenProfile(false)}>
         <ModalHeader text="Your profile" />
         <ModalBody>
-          <div>User name: {props.user.signInName}</div>
+          <div>Sign in name: {props.user.signInName}</div>
+          <Spacer axis="y" size={8} />
+          <div>Display name: {props.user.displayName}</div>
           <Spacer axis="y" size={8} />
           <div>Email: {props.user.email}</div>
         </ModalBody>

client/pages/_app.page.tsx

@@ -31,10 +31,9 @@ function MyApp({ Component, pageProps }: AppProps) {
             NEXT_PUBLIC_OAUTH_DOMAIN === undefined
               ? undefined
               : {
-                  email: true,
                   oauth: {
                     domain: NEXT_PUBLIC_OAUTH_DOMAIN,
-                    scopes: ['openid'],
+                    scopes: ['openid', 'profile', 'aws.cognito.signin.user.admin'],
                     redirectSignIn: [location.origin],
                     redirectSignOut: [location.origin],
                     responseType: 'code',

client/pages/index.page.tsx

@@ -7,7 +7,7 @@ const Home = () => {
     <Layout
       render={(user) => (
         <div className={styles.container}>
-          <div className={styles.title}>Hello {user.signInName}!</div>
+          <div className={styles.title}>Hello {user.displayName}!</div>
           <TaskList />
         </div>
       )}

server/domain/user/repository/userQuery.ts

@@ -1,13 +1,12 @@
 import type { Prisma, User } from '@prisma/client';
 import { brandedId } from 'service/brandedId';
-import { z } from 'zod';
 import type { UserEntity } from '../model/userType';
 
 const toUserEntity = (prismaUser: User): UserEntity => ({
   id: brandedId.user.entity.parse(prismaUser.id),
   email: prismaUser.email,
   signInName: prismaUser.signInName,
-  displayName: z.string().parse(prismaUser.displayName),
+  displayName: prismaUser.displayName,
   photoUrl: prismaUser.photoUrl ?? undefined,
   createdTime: prismaUser.createdAt.getTime(),
 });

server/prisma/schema.prisma

@@ -11,7 +11,7 @@ model User {
   id          String   @id
   email       String
   signInName  String
-  displayName String?
+  displayName String
   photoUrl    String?
   createdAt   DateTime
   tasks       Task[]

server/prisma/seed.ts

@@ -1,17 +1,8 @@
 import type { Prisma } from '@prisma/client';
 import { prismaClient, transaction } from 'service/prismaClient';
 
-const someFn = async (tx: Prisma.TransactionClient): Promise<void> => {
+const someFn = async (_tx: Prisma.TransactionClient): Promise<void> => {
   // seeder script
-  const users = await tx.user.findMany({ where: { displayName: null } });
-
-  if (users.length > 0) {
-    await Promise.all(
-      users.map((user) =>
-        tx.user.update({ where: { id: user.id }, data: { displayName: user.signInName } }),
-      ),
-    );
-  }
 };
 
 transaction('RepeatableRead', (tx) => Promise.all([someFn(tx)]))