chore(nextjs): Decrease frequency of logs related to Keyless (#4953)

Author: panteliselef

.changeset/eighty-clocks-dance.md

@@ -0,0 +1,5 @@
+---
+'@clerk/nextjs': patch
+---
+
+Decrease frequency of logs related to Keyless.

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 }), {

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>;
       }
     }

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

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();

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',