From 71e971a205a55b218559579eae065a0a04ad3dbe Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Tue, 21 Jan 2025 18:01:20 +0200
Subject: [PATCH] chore(nextjs): Decrease frequency of logs related to Keyless
 (#4953)

---
 .changeset/eighty-clocks-dance.md             |  5 +++
 .../nextjs/src/app-router/keyless-actions.ts  | 10 +++++
 .../src/app-router/server/ClerkProvider.tsx   | 22 +++++++++-
 packages/nextjs/src/global.d.ts               | 10 +++++
 .../nextjs/src/server/keyless-log-cache.ts    | 40 +++++++++++++++++++
 packages/nextjs/src/server/keyless-node.ts    | 15 -------
 6 files changed, 86 insertions(+), 16 deletions(-)
 create mode 100644 .changeset/eighty-clocks-dance.md
 create mode 100644 packages/nextjs/src/server/keyless-log-cache.ts

diff --git a/.changeset/eighty-clocks-dance.md b/.changeset/eighty-clocks-dance.md
new file mode 100644
index 00000000000..4b9473c9510
--- /dev/null
+++ b/.changeset/eighty-clocks-dance.md
@@ -0,0 +1,5 @@
+---
+'@clerk/nextjs': patch
+---
+
+Decrease frequency of logs related to Keyless.
diff --git a/packages/nextjs/src/app-router/keyless-actions.ts b/packages/nextjs/src/app-router/keyless-actions.ts
index 1d4dbdf91aa..1512a85aa24 100644
--- a/packages/nextjs/src/app-router/keyless-actions.ts
+++ b/packages/nextjs/src/app-router/keyless-actions.ts
@@ -41,6 +41,16 @@ export async function createOrReadKeylessAction(): Promise<null | Omit<Accountle
     return null;
   }
 
+  const { keylessLogger, createKeylessModeMessage } = await import('../server/keyless-log-cache.js');
+
+  /**
+   * Notify developers.
+   */
+  keylessLogger?.log({
+    cacheKey: result.publishableKey,
+    msg: createKeylessModeMessage(result),
+  });
+
   const { claimUrl, publishableKey, secretKey, apiKeysUrl } = result;
 
   void (await cookies()).set(getKeylessCookieName(), JSON.stringify({ claimUrl, publishableKey, secretKey }), {
diff --git a/packages/nextjs/src/app-router/server/ClerkProvider.tsx b/packages/nextjs/src/app-router/server/ClerkProvider.tsx
index 541d8c405f8..ff59c754fea 100644
--- a/packages/nextjs/src/app-router/server/ClerkProvider.tsx
+++ b/packages/nextjs/src/app-router/server/ClerkProvider.tsx
@@ -77,9 +77,11 @@ export async function ClerkProvider(
   if (shouldRunAsKeyless) {
     // NOTE: Create or read keys on every render. Usually this means only on hard refresh or hard navigations.
     const newOrReadKeys = await import('../../server/keyless-node.js').then(mod => mod.createOrReadKeyless());
+    const { keylessLogger, createConfirmationMessage, createKeylessModeMessage } = await import(
+      '../../server/keyless-log-cache.js'
+    );
 
     if (newOrReadKeys) {
-      const KeylessCookieSync = await import('../client/keyless-cookie-sync.js').then(mod => mod.KeylessCookieSync);
       const clientProvider = (
         <ClientClerkProvider
           {...mergeNextClerkPropsWithEnv({
@@ -97,8 +99,26 @@ export async function ClerkProvider(
       );
 
       if (runningWithClaimedKeys) {
+        /**
+         * Notify developers.
+         */
+        keylessLogger?.log({
+          cacheKey: `${newOrReadKeys.publishableKey}_claimed`,
+          msg: createConfirmationMessage(),
+        });
+
         output = clientProvider;
       } else {
+        const KeylessCookieSync = await import('../client/keyless-cookie-sync.js').then(mod => mod.KeylessCookieSync);
+
+        /**
+         * Notify developers.
+         */
+        keylessLogger?.log({
+          cacheKey: newOrReadKeys.publishableKey,
+          msg: createKeylessModeMessage(newOrReadKeys),
+        });
+
         output = <KeylessCookieSync {...newOrReadKeys}>{clientProvider}</KeylessCookieSync>;
       }
     }
diff --git a/packages/nextjs/src/global.d.ts b/packages/nextjs/src/global.d.ts
index ae14ac1e111..3337919f0f3 100644
--- a/packages/nextjs/src/global.d.ts
+++ b/packages/nextjs/src/global.d.ts
@@ -21,3 +21,13 @@ interface Window {
 
 declare const PACKAGE_NAME: string;
 declare const PACKAGE_VERSION: string;
+
+declare module globalThis {
+  // eslint-disable-next-line no-var
+  var __clerk_internal_keyless_logger:
+    | {
+        __cache: Map<string, { expiresAt: number }>;
+        log: (param: { cacheKey: string; msg: string }) => void;
+      }
+    | undefined;
+}
diff --git a/packages/nextjs/src/server/keyless-log-cache.ts b/packages/nextjs/src/server/keyless-log-cache.ts
new file mode 100644
index 00000000000..0f9a6536275
--- /dev/null
+++ b/packages/nextjs/src/server/keyless-log-cache.ts
@@ -0,0 +1,40 @@
+import type { AccountlessApplication } from '@clerk/backend';
+import { isDevelopmentEnvironment } from '@clerk/shared/utils';
+// 10 minutes in milliseconds
+const THROTTLE_DURATION_MS = 10 * 60 * 1000;
+
+function createClerkDevLogger() {
+  if (!isDevelopmentEnvironment()) {
+    return;
+  }
+
+  if (!global.__clerk_internal_keyless_logger) {
+    global.__clerk_internal_keyless_logger = {
+      __cache: new Map<string, { expiresAt: number }>(),
+
+      log: function ({ cacheKey, msg }: { cacheKey: string; msg: string }) {
+        if (this.__cache.has(cacheKey) && Date.now() < (this.__cache.get(cacheKey)?.expiresAt || 0)) {
+          return;
+        }
+
+        console.log(msg);
+
+        this.__cache.set(cacheKey, {
+          expiresAt: Date.now() + THROTTLE_DURATION_MS,
+        });
+      },
+    };
+  }
+
+  return globalThis.__clerk_internal_keyless_logger;
+}
+
+export const createKeylessModeMessage = (keys: AccountlessApplication) => {
+  return `\n\x1b[35m\n[Clerk]:\x1b[0m You are running in keyless mode.\nYou can \x1b[35mclaim your keys\x1b[0m by visiting ${keys.claimUrl}\n`;
+};
+
+export const createConfirmationMessage = () => {
+  return `\n\x1b[35m\n[Clerk]:\x1b[0m Your application is running with your claimed keys.\nYou can safely remove the \x1b[35m.clerk/\x1b[0m from your project.\n`;
+};
+
+export const keylessLogger = createClerkDevLogger();
diff --git a/packages/nextjs/src/server/keyless-node.ts b/packages/nextjs/src/server/keyless-node.ts
index 21c9dee3987..9b5a4b74686 100644
--- a/packages/nextjs/src/server/keyless-node.ts
+++ b/packages/nextjs/src/server/keyless-node.ts
@@ -1,5 +1,4 @@
 import type { AccountlessApplication } from '@clerk/backend';
-import { logger } from '@clerk/shared/logger';
 
 /**
  * Attention: Only import this module when the node runtime is used.
@@ -87,10 +86,6 @@ export function safeParseClerkFile(): AccountlessApplication | undefined {
   }
 }
 
-const createMessage = (keys: AccountlessApplication) => {
-  return `\n\x1b[35m\n[Clerk]:\x1b[0m You are running in keyless mode.\nYou can \x1b[35mclaim your keys\x1b[0m by visiting ${keys.claimUrl}\n`;
-};
-
 /**
  * Using both an in-memory and file system lock seems to be the most effective solution.
  */
@@ -154,11 +149,6 @@ async function createOrReadKeyless(): Promise<AccountlessApplication | undefined
   if (envVarsMap?.publishableKey && envVarsMap?.secretKey) {
     unlockFileWriting();
 
-    /**
-     * Notify developers.
-     */
-    logger.logOnce(createMessage(envVarsMap));
-
     return envVarsMap;
   }
 
@@ -168,11 +158,6 @@ async function createOrReadKeyless(): Promise<AccountlessApplication | undefined
   const client = createClerkClientWithOptions({});
   const accountlessApplication = await client.__experimental_accountlessApplications.createAccountlessApplication();
 
-  /**
-   * Notify developers.
-   */
-  logger.logOnce(createMessage(accountlessApplication));
-
   writeFileSync(CONFIG_PATH, JSON.stringify(accountlessApplication), {
     encoding: 'utf8',
     mode: '0777',