feat: mcp oauth

2026-08-28 01:07:08 +08:00 · 2026-08-24 02:15:38 +01:00
parent 911c1057d6
commit ca8e492d30
47 changed files with 1756 additions and 71 deletions
@@ -706,9 +706,8 @@
  "Enable the MCP server to allow AI assistants and tools to interact with your workspace content.": "Enable the MCP server to allow AI assistants and tools to interact with your workspace content.",
  "MCP is only available in the Docmost enterprise edition. Contact sales@docmost.com.": "MCP is only available in the Docmost enterprise edition. Contact sales@docmost.com.",
  "MCP Server URL": "MCP Server URL",
-  "Use your API key for authentication. You can manage API keys in your account settings.": "Use your API key for authentication. You can manage API keys in your account settings.",
+  "Connect with your Docmost account via OAuth when your client supports it, or use an API key from your account settings.": "Connect with your Docmost account via OAuth when your client supports it, or use an API key from your account settings.",
  "Supported tools": "Supported tools",
-  "Your workspace has MCP enabled. Use your API key to connect AI assistants.": "Your workspace has MCP enabled. Use your API key to connect AI assistants.",
  "MCP server URL:": "MCP server URL:",
  "Learn more": "Learn more",
  "Manage API keys for all users in the workspace. View the <anchor>API documentation</anchor> for usage details.": "Manage API keys for all users in the workspace. View the <anchor>API documentation</anchor> for usage details.",
@@ -1302,5 +1301,36 @@
  "Error loading attachments.": "Error loading attachments.",
  "No attachments on this page yet.": "No attachments on this page yet.",
  "Uploaded by {{name}}": "Uploaded by {{name}}",
-  "Download {{name}}": "Download {{name}}"
+  "Download {{name}}": "Download {{name}}",
+  "Access revoked": "Access revoked",
+  "Authorize application": "Authorize application",
+  "{{name}} wants to access {{workspace}}": "{{name}} wants to access {{workspace}}",
+  "Not you? Switch account": "Not you? Switch account",
+  "This application will be able to:": "This application will be able to:",
+  "Write": "Write",
+  "Invalid authorization request": "Invalid authorization request",
+  "Authorize": "Authorize",
+  "Application": "Application",
+  "Permissions": "Permissions",
+  "Authorized": "Authorized",
+  "Revoke access": "Revoke access",
+  "Revoke access for {{name}}": "Revoke access for {{name}}",
+  "Are you sure you want to revoke access for {{name}}? The application will no longer be able to access your account.": "Are you sure you want to revoke access for {{name}}? The application will no longer be able to access your account.",
+  "Something went wrong. Please try again.": "Something went wrong. Please try again.",
+  "Trusted applications": "Trusted applications",
+  "Remove {{name}}": "Remove {{name}}",
+  "This origin is already trusted.": "This origin is already trusted.",
+  "Trusted application name": "Trusted application name",
+  "Trusted application origin": "Trusted application origin",
+  "I recognize this application and want to continue": "I recognize this application and want to continue",
+  "You will be redirected to": "You will be redirected to",
+  "View content without making changes.": "View content without making changes.",
+  "Create and modify content.": "Create and modify content.",
+  "This application is not on your workspace's trusted list. Authorize only if you recognize it.": "This application is not on your workspace's trusted list. Authorize only if you recognize it.",
+  "Applications with these callback origins are trusted. Members will not see a warning when authorizing them.": "Applications with these callback origins are trusted. Members will not see a warning when authorizing them.",
+  "Enter the app's callback origin, e.g. https://app.yourcompany.com": "Enter the app's callback origin, e.g. https://app.yourcompany.com",
+  "Applications and AI assistants you have authorized to access your account.": "Applications and AI assistants you have authorized to access your account.",
+  "Your workspace has MCP enabled. Connect AI assistants with your Docmost account, or with an API key.": "Your workspace has MCP enabled. Connect AI assistants with your Docmost account, or with an API key.",
+  "Authorized apps": "Authorized apps",
+  "No authorized apps yet.": "No authorized apps yet."
 }
@@ -47,6 +47,7 @@ import FavoritesPage from "@/pages/favorites/favorites-page";
 import AiChat from "@/ee/ai-chat/pages/ai-chat.tsx";
 import VerifyEmail from "@/ee/pages/verify-email.tsx";
 import LabelPage from "@/pages/label/label-page";
+import OAuthConsent from "@/ee/oauth/pages/oauth-consent.tsx";

 export default function App() {
  const { t } = useTranslation();
@@ -63,6 +64,7 @@ export default function App() {
        <Route path={"/password-reset"} element={<PasswordReset />} />
        <Route path={"/login/mfa"} element={<MfaChallengePage />} />
        <Route path={"/login/mfa/setup"} element={<MfaSetupRequiredPage />} />
+        <Route path={"/oauth/consent"} element={<OAuthConsent />} />

        {!isCloud() && (
          <Route path={"/setup/register"} element={<SetupWorkspace />} />
@@ -116,6 +118,10 @@ export default function App() {
              element={<AccountPreferences />}
            />
            <Route path={"account/api-keys"} element={<UserApiKeys />} />
+            <Route
+              path={"account/api-keys/authorized-apps"}
+              element={<UserApiKeys />}
+            />
            <Route path={"workspace"} element={<WorkspaceSettings />} />
            <Route path={"members"} element={<WorkspaceMembers />} />
            <Route path={"api-keys"} element={<WorkspaceApiKeys />} />
@@ -1,7 +1,9 @@
 import {
  Anchor,
+  Button,
  Group,
  List,
+  Table,
  Text,
  Switch,
  TextInput,
@@ -15,14 +17,33 @@ import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
 import React, { useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { updateWorkspace } from "@/features/workspace/services/workspace-service.ts";
+import { ITrustedOAuthClient } from "@/features/workspace/types/workspace.types.ts";
 import { notifications } from "@mantine/notifications";
 import { useHasFeature } from "@/ee/hooks/use-feature";
 import { Feature } from "@/ee/features";
 import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label";
 import { getAppUrl } from "@/lib/config.ts";
-import { IconCheck, IconCopy, IconInfoCircle } from "@tabler/icons-react";
+import {
+  IconCheck,
+  IconCopy,
+  IconInfoCircle,
+  IconTrash,
+} from "@tabler/icons-react";
 import { CopyButton } from "@/components/common/copy-button.tsx";

+// Mirrors the server rule: an exact https origin, tolerating only a trailing slash.
+function parseTrustedOrigin(value: string): string | null {
+  const input = value.trim().toLowerCase();
+  try {
+    const url = new URL(input);
+    if (url.protocol !== "https:") return null;
+    if (input !== url.origin && input !== `${url.origin}/`) return null;
+    return url.origin;
+  } catch {
+    return null;
+  }
+}
+
 export default function McpSettings() {
  const { t } = useTranslation();
  const [workspace, setWorkspace] = useAtom(workspaceAtom);
@@ -30,7 +51,14 @@ export default function McpSettings() {
  const hasAccess = useHasFeature(Feature.MCP);
  const upgradeLabel = useUpgradeLabel();

+  const [newClientName, setNewClientName] = useState("");
+  const [newClientOrigin, setNewClientOrigin] = useState("");
+
  const mcpUrl = `${getAppUrl()}/mcp`;
+  const storedTrustedClients = workspace?.trustedOauthClients;
+  const trustedClients = Array.isArray(storedTrustedClients)
+    ? storedTrustedClients
+    : [];

  const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const value = event.currentTarget.checked;
@@ -46,6 +74,51 @@ export default function McpSettings() {
    }
  };

+  const saveTrustedClients = async (next: ITrustedOAuthClient[]) => {
+    try {
+      const updatedWorkspace = await updateWorkspace({
+        trustedOauthClients: next,
+      });
+      setWorkspace(updatedWorkspace);
+      return true;
+    } catch (err) {
+      notifications.show({
+        message: err?.response?.data?.message,
+        color: "red",
+      });
+      return false;
+    }
+  };
+
+  const handleAddTrustedClient = async () => {
+    const name = newClientName.trim();
+    const origin = parseTrustedOrigin(newClientOrigin);
+    if (!origin) {
+      notifications.show({
+        message: t("Enter the app's callback origin, e.g. https://app.yourcompany.com"),
+        color: "red",
+      });
+      return;
+    }
+    if (trustedClients.some((client) => client.origin.toLowerCase() === origin)) {
+      notifications.show({
+        message: t("This origin is already trusted."),
+        color: "red",
+      });
+      return;
+    }
+    if (await saveTrustedClients([...trustedClients, { origin, name }])) {
+      setNewClientName("");
+      setNewClientOrigin("");
+    }
+  };
+
+  const handleRemoveTrustedClient = (origin: string) => {
+    void saveTrustedClients(
+      trustedClients.filter((client) => client.origin !== origin),
+    );
+  };
+
  return (
    <Stack gap="lg">
      {!hasAccess && (
@@ -108,7 +181,7 @@ export default function McpSettings() {
          </Group>
          <Text size="sm" c="dimmed" mt="xs">
            {t(
-              "Use your API key for authentication. You can manage API keys in your account settings.",
+              "Connect with your Docmost account via OAuth when your client supports it, or use an API key from your account settings.",
            )}
          </Text>

@@ -149,6 +222,81 @@ export default function McpSettings() {
              </List.Item>
            </List>
          </div>
+
+          <div>
+            <Text size="sm" fw={500} mt="md" mb={4}>
+              {t("Trusted applications")}
+            </Text>
+            <Text size="sm" c="dimmed" mb="xs">
+              {t(
+                "Applications with these callback origins are trusted. Members will not see a warning when authorizing them.",
+              )}
+            </Text>
+
+            {trustedClients.length > 0 && (
+              <Table verticalSpacing="xs" mb="xs">
+                <Table.Tbody>
+                  {trustedClients.map((client) => (
+                    <Table.Tr key={client.origin}>
+                      <Table.Td>
+                        <Text size="sm" fw={500}>
+                          {client.name}
+                        </Text>
+                      </Table.Td>
+                      <Table.Td>
+                        <Text size="sm" c="dimmed">
+                          {client.origin}
+                        </Text>
+                      </Table.Td>
+                      <Table.Td w={40}>
+                        <ActionIcon
+                          variant="subtle"
+                          color="red"
+                          aria-label={t("Remove {{name}}", {
+                            name: client.name,
+                          })}
+                          onClick={() =>
+                            handleRemoveTrustedClient(client.origin)
+                          }
+                        >
+                          <IconTrash size={16} />
+                        </ActionIcon>
+                      </Table.Td>
+                    </Table.Tr>
+                  ))}
+                </Table.Tbody>
+              </Table>
+            )}
+
+            <Group gap="xs">
+              <TextInput
+                value={newClientName}
+                onChange={(event) =>
+                  setNewClientName(event.currentTarget.value)
+                }
+                placeholder={t("Name")}
+                aria-label={t("Trusted application name")}
+                maxLength={64}
+                style={{ flex: 1 }}
+              />
+              <TextInput
+                value={newClientOrigin}
+                onChange={(event) =>
+                  setNewClientOrigin(event.currentTarget.value)
+                }
+                placeholder="https://app.yourcompany.com"
+                aria-label={t("Trusted application origin")}
+                style={{ flex: 2 }}
+              />
+              <Button
+                variant="default"
+                onClick={handleAddTrustedClient}
+                disabled={!newClientName.trim() || !newClientOrigin.trim()}
+              >
+                {t("Add")}
+              </Button>
+            </Group>
+          </div>
        </div>
      )}
    </Stack>
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Anchor, Alert, Button, Group, Space, Text } from "@mantine/core";
+import { Anchor, Alert, Button, Group, Space, Tabs, Text } from "@mantine/core";
 import { IconInfoCircle } from "@tabler/icons-react";
 import { Trans, useTranslation } from "react-i18next";
 import SettingsTitle from "@/components/settings/settings-title";
@@ -17,6 +17,8 @@ import { useAtom } from "jotai";
 import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
 import useUserRole from "@/hooks/use-user-role.tsx";
 import { DocumentTitle } from "@/components/ui/document-title.tsx";
+import { useLocation, useNavigate } from "react-router-dom";
+import { AuthorizedAppsPanel } from "@/ee/oauth/components/authorized-apps-panel.tsx";

 export default function UserApiKeys() {
  const { t } = useTranslation();
@@ -29,6 +31,11 @@ export default function UserApiKeys() {
  const { data, isLoading } = useGetApiKeysQuery({ cursor });
  const [workspace] = useAtom(workspaceAtom);
  const { isAdmin } = useUserRole();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const activeTab = location.pathname.endsWith("/authorized-apps")
+    ? "authorized-apps"
+    : "api-keys";
  const mcpEnabled = workspace?.settings?.ai?.mcp === true;
  const restrictToAdmins = workspace?.settings?.api?.restrictToAdmins === true;
  const canCreate = !restrictToAdmins || isAdmin;
@@ -47,26 +54,27 @@ export default function UserApiKeys() {
    setRevokeModalOpened(true);
  };

+  const handleTabChange = (value: string | null) => {
+    navigate(
+      value === "authorized-apps"
+        ? "/settings/account/api-keys/authorized-apps"
+        : "/settings/account/api-keys",
+    );
+  };
+
  return (
    <>
-      <DocumentTitle title={t("API keys")} />
+      <DocumentTitle
+        title={activeTab === "authorized-apps" ? t("Authorized apps") : t("API keys")}
+      />

      <SettingsTitle title={t("API keys")} />

-      <Text size="sm" c="dimmed" mb="md">
-        <Trans
-          i18nKey="View the <anchor>API documentation</anchor> for usage details."
-          components={{
-            anchor: <Anchor href="https://docmost.com/api-docs" target="_blank" size="sm" />,
-          }}
-        />
-      </Text>
-
-      {mcpEnabled && canCreate && (
+      {mcpEnabled && (
        <Alert variant="light" color="blue" mb="md" p="sm" icon={<IconInfoCircle />}>
          <Text size="sm">
            {t(
-              "Your workspace has MCP enabled. Use your API key to connect AI assistants.",
+              "Your workspace has MCP enabled. Connect AI assistants with your Docmost account, or with an API key.",
            )}{" "}
            <Anchor
              href="https://docmost.com/docs/user-guide/mcp"
@@ -85,37 +93,70 @@ export default function UserApiKeys() {
        </Alert>
      )}

-      {canCreate ? (
-        <Group justify="flex-end" mb="md">
-          <Button onClick={() => setCreateModalOpened(true)}>
-            {t("Create API Key")}
-          </Button>
-        </Group>
-      ) : restrictToAdmins ? (
-        <Alert variant="light" color="yellow" mb="md" p="sm" icon={<IconInfoCircle />}>
-          <Text size="sm">
-            {t("API key creation is restricted to admins by your workspace administrator.")}
+      <Tabs color="dark" value={activeTab} onChange={handleTabChange}>
+        <Tabs.List>
+          <Tabs.Tab fw={500} value="api-keys">
+            {t("API keys")}
+          </Tabs.Tab>
+          <Tabs.Tab fw={500} value="authorized-apps">
+            {t("Authorized apps")}
+          </Tabs.Tab>
+        </Tabs.List>
+
+        <Tabs.Panel value="api-keys" pt="md">
+
+        <Group justify="space-between" align="center" mb="md">
+          <Text size="sm" c="dimmed">
+            <Trans
+              i18nKey="View the <anchor>API documentation</anchor> for usage details."
+              components={{
+                anchor: <Anchor href="https://docmost.com/api-docs" target="_blank" size="sm" />,
+              }}
+            />
          </Text>
-        </Alert>
-      ) : null}

-      <ApiKeyTable
-        apiKeys={data?.items || []}
-        isLoading={isLoading}
-        onUpdate={handleUpdate}
-        onRevoke={handleRevoke}
-      />
+          {canCreate && (
+            <Button
+              onClick={() => setCreateModalOpened(true)}
+              style={{ flexShrink: 0 }}
+            >
+              {t("Create API Key")}
+            </Button>
+          )}
+        </Group>

-      <Space h="md" />
+        {!canCreate && restrictToAdmins && (
+          <Alert variant="light" color="yellow" mb="md" p="sm" icon={<IconInfoCircle />}>
+            <Text size="sm">
+              {t("API key creation is restricted to admins by your workspace administrator.")}
+            </Text>
+          </Alert>
+        )}

-      {data?.items.length > 0 && (
-        <Paginate
-          hasPrevPage={data?.meta?.hasPrevPage}
-          hasNextPage={data?.meta?.hasNextPage}
-          onNext={() => goNext(data?.meta?.nextCursor)}
-          onPrev={goPrev}
+        <ApiKeyTable
+          apiKeys={data?.items || []}
+          isLoading={isLoading}
+          onUpdate={handleUpdate}
+          onRevoke={handleRevoke}
        />
-      )}
+
+        <Space h="md" />
+
+        {data?.items.length > 0 && (
+          <Paginate
+            hasPrevPage={data?.meta?.hasPrevPage}
+            hasNextPage={data?.meta?.hasNextPage}
+            onNext={() => goNext(data?.meta?.nextCursor)}
+            onPrev={goPrev}
+          />
+        )}
+
+        </Tabs.Panel>
+
+        <Tabs.Panel value="authorized-apps" pt="md">
+          <AuthorizedAppsPanel />
+        </Tabs.Panel>
+      </Tabs>

      <CreateApiKeyModal
        opened={createModalOpened}
@@ -22,4 +22,5 @@ export const Feature = {
  PERSONAL_SPACES: 'spaces:personal',
  DOCX_EXPORT: 'export:docx',
  BASES: 'bases',
+  OAUTH: 'oauth',
 } as const;
@@ -0,0 +1,19 @@
+import { Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { OAuthGrantsTable } from "@/ee/oauth/components/oauth-grants-table";
+import { useOAuthGrantsQuery } from "@/ee/oauth/queries/oauth-query";
+
+export function AuthorizedAppsPanel() {
+  const { t } = useTranslation();
+  const { data, isLoading } = useOAuthGrantsQuery();
+
+  return (
+    <>
+      <Text size="sm" c="dimmed" mb="md">
+        {t("Applications and AI assistants you have authorized to access your account.")}
+      </Text>
+
+      <OAuthGrantsTable grants={data || []} isLoading={isLoading} />
+    </>
+  );
+}
@@ -0,0 +1,178 @@
+import { ActionIcon, Badge, Group, Skeleton, Table, Text, Tooltip } from "@mantine/core";
+import { IconTrash } from "@tabler/icons-react";
+import { modals } from "@mantine/modals";
+import { useTranslation } from "react-i18next";
+import NoTableResults from "@/components/common/no-table-results";
+import { formatLocalized, useDateFnsLocale } from "@/lib/date-locale.ts";
+import { IOAuthGrant } from "@/ee/oauth/types/oauth.types";
+import { useRevokeOAuthGrantMutation } from "@/ee/oauth/queries/oauth-query";
+
+// Callback hosts identify the app; the full URL belongs on the consent screen.
+function callbackHosts(redirectUris: string[] = []): string[] {
+  const hosts = redirectUris.map((uri) => {
+    try {
+      const url = new URL(uri);
+      return url.protocol === "http:" || url.protocol === "https:"
+        ? url.host
+        : url.protocol;
+    } catch {
+      return uri;
+    }
+  });
+  return Array.from(new Set(hosts));
+}
+
+type OAuthGrantsTableProps = {
+  grants: IOAuthGrant[];
+  isLoading?: boolean;
+};
+
+function TableSkeleton() {
+  return (
+    <>
+      {Array.from({ length: 3 }).map((_, i) => (
+        <Table.Tr key={i}>
+          <Table.Td>
+            <Skeleton height={14} width={140} />
+          </Table.Td>
+          <Table.Td>
+            <Group gap={4}>
+              <Skeleton height={20} width={50} />
+              <Skeleton height={20} width={55} />
+            </Group>
+          </Table.Td>
+          <Table.Td>
+            <Skeleton height={14} width={90} />
+          </Table.Td>
+          <Table.Td>
+            <Skeleton height={14} width={90} />
+          </Table.Td>
+          <Table.Td>
+            <Skeleton height={28} width={28} circle />
+          </Table.Td>
+        </Table.Tr>
+      ))}
+    </>
+  );
+}
+
+export function OAuthGrantsTable({ grants, isLoading }: OAuthGrantsTableProps) {
+  const { t } = useTranslation();
+  const locale = useDateFnsLocale();
+  const revokeMutation = useRevokeOAuthGrantMutation();
+
+  const scopeMeta: Record<string, { color: string; label: string }> = {
+    read: { color: "blue", label: t("Read") },
+    write: { color: "orange", label: t("Write") },
+  };
+
+  const formatDate = (date: string | null) => {
+    if (!date) return t("Never");
+    return formatLocalized(date, "MMM dd, yyyy", "PP", locale);
+  };
+
+  const openRevokeModal = (grant: IOAuthGrant) =>
+    modals.openConfirmModal({
+      title: t("Revoke access"),
+      centered: true,
+      children: (
+        <Text size="sm">
+          {t(
+            "Are you sure you want to revoke access for {{name}}? The application will no longer be able to access your account.",
+            { name: grant.clientName },
+          )}
+        </Text>
+      ),
+      labels: { confirm: t("Revoke access"), cancel: t("Cancel") },
+      confirmProps: { color: "red" },
+      onConfirm: () => revokeMutation.mutate(grant.id),
+    });
+
+  return (
+    <Table.ScrollContainer minWidth={600}>
+      <Table highlightOnHover verticalSpacing="sm">
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th>{t("Application")}</Table.Th>
+            <Table.Th>{t("Permissions")}</Table.Th>
+            <Table.Th>{t("Authorized")}</Table.Th>
+            <Table.Th>{t("Last used")}</Table.Th>
+            <Table.Th aria-label={t("Action")} />
+          </Table.Tr>
+        </Table.Thead>
+
+        <Table.Tbody>
+          {isLoading ? (
+            <TableSkeleton />
+          ) : grants.length > 0 ? (
+            grants.map((grant) => (
+              <Table.Tr key={grant.id}>
+                <Table.Td>
+                  <Text fz="sm" fw={500}>
+                    {grant.clientName}
+                  </Text>
+                  <Text
+                    fz="xs"
+                    c="dimmed"
+                    title={grant.redirectUris?.join("\n")}
+                    style={{ overflowWrap: "anywhere" }}
+                  >
+                    {callbackHosts(grant.redirectUris).join(", ")}
+                  </Text>
+                </Table.Td>
+
+                <Table.Td>
+                  <Group gap={4}>
+                    {grant.scopes.map((scope) => {
+                      const meta = scopeMeta[scope];
+                      if (!meta) return null;
+                      return (
+                        <Badge
+                          key={scope}
+                          variant="light"
+                          color={meta.color}
+                          size="sm"
+                        >
+                          {meta.label}
+                        </Badge>
+                      );
+                    })}
+                  </Group>
+                </Table.Td>
+
+                <Table.Td>
+                  <Text fz="sm" style={{ whiteSpace: "nowrap" }}>
+                    {formatDate(grant.createdAt)}
+                  </Text>
+                </Table.Td>
+
+                <Table.Td>
+                  <Text fz="sm" style={{ whiteSpace: "nowrap" }}>
+                    {formatDate(grant.lastUsedAt)}
+                  </Text>
+                </Table.Td>
+
+                <Table.Td>
+                  <Tooltip label={t("Revoke access")}>
+                    <ActionIcon
+                      variant="subtle"
+                      color="red"
+                      aria-label={t("Revoke access for {{name}}", {
+                        name: grant.clientName,
+                      })}
+                      onClick={() => openRevokeModal(grant)}
+                    >
+                      <IconTrash size={16} />
+                    </ActionIcon>
+                  </Tooltip>
+                </Table.Td>
+              </Table.Tr>
+            ))
+          ) : (
+            <NoTableResults colSpan={5} text={t("No authorized apps yet.")} />
+          )}
+        </Table.Tbody>
+      </Table>
+    </Table.ScrollContainer>
+  );
+}
@@ -0,0 +1,353 @@
+import React, { useEffect, useMemo, useState } from "react";
+import {
+  Alert,
+  Anchor,
+  Box,
+  Button,
+  Center,
+  Checkbox,
+  Container,
+  Divider,
+  Group,
+  Loader,
+  Paper,
+  Stack,
+  Text,
+  ThemeIcon,
+  Title,
+} from "@mantine/core";
+import { notifications } from "@mantine/notifications";
+import {
+  IconAlertTriangle,
+  IconEye,
+  IconInfoCircle,
+  IconPencil,
+} from "@tabler/icons-react";
+import { useQuery } from "@tanstack/react-query";
+import { useAtom } from "jotai";
+import { RESET } from "jotai/utils";
+import { useTranslation } from "react-i18next";
+import { useLocation, useSearchParams } from "react-router-dom";
+import { AuthLayout } from "@/features/auth/components/auth-layout.tsx";
+import classes from "@/features/auth/components/auth.module.css";
+import { DocumentTitle } from "@/components/ui/document-title.tsx";
+import { UserInfo } from "@/components/common/user-info.tsx";
+import useCurrentUser from "@/features/user/hooks/use-current-user";
+import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
+import { logout } from "@/features/auth/services/auth-service";
+import { ICurrentUser } from "@/features/user/types/user.types";
+import APP_ROUTE from "@/lib/app-route.ts";
+import {
+  approveOAuthAuthorization,
+  getOAuthAuthorizeInfo,
+} from "@/ee/oauth/services/oauth-service";
+import {
+  IApproveAuthorizationPayload,
+  IAuthorizeParams,
+  IOAuthAuthorizeInfo,
+} from "@/ee/oauth/types/oauth.types";
+
+function loginRedirectUrl(pathname: string, search: string): string {
+  return `${APP_ROUTE.AUTH.LOGIN}?redirect=${encodeURIComponent(pathname + search)}`;
+}
+
+function errorStatus(error: any): number | undefined {
+  return error?.response?.status;
+}
+
+function errorText(error: any): string | undefined {
+  const data = error?.response?.data;
+  if (typeof data?.error_description === "string") return data.error_description;
+  if (Array.isArray(data?.message)) return data.message.join(", ");
+  return data?.message;
+}
+
+const OAUTH_PARAM_NAMES = [
+  "response_type",
+  "client_id",
+  "redirect_uri",
+  "state",
+  "code_challenge",
+  "code_challenge_method",
+  "scope",
+  "resource",
+];
+
+function pickOAuthParams(params: IAuthorizeParams): IAuthorizeParams {
+  const picked: IAuthorizeParams = {};
+  for (const name of OAUTH_PARAM_NAMES) {
+    if (params[name] !== undefined) {
+      picked[name] = params[name];
+    }
+  }
+  return picked;
+}
+
+export default function OAuthConsent() {
+  const { t } = useTranslation();
+  const location = useLocation();
+  const [searchParams] = useSearchParams();
+
+  const params = useMemo<IAuthorizeParams>(
+    () => Object.fromEntries(searchParams.entries()),
+    [searchParams],
+  );
+
+  const currentUserQuery = useCurrentUser();
+  const infoQuery = useQuery({
+    queryKey: ["oauth-authorize-info", params],
+    queryFn: () => getOAuthAuthorizeInfo(params),
+  });
+
+  const isUnauthenticated =
+    errorStatus(currentUserQuery.error) === 401 ||
+    errorStatus(infoQuery.error) === 401;
+
+  useEffect(() => {
+    if (isUnauthenticated) {
+      window.location.replace(
+        loginRedirectUrl(location.pathname, location.search),
+      );
+    }
+  }, [isUnauthenticated, location.pathname, location.search]);
+
+  const isLoading =
+    isUnauthenticated || currentUserQuery.isLoading || infoQuery.isLoading;
+
+  return (
+    <AuthLayout>
+      <DocumentTitle title={t("Authorize application")} />
+      <Container size={460} className={classes.container}>
+        <Box p="xl">
+          {isLoading ? (
+            <Center mih={200}>
+              <Loader />
+            </Center>
+          ) : infoQuery.data && currentUserQuery.data ? (
+            <ConsentCard
+              info={infoQuery.data}
+              currentUser={currentUserQuery.data}
+              params={params}
+            />
+          ) : (
+            <InvalidRequestCard
+              description={errorText(infoQuery.error ?? currentUserQuery.error)}
+            />
+          )}
+        </Box>
+      </Container>
+    </AuthLayout>
+  );
+}
+
+function InvalidRequestCard({ description }: { description?: string }) {
+  const { t } = useTranslation();
+
+  return (
+    <Stack align="center" gap="sm">
+      <ThemeIcon size={48} radius="xl" variant="light" color="red">
+        <IconAlertTriangle size={26} stroke={1.5} />
+      </ThemeIcon>
+      <Title order={3} ta="center" fw={600}>
+        {t("Invalid authorization request")}
+      </Title>
+      {description && (
+        <Text size="sm" c="dimmed" ta="center">
+          {description}
+        </Text>
+      )}
+    </Stack>
+  );
+}
+
+type ConsentCardProps = {
+  info: IOAuthAuthorizeInfo;
+  currentUser: ICurrentUser;
+  params: IAuthorizeParams;
+};
+
+function ConsentCard({ info, currentUser, params }: ConsentCardProps) {
+  const { t } = useTranslation();
+  const location = useLocation();
+  const [, setCurrentUser] = useAtom(currentUserAtom);
+  const [approvedScopes, setApprovedScopes] = useState<string[]>(
+    info.scopes.filter((scope) => scope === "read" || scope === "write"),
+  );
+  const [submitting, setSubmitting] = useState<"approve" | "deny" | null>(null);
+  const [acknowledged, setAcknowledged] = useState(false);
+
+  const scopeRows = [
+    {
+      scope: "read",
+      icon: <IconEye size={16} stroke={1.5} />,
+      label: t("Read"),
+      description: t("View data in your workspace without making changes."),
+    },
+    {
+      scope: "write",
+      icon: <IconPencil size={16} stroke={1.5} />,
+      label: t("Write"),
+      description: t("Create and modify data in your workspace."),
+    },
+  ];
+
+  function toggleScope(scope: string, checked: boolean) {
+    setApprovedScopes((prev) =>
+      checked ? [...prev, scope] : prev.filter((item) => item !== scope),
+    );
+  }
+
+  async function submitDecision(approved: boolean) {
+    setSubmitting(approved ? "approve" : "deny");
+    const oauthParams = pickOAuthParams(params);
+    const payload: IApproveAuthorizationPayload = approved
+      ? { ...oauthParams, approved: true, approvedScopes }
+      : { ...oauthParams, approved: false };
+
+    try {
+      const res = await approveOAuthAuthorization(payload);
+      window.location.replace(res.redirectUrl);
+    } catch (err) {
+      if (errorStatus(err) === 401) {
+        window.location.replace(
+          loginRedirectUrl(location.pathname, location.search),
+        );
+        return;
+      }
+      setSubmitting(null);
+      notifications.show({
+        message: errorText(err) || t("Something went wrong. Please try again."),
+        color: "red",
+      });
+    }
+  }
+
+  async function switchAccount() {
+    if (submitting !== null) {
+      return;
+    }
+    setCurrentUser(RESET);
+    try {
+      await logout();
+    } finally {
+      window.location.replace(
+        loginRedirectUrl(location.pathname, location.search),
+      );
+    }
+  }
+
+  return (
+    <Stack gap="lg">
+      <Title order={3} ta="center" fw={600}>
+        {t("{{name}} wants to access {{workspace}}", {
+          name: info.clientName,
+          workspace: currentUser.workspace.name,
+        })}
+      </Title>
+
+      <Paper withBorder radius="md" p="sm">
+        <Group justify="space-between" wrap="nowrap">
+          <UserInfo user={currentUser.user} />
+          <Anchor
+            component="button"
+            type="button"
+            size="xs"
+            c="dimmed"
+            disabled={submitting !== null}
+            onClick={switchAccount}
+            style={{ whiteSpace: "nowrap" }}
+          >
+            {t("Not you? Switch account")}
+          </Anchor>
+        </Group>
+      </Paper>
+
+      <Divider />
+
+      <Stack gap="sm">
+        <Text size="sm" fw={500}>
+          {t("This application will be able to:")}
+        </Text>
+        {scopeRows.map((row) => {
+          const requested = info.scopes.includes(row.scope);
+          return (
+            <Checkbox
+              key={row.scope}
+              size="sm"
+              checked={approvedScopes.includes(row.scope)}
+              disabled={!requested || submitting !== null}
+              onChange={(event) =>
+                toggleScope(row.scope, event.currentTarget.checked)
+              }
+              label={
+                <Group gap={6} wrap="nowrap">
+                  {row.icon}
+                  <Text size="sm" fw={500}>
+                    {row.label}
+                  </Text>
+                </Group>
+              }
+              description={row.description}
+            />
+          );
+        })}
+      </Stack>
+
+      <div>
+        <Text size="xs" c="dimmed">
+          {t("You will be redirected to")}
+        </Text>
+        <Text size="xs" ff="monospace" style={{ overflowWrap: "anywhere" }}>
+          {info.redirectUri}
+        </Text>
+      </div>
+
+      {!info.verified && (
+        <Alert
+          variant="light"
+          color="yellow"
+          icon={<IconInfoCircle size={16} />}
+        >
+          <Stack gap="xs">
+            <Text size="sm">
+              {t(
+                "This application is not on your workspace's trusted list. Authorize only if you recognize it.",
+              )}
+            </Text>
+            <Checkbox
+              size="sm"
+              checked={acknowledged}
+              disabled={submitting !== null}
+              onChange={(event) =>
+                setAcknowledged(event.currentTarget.checked)
+              }
+              label={t("I recognize this application and want to continue")}
+            />
+          </Stack>
+        </Alert>
+      )}
+
+      <Group grow>
+        <Button
+          variant="default"
+          onClick={() => submitDecision(false)}
+          loading={submitting === "deny"}
+          disabled={submitting === "approve"}
+        >
+          {t("Cancel")}
+        </Button>
+        <Button
+          onClick={() => submitDecision(true)}
+          loading={submitting === "approve"}
+          disabled={
+            approvedScopes.length === 0 ||
+            (!info.verified && !acknowledged) ||
+            submitting === "deny"
+          }
+        >
+          {t("Authorize")}
+        </Button>
+      </Group>
+    </Stack>
+  );
+}
@@ -0,0 +1,45 @@
+import {
+  useMutation,
+  useQuery,
+  useQueryClient,
+  UseQueryResult,
+} from "@tanstack/react-query";
+import {
+  getOAuthGrants,
+  revokeOAuthGrant,
+} from "@/ee/oauth/services/oauth-service";
+import { IOAuthGrant } from "@/ee/oauth/types/oauth.types";
+import { notifications } from "@mantine/notifications";
+import { useTranslation } from "react-i18next";
+
+export function useOAuthGrantsQuery(): UseQueryResult<IOAuthGrant[], Error> {
+  return useQuery({
+    queryKey: ["oauth-grants"],
+    queryFn: () => getOAuthGrants(),
+    staleTime: 0,
+    gcTime: 0,
+  });
+}
+
+export function useRevokeOAuthGrantMutation() {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+
+  return useMutation<void, Error, string>({
+    mutationFn: (grantId) => revokeOAuthGrant(grantId),
+    onSuccess: () => {
+      notifications.show({ message: t("Access revoked") });
+      queryClient.invalidateQueries({
+        predicate: (item) =>
+          ["oauth-grants"].includes(item.queryKey[0] as string),
+      });
+    },
+    onError: (error) => {
+      const errorMessage = error["response"]?.data?.message;
+      notifications.show({
+        message: errorMessage || t("Something went wrong. Please try again."),
+        color: "red",
+      });
+    },
+  });
+}
@@ -0,0 +1,36 @@
+import api from "@/lib/api-client";
+import {
+  IApproveAuthorizationPayload,
+  IAuthorizeParams,
+  IOAuthAuthorizeInfo,
+  IOAuthGrant,
+} from "@/ee/oauth/types/oauth.types";
+
+export async function getOAuthAuthorizeInfo(
+  params: IAuthorizeParams,
+): Promise<IOAuthAuthorizeInfo> {
+  const req = await api.post<IOAuthAuthorizeInfo>(
+    "/oauth/authorize-info",
+    params,
+  );
+  return req.data;
+}
+
+export async function approveOAuthAuthorization(
+  payload: IApproveAuthorizationPayload,
+): Promise<{ redirectUrl: string }> {
+  const req = await api.post<{ redirectUrl: string }>(
+    "/oauth/authorize",
+    payload,
+  );
+  return req.data;
+}
+
+export async function getOAuthGrants(): Promise<IOAuthGrant[]> {
+  const req = await api.post<IOAuthGrant[]>("/oauth/grants", {});
+  return req.data;
+}
+
+export async function revokeOAuthGrant(grantId: string): Promise<void> {
+  await api.post("/oauth/grants/revoke", { grantId });
+}
@@ -0,0 +1,24 @@
+export interface IOAuthAuthorizeInfo {
+  clientName: string;
+  redirectUri: string;
+  scopes: string[];
+  clientCreatedAt: string;
+  verified: boolean;
+}
+
+export interface IOAuthGrant {
+  id: string;
+  clientName: string;
+  redirectUris: string[];
+  scopes: string[];
+  createdAt: string;
+  lastUsedAt: string | null;
+}
+
+export type IAuthorizeParams = Record<string, string>;
+
+export type IApproveAuthorizationPayload = {
+  [param: string]: unknown;
+  approved: boolean;
+  approvedScopes?: string[];
+};
@@ -31,6 +31,7 @@ export interface IWorkspace {
  allowPersonalSpaces?: boolean;
  defaultPageEditMode?: string;
  isScimEnabled?: boolean;
+  trustedOauthClients?: ITrustedOAuthClient[];
 }

 export interface IWorkspaceSettings {
@@ -42,6 +43,11 @@ export interface IWorkspaceSettings {
  defaultPageEditMode?: string;
 }

+export interface ITrustedOAuthClient {
+  origin: string;
+  name: string;
+}
+
 export interface IWorkspaceApiSettings {
  restrictToAdmins?: boolean;
 }
@@ -76,6 +76,8 @@ function redirectToLogin() {
    APP_ROUTE.AUTH.MFA_CHALLENGE,
    APP_ROUTE.AUTH.MFA_SETUP_REQUIRED,
    "/invites",
+    // the oauth consent page redirects to login itself, preserving its query string
+    "/oauth/consent",
  ];
  if (!exemptPaths.some((path) => window.location.pathname.startsWith(path))) {
    const redirectTo = window.location.pathname;