DefGuard · filipslezaklab · Oct 6, 2025 · Oct 6, 2025
diff --git a/webnext/index.html b/webnext/index.html
@@ -4,7 +4,9 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="application-name" content="Defguard VPN Enrollment Portal" />
   <title>Defguard</title>
+
   <!--Icons-->
   <link rel="icon" type="image/ico" href="/src/assets/icons/favicon.ico" />
   <link rel="icon" type="image/png" sizes="16x16" href="/src/assets/icons/favicon-16x16.png" />
@@ -23,6 +25,22 @@
   <link rel="apple-touch-icon" sizes="180x180" href="/src/assets/icons/app/180.png" />
   <link rel="apple-touch-icon" sizes="256x256" href="/src/assets/icons/app/256.png" />
   <link rel="apple-touch-icon" sizes="512x512" href="/src/assets/icons/app/512.png" />
+
+  <!-- JSON-LD structured data -->
+  <script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "SoftwareApplication",
+    "name": "Defguard Enrollment",
+    "applicationCategory": "Security",
+    "operatingSystem": "Web",
+    "url": "https://defguard.net",
+    "author": {
+      "@type": "Organization",
+      "name": "Defguard"
+    }
+  }
+  </script>
 </head>
 
 <body>

diff --git a/webnext/messages/en.json b/webnext/messages/en.json
@@ -2,6 +2,7 @@
   "$schema": "https://inlang.com/schema/inlang-message-format",
   "misc_or": "or",
   "misc_and": "and",
+  "misc_for": "for",
   "controls_back": "Back",
   "controls_continue": "Continue",
   "controls_cancel": "Cancel",

diff --git a/webnext/package.json b/webnext/package.json
@@ -24,6 +24,7 @@
     "@tanstack/react-router-devtools": "^1.132.2",
     "@uidotdev/usehooks": "^2.4.1",
     "axios": "^1.12.2",
+    "change-case": "^5.4.4",
     "clsx": "^2.1.1",
     "lodash-es": "^4.17.21",
     "motion": "^12.23.21",

diff --git a/webnext/pnpm-lock.yaml b/webnext/pnpm-lock.yaml
diff --git a/webnext/src/pages/ClientDownload/ClientDownloadPage.tsx b/webnext/src/pages/ClientDownload/ClientDownloadPage.tsx
@@ -1,5 +1,5 @@
 import './style.scss';
-import { useNavigate } from '@tanstack/react-router';
+import { useLoaderData, useNavigate } from '@tanstack/react-router';
 import { useMemo, useState } from 'react';
 import { m } from '../../paraglide/messages';
 import { Page } from '../../shared/components/Page/Page';
@@ -25,34 +25,10 @@ import desktopIcon from './assets/pc-tower.png';
 
 // open link in onClick handler
 
-const linuxMenu: MenuItemsGroup[] = [
-  {
-    items: [
-      {
-        text: 'Deb X86',
-        onClick: () => openVirtualLink(externalLink.client.desktop.linux.deb.amd),
-      },
-      {
-        text: 'Deb ARM',
-        onClick: () => openVirtualLink(externalLink.client.desktop.linux.deb.arm),
-      },
-      {
-        text: 'RPM X86',
-        onClick: () => openVirtualLink(externalLink.client.desktop.linux.rpm.amd),
-      },
-      {
-        text: 'RPM ARM',
-        onClick: () => openVirtualLink(externalLink.client.desktop.linux.rpm.arm),
-      },
-      {
-        text: 'ArchLinux',
-        onClick: () => openVirtualLink(externalLink.client.desktop.linux.arch),
-      },
-    ],
-  },
-];
-
 export const ClientDownloadPage = () => {
+  const pageData = useLoaderData({
+    from: '/download',
+  });
   const navigate = useNavigate();
 
   const [confirmModalOpen, setConfirmModalOpen] = useState(false);
@@ -70,16 +46,46 @@ export const ClientDownloadPage = () => {
         items: [
           {
             text: 'Intel',
-            onClick: () => openVirtualLink(externalLink.client.desktop.macos.intel),
+            onClick: () => openVirtualLink(pageData?.macos_amd64),
           },
           {
             text: 'ARM',
-            onClick: () => openVirtualLink(externalLink.client.desktop.macos.arm),
+            onClick: () => openVirtualLink(pageData?.macos_arm64),
+          },
+        ],
+      },
+    ],
+    [pageData],
+  );
+
+  const linuxMenu: MenuItemsGroup[] = useMemo(
+    () => [
+      {
+        items: [
+          {
+            text: 'Deb X86',
+            onClick: () => openVirtualLink(pageData?.deb_amd64),
+          },
+          {
+            text: 'Deb ARM',
+            onClick: () => openVirtualLink(pageData?.deb_arm64),
+          },
+          {
+            text: 'RPM X86',
+            onClick: () => openVirtualLink(pageData?.rpm_amd64),
+          },
+          {
+            text: 'RPM ARM',
+            onClick: () => openVirtualLink(pageData?.rpm_arm64),
+          },
+          {
+            text: 'Arch Linux',
+            onClick: () => openVirtualLink(externalLink.client.desktop.linux.arch),
           },
         ],
       },
     ],
-    [],
+    [pageData],
   );
 
   return (
@@ -103,7 +109,7 @@ export const ClientDownloadPage = () => {
           })}
           buttonText={m.client_download_for({ platform: 'Windows' })}
           buttonIconKind="windows"
-          directLink={externalLink.client.desktop.windows}
+          directLink={pageData?.windows_amd64}
           icon={desktopIcon}
         />
         <Platform

diff --git a/webnext/src/pages/enrollment/ConfigureClient/ConfigureClientPage.tsx b/webnext/src/pages/enrollment/ConfigureClient/ConfigureClientPage.tsx
@@ -1,26 +1,96 @@
 import './style.scss';
 
 import { useLoaderData } from '@tanstack/react-router';
+import { capitalCase } from 'change-case';
 import { QRCodeCanvas } from 'qrcode.react';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { m } from '../../../paraglide/messages';
 import { ContactFooter } from '../../../shared/components/ContactFooter/ContactFooter';
 import { ContainerWithIcon } from '../../../shared/components/ContainerWithIcon/ContainerWithIcon';
 import { Page } from '../../../shared/components/Page/Page';
 import { EnrollmentStep } from '../../../shared/components/Step/Step';
 import { externalLink } from '../../../shared/consts';
 import { Button } from '../../../shared/defguard-ui/components/Button/Button';
+import { ButtonMenu } from '../../../shared/defguard-ui/components/ButtonMenu/MenuButton';
 import { CopyField } from '../../../shared/defguard-ui/components/CopyField/CopyField';
 import { Divider } from '../../../shared/defguard-ui/components/Divider/Divider';
 import { Fold } from '../../../shared/defguard-ui/components/Fold/Fold';
 import { Icon } from '../../../shared/defguard-ui/components/Icon';
+import type { MenuItemsGroup } from '../../../shared/defguard-ui/components/Menu/types';
 import { SizedBox } from '../../../shared/defguard-ui/components/SizedBox/SizedBox';
 import { ThemeSpacing } from '../../../shared/defguard-ui/types';
+import { openVirtualLink } from '../../../shared/utils/openVirtualLink';
 
 export const ConfigureClientPage = () => {
   const pageData = useLoaderData({
     from: '/client-setup',
   });
+  const clientLinks = pageData.clientDownload;
+
+  const clientDownloadMenu = useMemo(
+    (): MenuItemsGroup[] => [
+      {
+        items: [
+          {
+            text: 'Windows',
+            icon: 'windows',
+            onClick: () => openVirtualLink(clientLinks?.windows_amd64),
+          },
+        ],
+      },
+      {
+        header: {
+          text: m.client_download_apple_help_header(),
+        },
+        items: [
+          {
+            icon: 'apple',
+            text: 'Intel',
+            onClick: () => openVirtualLink(clientLinks?.macos_amd64),
+          },
+          {
+            icon: 'apple',
+            text: 'ARM',
+            onClick: () => openVirtualLink(clientLinks?.macos_arm64),
+          },
+        ],
+      },
+      {
+        header: {
+          text: `${capitalCase(m.misc_for())} Linux`,
+        },
+        items: [
+          {
+            icon: 'linux',
+            text: 'Deb X86',
+            onClick: () => openVirtualLink(clientLinks?.deb_amd64),
+          },
+          {
+            icon: 'linux',
+            text: 'Deb ARM',
+            onClick: () => openVirtualLink(clientLinks?.deb_arm64),
+          },
+          {
+            icon: 'linux',
+            text: 'RPM X86',
+            onClick: () => openVirtualLink(clientLinks?.rpm_amd64),
+          },
+          {
+            icon: 'linux',
+            text: 'RPM ARM',
+            onClick: () => openVirtualLink(clientLinks?.rpm_arm64),
+          },
+          {
+            icon: 'linux',
+            text: 'Arch Linux',
+            onClick: () => openVirtualLink(externalLink.client.desktop.linux.arch),
+          },
+        ],
+      },
+    ],
+    [clientLinks],
+  );
+
   const [manualOpen, setManualOpen] = useState(false);
 
   const deepLink = () =>
@@ -60,6 +130,13 @@ export const ConfigureClientPage = () => {
               iconRight="open-in-new-window"
             />
           </a>
+          <ButtonMenu
+            variant="outlined"
+            menuItems={clientDownloadMenu}
+            text={m.client_setup_desktop_auto_button_download()}
+            iconRight="arrow-small"
+            iconRightRotation="down"
+          />
         </div>
         <Divider orientation="horizontal" />
         <Fold open={manualOpen} contentClassName="manual">

diff --git a/webnext/src/routes/client-setup.tsx b/webnext/src/routes/client-setup.tsx
@@ -3,6 +3,7 @@ import z from 'zod';
 import { ConfigureClientPage } from '../pages/enrollment/ConfigureClient/ConfigureClientPage';
 import { api } from '../shared/api/api';
 import type { EnrollmentStartResponse } from '../shared/api/types';
+import { updateServiceApi } from '../shared/api/update-service';
 import { isPresent } from '../shared/defguard-ui/utils/isPresent';
 import { useEnrollmentStore } from '../shared/hooks/useEnrollmentStore';
 
@@ -38,6 +39,7 @@ export const Route = createFileRoute('/client-setup')({
     };
   },
   loader: async ({ context: { openid } }) => {
+    const clientDownload = await updateServiceApi.getClientArtifacts().catch(() => null);
     if (openid) {
       try {
         const openIdResponse = await api.openId.enrollmentCallback.callbackFn({
@@ -68,6 +70,7 @@ export const Route = createFileRoute('/client-setup')({
     }
     const state = useEnrollmentStore.getState();
     return {
+      clientDownload,
       token: state.token as string,
       enrollmentData: state.enrollmentData as EnrollmentStartResponse,
     };

diff --git a/webnext/src/routes/download.tsx b/webnext/src/routes/download.tsx
@@ -1,6 +1,13 @@
 import { createFileRoute } from '@tanstack/react-router';
 import { ClientDownloadPage } from '../pages/ClientDownload/ClientDownloadPage';
+import { updateServiceApi } from '../shared/api/update-service';
 
 export const Route = createFileRoute('/download')({
   component: ClientDownloadPage,
+  loader: async () => {
+    const clientVersionData = await updateServiceApi
+      .getClientArtifacts()
+      .catch(() => null);
+    return clientVersionData;
+  },
 });
diff --git a/webnext/src/shared/api/update-service.ts b/webnext/src/shared/api/update-service.ts
@@ -0,0 +1,39 @@
+import axios from 'axios';
+import qs from 'qs';
+
+const baseUrl = import.meta.env.VITE_UPDATE_BASE_URL as string | undefined;
+
+const client = axios.create({
+  baseURL: baseUrl ?? 'https://update-service-dev.defguard.net/api',
+  headers: { 'Content-Type': 'application/json' },
+  paramsSerializer: {
+    serialize: (params) =>
+      qs.stringify(params, {
+        arrayFormat: 'repeat',
+      }),
+  },
+});
+
+export type ClientVersionCheck = {
+  windows_amd64?: string;
+  deb_amd64?: string;
+  deb_arm64?: string;
+  rpm_amd64?: string;
+  rpm_arm64?: string;
+  macos_amd64?: string;
+  macos_arm64?: string;
+};
+
+const updateServiceApi = {
+  getClientArtifacts: () =>
+    client
+      .get<ClientVersionCheck>('/update/artifacts', {
+        params: {
+          product: 'defguard-client',
+          source: 'enrollment',
+        },
+      })
+      .then((response) => response.data),
+} as const;
+
+export { updateServiceApi };
diff --git a/webnext/src/shared/defguard-ui/components/ButtonMenu/MenuButton.tsx b/webnext/src/shared/defguard-ui/components/ButtonMenu/MenuButton.tsx
@@ -58,6 +58,9 @@ export const ButtonMenu = ({
             itemGroups={menuItems}
             ref={refs.setFloating}
             style={floatingStyles}
+            onClose={() => {
+              setOpen(false);
+            }}
             {...getFloatingProps()}
           />
         </FloatingPortal>