Refactor drift detection to server action

Author: heatlikeheatwave

packages/nextjs/src/app-router/client/ClerkProvider.tsx

@@ -15,6 +15,7 @@ import { canUseKeyless } from '../../utils/feature-flags';
 import { mergeNextClerkPropsWithEnv } from '../../utils/mergeNextClerkPropsWithEnv';
 import { RouterTelemetry } from '../../utils/router-telemetry';
 import { isNextWithUnstableServerActions } from '../../utils/sdk-versions';
+import { detectKeylessEnvDriftAction } from '../keyless-actions';
 import { invalidateCacheAction } from '../server-actions';
 import { useAwaitablePush } from './useAwaitablePush';
 import { useAwaitableReplace } from './useAwaitableReplace';
@@ -55,6 +56,11 @@ const NextClientClerkProvider = (props: NextClerkProviderProps) => {
     }
   }, [isPending]);
 
+  // Call drift detection on mount (client-side)
+  useSafeLayoutEffect(() => {
+    void detectKeylessEnvDriftAction();
+  }, []);
+
   useSafeLayoutEffect(() => {
     window.__unstable__onBeforeSetActive = intent => {
       /**

packages/nextjs/src/app-router/keyless-actions.ts

@@ -93,3 +93,12 @@ export async function deleteKeylessAction() {
   await import('../server/keyless-node.js').then(m => m.removeKeyless()).catch(() => {});
   return;
 }
+
+export async function detectKeylessEnvDriftAction() {
+  try {
+    const { detectKeylessEnvDrift } = await import('../server/keyless-telemetry.js');
+    await detectKeylessEnvDrift();
+  } catch {
+    // ignore
+  }
+}