feat: add local group support for OIDC users (#5952)

apps/nextjs/src/app/[locale]/manage/users/groups/[id]/members/_add-group-member.tsx

@@ -4,6 +4,7 @@ import { useCallback } from "react";
 
 import { clientApi } from "@homarr/api/client";
 import { revalidatePathActionAsync } from "@homarr/common/client";
+import type { SupportedAuthProvider } from "@homarr/definitions";
 import { useModalAction } from "@homarr/modals";
 import { useScopedI18n } from "@homarr/translation/client";
 
@@ -13,9 +14,10 @@ import { MobileAffixButton } from "~/components/manage/mobile-affix-button";
 interface AddGroupMemberProps {
   groupId: string;
   presentUserIds: string[];
+  allowedProviders: SupportedAuthProvider[];
 }
 
-export const AddGroupMember = ({ groupId, presentUserIds }: AddGroupMemberProps) => {
+export const AddGroupMember = ({ groupId, presentUserIds, allowedProviders }: AddGroupMemberProps) => {
   const tMembersAdd = useScopedI18n("group.action.addMember");
   const { mutateAsync } = clientApi.group.addMember.useMutation();
   const { openModal } = useModalAction(UserSelectModal);
@@ -32,13 +34,13 @@ export const AddGroupMember = ({ groupId, presentUserIds }: AddGroupMemberProps)
           await revalidatePathActionAsync(`/manage/users/groups/${groupId}}/members`);
         },
         presentUserIds,
-        excludeExternalProviders: true,
+        allowedProviders,
       },
       {
         title: tMembersAdd("label"),
       },
     );
-  }, [openModal, presentUserIds, groupId, mutateAsync, tMembersAdd]);
+  }, [openModal, presentUserIds, groupId, mutateAsync, tMembersAdd, allowedProviders]);
 
   return <MobileAffixButton onClick={handleAddMember}>{tMembersAdd("label")}</MobileAffixButton>;
 };

apps/nextjs/src/app/[locale]/manage/users/groups/[id]/members/page.tsx

@@ -1,12 +1,27 @@
 import { notFound } from "next/navigation";
-import { Alert, Anchor, Center, Group, Stack, Table, TableTbody, TableTd, TableTr, Text, Title } from "@mantine/core";
+import {
+  Alert,
+  Anchor,
+  Center,
+  Group,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTr,
+  Text,
+  Title,
+} from "@mantine/core";
 import { IconExclamationCircle } from "@tabler/icons-react";
 
 import type { RouterOutputs } from "@homarr/api";
 import { api } from "@homarr/api/server";
-import { env } from "@homarr/auth/env";
 import { auth } from "@homarr/auth/next";
-import { isProviderEnabled } from "@homarr/auth/server";
+import {
+  getGroupMemberManagementType,
+  getLocallyManageableProviders,
+  isGroupMembershipManagedLocally,
+} from "@homarr/auth/server";
 import { everyoneGroup } from "@homarr/definitions";
 import { getI18n, getScopedI18n } from "@homarr/translation/server";
 import { Link, SearchInput, UserAvatar } from "@homarr/ui";
@@ -40,14 +55,17 @@ export default async function GroupsDetailPage(props: GroupsDetailPageProps) {
 
   const filteredMembers = searchParams.search
     ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      group.members.filter((member) => member.name?.toLowerCase().includes(searchParams.search!.trim().toLowerCase()))
+      group.members.filter((member) =>
+        member.name
+          ?.toLowerCase()
+          .includes(searchParams.search!.trim().toLowerCase()),
+      )
     : group.members;
 
-  const providerTypes = isProviderEnabled("credentials")
-    ? env.AUTH_PROVIDERS.length > 1
-      ? "mixed"
-      : "credentials"
-    : "external";
+  // "local" = every enabled provider managed locally, "external" = none, "mixed" = some.
+  const managementType = getGroupMemberManagementType();
+  const canManageMembers = managementType !== "external";
+  const allowedProviders = getLocallyManageableProviders();
 
   return (
     <Stack>
@@ -56,17 +74,28 @@ export default async function GroupsDetailPage(props: GroupsDetailPageProps) {
       {isReserved ? (
         <ReservedGroupAlert />
       ) : (
-        providerTypes !== "credentials" && (
-          <Alert variant="light" color="yellow" icon={<IconExclamationCircle size="1rem" stroke={1.5} />}>
-            {t(`group.memberNotice.${providerTypes}`)}
+        managementType !== "local" && (
+          <Alert
+            variant="light"
+            color="yellow"
+            icon={<IconExclamationCircle size="1rem" stroke={1.5} />}
+          >
+            {t(`group.memberNotice.${managementType}`)}
           </Alert>
         )
       )}
 
       <Group justify="space-between">
-        <SearchInput placeholder={`${tMembers("search")}...`} defaultValue={searchParams.search} />
-        {isProviderEnabled("credentials") && !isReserved && (
-          <AddGroupMember groupId={group.id} presentUserIds={group.members.map((member) => member.id)} />
+        <SearchInput
+          placeholder={`${tMembers("search")}...`}
+          defaultValue={searchParams.search}
+        />
+        {canManageMembers && !isReserved && (
+          <AddGroupMember
+            groupId={group.id}
+            presentUserIds={group.members.map((member) => member.id)}
+            allowedProviders={allowedProviders}
+          />
         )}
       </Group>
       {filteredMembers.length === 0 && (
@@ -79,7 +108,12 @@ export default async function GroupsDetailPage(props: GroupsDetailPageProps) {
       <Table striped highlightOnHover>
         <TableTbody>
           {filteredMembers.map((member) => (
-            <Row key={group.id} member={member} groupId={group.id} disabled={isReserved} />
+            <Row
+              key={group.id}
+              member={member}
+              groupId={group.id}
+              disabled={isReserved}
+            />
           ))}
         </TableTbody>
       </Table>
@@ -94,6 +128,8 @@ interface RowProps {
 }
 
 const Row = ({ member, groupId, disabled }: RowProps) => {
+  const canBeRemoved = isGroupMembershipManagedLocally(member.provider);
+
   return (
     <TableTr>
       <TableTd>
@@ -105,7 +141,9 @@ const Row = ({ member, groupId, disabled }: RowProps) => {
         </Group>
       </TableTd>
       <TableTd w={100}>
-        {member.provider === "credentials" && !disabled && <RemoveGroupMember user={member} groupId={groupId} />}
+        {canBeRemoved && !disabled && (
+          <RemoveGroupMember user={member} groupId={groupId} />
+        )}
       </TableTd>
     </TableTr>
   );

apps/nextjs/src/components/access/user-select-modal.tsx

@@ -5,6 +5,7 @@ import { IconCheck } from "@tabler/icons-react";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
+import type { SupportedAuthProvider } from "@homarr/definitions";
 import { useForm } from "@homarr/form";
 import { createModal } from "@homarr/modals";
 import { useI18n } from "@homarr/translation/client";
@@ -12,7 +13,7 @@ import { UserAvatar } from "@homarr/ui";
 
 interface InnerProps {
   presentUserIds: string[];
-  excludeExternalProviders?: boolean;
+  allowedProviders?: SupportedAuthProvider[];
   onSelect: (props: { id: string; name: string; image: string; email: string | null }) => void | Promise<void>;
   confirmLabel?: string;
 }
@@ -24,7 +25,7 @@ interface UserSelectFormType {
 export const UserSelectModal = createModal<InnerProps>(({ actions, innerProps }) => {
   const t = useI18n();
   const { data: users, isPending } = clientApi.user.selectable.useQuery({
-    excludeExternalProviders: innerProps.excludeExternalProviders,
+    providers: innerProps.allowedProviders,
   });
   const [loading, setLoading] = useState(false);
   const form = useForm<UserSelectFormType>();