From b62eba81284bba31d671bdaf2c694ff0b9a34294 Mon Sep 17 00:00:00 2001
From: Kartik <103111467+kartik-212004@users.noreply.github.com>
Date: Thu, 4 Sep 2025 09:29:45 +0530
Subject: [PATCH] fix: Limit API key name length using constant (#22703)

* fix: added maximum length limit to api key name

* fix: use i18n

---------

Co-authored-by: Kartik Saini <41051387+kart1ka@users.noreply.github.com>
---
 apps/web/public/static/locales/en/common.json     |  1 +
 .../ee/api-keys/components/ApiKeyDialogForm.tsx   | 15 ++++++++++++++-
 packages/lib/constants.ts                         |  1 +
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
index a12acdd06a..19633f93fd 100644
--- a/apps/web/public/static/locales/en/common.json
+++ b/apps/web/public/static/locales/en/common.json
@@ -3591,5 +3591,6 @@
   "consider_consolidating_multi_team_org": "Consider setting up an organization to unify billing, admin tools, and analytics across your teams.",
   "search_variables": "Search variables",
   "no_variables_found": "No variables found",
+  "api_key_name_too_long": "Name must not exceed {{max}} characters",
   "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
 }
diff --git a/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx b/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx
index b709b94171..6f8f0aec0a 100644
--- a/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx
+++ b/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx
@@ -5,6 +5,7 @@ import { Controller, useForm } from "react-hook-form";
 import dayjs from "@calcom/dayjs";
 import type { TApiKeys } from "@calcom/ee/api-keys/components/ApiKeyListItem";
 import LicenseRequired from "@calcom/ee/common/components/LicenseRequired";
+import { API_NAME_LENGTH_MAX_LIMIT } from "@calcom/lib/constants";
 import { IS_CALCOM } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
@@ -57,6 +58,18 @@ export default function ApiKeyDialogForm({
       neverExpires: defaultValues?.neverExpires || false,
       expiresAt: defaultValues?.expiresAt || dayjs().add(30, "day").toDate(),
     },
+    mode: "onChange",
+    criteriaMode: "all",
+    resolver: (values) => {
+      const errors: { note?: { type: string; message: string } } = {};
+      if (values.note && values.note.length > API_NAME_LENGTH_MAX_LIMIT) {
+        errors.note = {
+          type: "maxLength",
+          message: t("api_key_name_too_long", { max: API_NAME_LENGTH_MAX_LIMIT }),
+        };
+      }
+      return { values, errors };
+    },
   });
   const watchNeverExpires = form.watch("neverExpires");
 
@@ -182,7 +195,7 @@ export default function ApiKeyDialogForm({
           {!defaultValues && (
             <div className="flex flex-col">
               <div className="flex justify-between py-2">
-                <span className="text-default block text-sm font-medium">{t("expire_date")}</span>
+                <span className="text-default flex items-center text-sm font-medium">{t("expire_date")}</span>
                 <Controller
                   name="neverExpires"
                   control={form.control}
diff --git a/packages/lib/constants.ts b/packages/lib/constants.ts
index c3164953b4..a414ace851 100644
--- a/packages/lib/constants.ts
+++ b/packages/lib/constants.ts
@@ -121,6 +121,7 @@ export const IS_TEAM_BILLING_ENABLED_CLIENT =
   !!process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY && HOSTED_CAL_FEATURES;
 
 export const FULL_NAME_LENGTH_MAX_LIMIT = 50;
+export const API_NAME_LENGTH_MAX_LIMIT = 80;
 export const MINUTES_TO_BOOK = process.env.NEXT_PUBLIC_MINUTES_TO_BOOK || "5";
 export const ENABLE_PROFILE_SWITCHER = process.env.NEXT_PUBLIC_ENABLE_PROFILE_SWITCHER === "1";
 // Needed for orgs