feat(users): allow profile picture change for external providers (#4275)

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_profile-avatar-form.tsx

@@ -92,38 +92,24 @@ export const UserProfileAvatarForm = ({ user }: UserProfileAvatarForm) => {
     });
   }, [mutate, user.id, openConfirmModal, tManageAvatar]);
 
-  const isCredentialsUser = user.provider === "credentials";
-
   return (
     <Box pos="relative">
-      <Menu
+      <Menu opened={opened} keepMounted onChange={toggle} position="bottom-start" withArrow>
-        opened={opened}
-        keepMounted
-        onChange={isCredentialsUser ? toggle : undefined}
-        position="bottom-start"
-        withArrow
-      >
         <Menu.Target>
-          <UnstyledButton
+          <UnstyledButton onClick={toggle}>
-            component={isCredentialsUser ? undefined : "div"}
-            style={{ cursor: !isCredentialsUser ? "default" : undefined }}
-            onClick={isCredentialsUser ? toggle : undefined}
-          >
             <UserAvatar user={user} size={200} />
-            {isCredentialsUser && (
+            <Button
-              <Button
+              component="div"
-                component="div"
+              pos="absolute"
-                pos="absolute"
+              bottom={0}
-                bottom={0}
+              left={0}
-                left={0}
+              size="compact-md"
-                size="compact-md"
+              fw="normal"
-                fw="normal"
+              variant="default"
-                variant="default"
+              leftSection={<IconPencil size={18} stroke={1.5} />}
-                leftSection={<IconPencil size={18} stroke={1.5} />}
+            >
-              >
+              {t("common.action.edit")}
-                {t("common.action.edit")}
+            </Button>
-              </Button>
-            )}
           </UnstyledButton>
         </Menu.Target>
         <Menu.Dropdown>

packages/api/src/router/user.ts

@@ -146,13 +146,6 @@ export const userRouter = createTRPCRouter({
         });
       }
 
-      if (user.provider !== "credentials") {
-        throw new TRPCError({
-          code: "FORBIDDEN",
-          message: "Profile image can not be changed for users with external providers",
-        });
-      }
-
       await ctx.db
         .update(users)
         .set({

packages/auth/events.ts

@@ -20,6 +20,7 @@ export const createSignInEventHandler = (db: Database): Exclude<NextAuthConfig["
       where: eq(users.id, user.id),
       columns: {
         name: true,
+        image: true,
         colorScheme: true,
       },
     });
@@ -59,6 +60,15 @@ export const createSignInEventHandler = (db: Database): Exclude<NextAuthConfig["
           `Username for user of oidc provider has changed. user=${user.id} old='${dbUser.name}' new='${profileUsername}'`,
         );
       }
+
+      if (
+        typeof profile.picture === "string" &&
+        dbUser.image !== profile.picture &&
+        !dbUser.image?.startsWith("data:")
+      ) {
+        await db.update(users).set({ image: profile.picture }).where(eq(users.id, user.id));
+        logger.info(`Profile picture for user of oidc provider has changed. user=${user.id}'`);
+      }
     }
 
     logger.info(`User '${dbUser.name}' logged in at ${dayjs().format()}`);

packages/auth/providers/oidc/oidc-provider.ts

@@ -61,6 +61,7 @@ export const OidcProvider = (headers: ReadonlyHeaders | null): OIDCConfig<Profil
       id: profile.sub,
       name,
       email: profile.email,
+      image: typeof profile.picture === "string" ? profile.picture : null,
       provider: "oidc",
     };
   },