Forward arch, platform, and user-agent information with POST requests to /accountless_applications

Author: heatlikeheatwave

.changeset/strong-chicken-lie.md

@@ -0,0 +1,6 @@
+---
+"@clerk/backend": patch
+"@clerk/nextjs": patch
+---
+
+feat(nextjs): Forward user-agent, arch, platform, and npm config with POST requests to /accountless_applications

packages/backend/src/api/endpoints/AccountlessApplicationsAPI.ts

@@ -5,19 +5,22 @@ import { AbstractAPI } from './AbstractApi';
 const basePath = '/accountless_applications';
 
 export class AccountlessApplicationAPI extends AbstractAPI {
-  public async createAccountlessApplication(headers: Record<string, string> = {}) {
+  public async createAccountlessApplication(headers: Headers | undefined) {
+    const headerParams = headers instanceof Headers ? Object.fromEntries(headers.entries()) : undefined;
     return this.request<AccountlessApplication>({
       method: 'POST',
       path: basePath,
-      headerParams: headers,
+      headerParams,
     });
   }
 
-  public async completeAccountlessApplicationOnboarding(headers: Record<string, string> = {}) {
+  public async completeAccountlessApplicationOnboarding(headers: Headers | undefined) {
+    const headerParams = headers instanceof Headers ? Object.fromEntries(headers.entries()) : undefined;
+
     return this.request<AccountlessApplication>({
       method: 'POST',
       path: joinPaths(basePath, 'complete'),
-      headerParams: headers,
+      headerParams,
     });
   }
 

packages/nextjs/src/app-router/server/keyless-provider.tsx

@@ -5,6 +5,7 @@ import type { PropsWithChildren } from 'react';
 import React from 'react';
 
 import { createClerkClientWithOptions } from '../../server/createClerkClient';
+import { collectKeylessMetadata, formatMetadataHeaders } from '../../server/keyless-custom-headers';
 import type { NextClerkProviderProps } from '../../types';
 import { canUseKeyless } from '../../utils/feature-flags';
 import { mergeNextClerkPropsWithEnv } from '../../utils/mergeNextClerkPropsWithEnv';
@@ -96,18 +97,17 @@ export const KeylessProvider = async (props: KeylessProviderProps) => {
        * Notifying the dashboard the should runs once. We are controlling this behaviour by caching the result of the request.
        * If the request fails, it will be considered stale after 10 minutes, otherwise it is cached for 24 hours.
        */
-      // Collect telemetry data
-      let telemetryHeaders: Record<string, string> = {};
+      // Collect metadata
+      let keylessHeaders: Headers = new Headers();
       try {
-        const { collectKeylessTelemetry, formatTelemetryHeaders } = await import('../../server/telemetry.js');
-        const telemetry = await collectKeylessTelemetry().catch(() => ({}));
-        telemetryHeaders = formatTelemetryHeaders(telemetry);
+        const metadata = await collectKeylessMetadata();
+        keylessHeaders = formatMetadataHeaders(metadata);
       } catch {
-        // Ignore telemetry errors
+        // noop
       }
 
       await clerkDevelopmentCache?.run(
-        () => client.__experimental_accountlessApplications.completeAccountlessApplicationOnboarding(telemetryHeaders),
+        () => client.__experimental_accountlessApplications.completeAccountlessApplicationOnboarding(keylessHeaders),
         {
           cacheKey: `${newOrReadKeys.publishableKey}_complete`,
           onSuccessStale: 24 * 60 * 60 * 1000, // 24 hours
@@ -130,7 +130,7 @@ export const KeylessProvider = async (props: KeylessProviderProps) => {
 
   const KeylessCookieSync = await import('../client/keyless-cookie-sync.js').then(mod => mod.KeylessCookieSync);
 
-  const headerStore = headers();
+  const headerStore = await headers();
   /**
    * Allow developer to return to local application after claiming
    */

packages/nextjs/src/server/keyless-custom-headers.ts

@@ -8,64 +8,73 @@ interface MetadataHeaders {
 }
 
 /**
- * Detects the package manager being used
- * @returns Package manager type and version
+ * Configuration for metadata header mapping
  */
-function getNpmConfig(): string | undefined {
-  // Use available environment variables from turbo.json globalEnv
-  // eslint-disable-next-line
-  if (process.env.npm_config_user_agent) {
-    // eslint-disable-next-line
-    return process.env.npm_config_user_agent; // 'npm/10.9.2 node/v22.16.0 darwin arm64 workspaces/false',
-  }
+const HEADER_MAPPING = {
+  nodeVersion: 'Clerk-Node-Version',
+  nextVersion: 'Clerk-Next-Version',
+  npmConfigUserAgent: 'Clerk-NPM-Config-User-Agent',
+  userAgent: 'Clerk-Client-User-Agent',
+} as const;
 
-  // For other package managers, we can't reliably detect them
-  // without access to their specific environment variables
-  // This is a simplified approach that focuses on what's available
-  return undefined;
-}
+/**
+ * Environment-based metadata collectors
+ */
+const METADATA_COLLECTORS = {
+  nodeVersion: () => process.version,
+  nextVersion: () => {
+    try {
+      // Extract version from process.title: 'next-server (v15.4.5)' -> 'v15.4.5'
+      const match = process.title.match(/\(v([\d.]+)\)/);
+      return match ? `v${match[1]}` : process.title;
+    } catch {
+      return undefined;
+    }
+  },
+  // eslint-disable-next-line
+  npmConfigUserAgent: () => process.env.npm_config_user_agent,
+} as const;
 
 /**
- * Gets the Next.js version from the package
+ * Safely executes a metadata collector function
  */
-function getNextVersion(): string | undefined {
+function safeCollect<T>(collector: () => T): T | undefined {
   try {
-    return process.title; // title: 'next-server (v15.4.5)',
+    return collector();
   } catch {
-    // Fallback to checking process.env or other methods
     return undefined;
   }
 }
 
+/**
+ * Collects all available metadata from environment and request
+ */
 export async function collectKeylessMetadata(): Promise<MetadataHeaders> {
-  const packageManager = getNpmConfig();
-
-  // Get client user agent from the incoming request headers
-  const headerStore = await headers();
-  const userAgent = headerStore.get('User-Agent') || undefined;
+  const [headerStore, envMetadata] = await Promise.all([
+    headers(),
+    Promise.resolve(
+      Object.fromEntries(Object.entries(METADATA_COLLECTORS).map(([key, collector]) => [key, safeCollect(collector)])),
+    ),
+  ]);
 
   return {
-    nodeVersion: process.version,
-    nextVersion: getNextVersion(),
-    npmConfigUserAgent: packageManager,
-    userAgent,
-  };
+    ...envMetadata,
+    userAgent: headerStore.get('User-Agent') || undefined,
+  } as MetadataHeaders;
 }
 
+/**
+ * Converts metadata to HTTP headers using centralized mapping
+ */
 export function formatMetadataHeaders(metadata: MetadataHeaders): Headers {
   const headers = new Headers();
 
-  if (metadata.nextVersion) {
-    headers.set('Clerk-Next-Version', metadata.nextVersion);
-  }
-
-  if (metadata.npmConfigUserAgent) {
-    headers.set('Clerk-NPM-Config-User-Agent', metadata.npmConfigUserAgent);
-  }
-
-  if (metadata.userAgent) {
-    headers.set('Clerk-Client-User-Agent', metadata.userAgent);
-  }
+  // Use entries to iterate and reduce repetition
+  Object.entries(metadata).forEach(([key, value]) => {
+    if (value && key in HEADER_MAPPING) {
+      headers.set(HEADER_MAPPING[key as keyof typeof HEADER_MAPPING], value);
+    }
+  });
 
   return headers;
 }

packages/nextjs/src/server/keyless-node.ts

@@ -2,6 +2,7 @@ import type { AccountlessApplication } from '@clerk/backend';
 
 import { createClerkClientWithOptions } from './createClerkClient';
 import { nodeCwdOrThrow, nodeFsOrThrow, nodePathOrThrow } from './fs/utils';
+import { collectKeylessMetadata, formatMetadataHeaders } from './keyless-custom-headers';
 
 /**
  * The Clerk-specific directory name.
@@ -135,18 +136,17 @@ async function createOrReadKeyless(): Promise<AccountlessApplication | null> {
    */
   const client = createClerkClientWithOptions({});
 
-  // Collect telemetry data
-  let telemetryHeaders: Record<string, string> = {};
+  // Collect metadata
+  let keylessHeaders: Headers = new Headers();
   try {
-    const { collectKeylessTelemetry, formatTelemetryHeaders } = await import('./telemetry.js');
-    const telemetry = await collectKeylessTelemetry().catch(() => ({}));
-    telemetryHeaders = formatTelemetryHeaders(telemetry);
+    const metadata = await collectKeylessMetadata();
+    keylessHeaders = formatMetadataHeaders(metadata);
   } catch {
-    // Ignore telemetry errors
+    // Continue with empty headers if metadata header collection fails
   }
 
   const accountlessApplication = await client.__experimental_accountlessApplications
-    .createAccountlessApplication(telemetryHeaders)
+    .createAccountlessApplication(keylessHeaders)
     .catch(() => null);
 
   if (accountlessApplication) {