feat(ee): MCP OAuth (#2432)

* feat: mcp oauth

* fix: small refactor

* fix: cleanup consent

apps/client/src/ee/ai/components/mcp-settings.tsx

@@ -1,5 +1,6 @@
 import {
   Anchor,
+  Badge,
   Group,
   List,
   Text,
@@ -107,11 +108,11 @@ export default function McpSettings() {
             </CopyButton>
           </Group>
           <Text size="sm" c="dimmed" mt="xs">
-            {t(
-              "Use your API key for authentication. You can manage API keys in your account settings.",
-            )}
+            {t("Connect AI assistants with your Docmost account via OAuth.")}
           </Text>
 
+          <McpOauthOnlySetting />
+
           <div>
             <Text size="sm" fw={500} mt="md" mb={4}>
               {t("Supported tools")}
@@ -154,3 +155,56 @@ export default function McpSettings() {
     </Stack>
   );
 }
+
+function McpOauthOnlySetting() {
+  const { t } = useTranslation();
+  const [workspace, setWorkspace] = useAtom(workspaceAtom);
+  const [checked, setChecked] = useState(workspace?.settings?.ai?.mcpOauthOnly);
+  const hasAccess = useHasFeature(Feature.MCP_CONTROLS);
+  const upgradeLabel = useUpgradeLabel();
+
+  const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.currentTarget.checked;
+    try {
+      const updatedWorkspace = await updateWorkspace({ mcpOauthOnly: value });
+      setChecked(value);
+      setWorkspace(updatedWorkspace);
+    } catch (err) {
+      notifications.show({
+        message: err?.response?.data?.message,
+        color: "red",
+      });
+    }
+  };
+
+  return (
+    <Group justify="space-between" wrap="nowrap" gap="xl" mt="md">
+      <div>
+        <Group gap="xs" align="center">
+          <Text size="sm" fw={500}>
+            {t("Require OAuth")}
+          </Text>
+          {!hasAccess && (
+            <Badge variant="light" size="sm" radius="sm">
+              {t("Enterprise")}
+            </Badge>
+          )}
+        </Group>
+        <Text size="sm" c="dimmed">
+          {t(
+            "AI assistants must connect with a Docmost account via OAuth. API keys cannot be used with the MCP server.",
+          )}
+        </Text>
+      </div>
+
+      <Tooltip label={upgradeLabel} disabled={hasAccess} refProp="rootRef">
+        <Switch
+          defaultChecked={checked}
+          onChange={handleChange}
+          disabled={!hasAccess}
+          aria-label={t("Toggle require OAuth for MCP")}
+        />
+      </Tooltip>
+    </Group>
+  );
+}

apps/client/src/ee/api-key/pages/user-api-keys.tsx

@@ -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 via OAuth.",
             )}{" "}
             <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}

apps/client/src/ee/features.ts

@@ -22,5 +22,7 @@ export const Feature = {
   PERSONAL_SPACES: 'spaces:personal',
   DOCX_EXPORT: 'export:docx',
   BASES: 'bases',
+  OAUTH: 'oauth',
   AI_CONTROLS: 'ai:controls',
+  MCP_CONTROLS: 'mcp:controls',
 } as const;

apps/client/src/ee/oauth/components/authorized-apps-panel.tsx

@@ -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} />
+    </>
+  );
+}

apps/client/src/ee/oauth/components/oauth-grants-table.tsx

@@ -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>
+  );
+}

apps/client/src/ee/oauth/pages/oauth-consent.tsx

@@ -0,0 +1,333 @@
+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,
+  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 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"
+          py="xs"
+          icon={<IconAlertTriangle size={16} />}
+        >
+          {t("Make sure you trust this application before authorizing it.")}
+        </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 || submitting === "deny"}
+        >
+          {t("Authorize")}
+        </Button>
+      </Group>
+    </Stack>
+  );
+}

apps/client/src/ee/oauth/queries/oauth-query.ts

@@ -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",
+      });
+    },
+  });
+}

apps/client/src/ee/oauth/services/oauth-service.ts

@@ -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 });
+}

apps/client/src/ee/oauth/types/oauth.types.ts

@@ -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[];
+};