fix(nextjs): Attempt to inline crypto-js through pre-compiling

.changeset/rich-trees-smoke.md

@@ -0,0 +1,5 @@
+---
+'@clerk/nextjs': patch
+---
+
+Switch to `crypto-es` and bundle the dependency to avoid downstream build issues

integration/tests/next-build.test.ts

@@ -202,7 +202,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       // Get the indicator from the build output
       const indicator = getIndicator(app.buildOutput, type);
 
-      const pageLine = app.buildOutput.split('\n').find(msg => msg.includes(page));
+      const pageLine = app.buildOutput.split('\n').find(msg => msg.includes(` ${page}`));
 
       expect(pageLine).toContain(indicator);
     });

packages/nextjs/package.json

@@ -70,12 +70,11 @@
     "@clerk/clerk-react": "workspace:^",
     "@clerk/shared": "workspace:^",
     "@clerk/types": "workspace:^",
-    "crypto-js": "4.2.0",
     "server-only": "0.0.1",
     "tslib": "catalog:repo"
   },
   "devDependencies": {
-    "@types/crypto-js": "4.2.2",
+    "crypto-es": "^2.1.0",
     "next": "^14.2.23"
   },
   "peerDependencies": {

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

@@ -11,7 +11,7 @@ import { canUseKeyless } from '../utils/feature-flags';
 export async function syncKeylessConfigAction(args: AccountlessApplication & { returnUrl: string }): Promise<void> {
   const { claimUrl, publishableKey, secretKey, returnUrl } = args;
   const cookieStore = await cookies();
-  cookieStore.set(getKeylessCookieName(), JSON.stringify({ claimUrl, publishableKey, secretKey }), {
+  cookieStore.set(await getKeylessCookieName(), JSON.stringify({ claimUrl, publishableKey, secretKey }), {
     secure: true,
     httpOnly: true,
   });
@@ -55,7 +55,7 @@ export async function createOrReadKeylessAction(): Promise<null | Omit<Accountle
 
   const { claimUrl, publishableKey, secretKey, apiKeysUrl } = result;
 
-  void (await cookies()).set(getKeylessCookieName(), JSON.stringify({ claimUrl, publishableKey, secretKey }), {
+  void (await cookies()).set(await getKeylessCookieName(), JSON.stringify({ claimUrl, publishableKey, secretKey }), {
     secure: false,
     httpOnly: false,
   });

packages/nextjs/src/server/__tests__/createGetAuth.test.ts

@@ -1,8 +1,8 @@
 import { AuthStatus, constants } from '@clerk/backend/internal';
-import hmacSHA1 from 'crypto-js/hmac-sha1';
 import { NextRequest } from 'next/server';
 import { describe, expect, it } from 'vitest';
 
+import { HmacSHA1 } from '../../vendor/crypto-es';
 import { createSyncGetAuth, getAuth } from '../createGetAuth';
 
 const mockSecretKey = 'sk_test_mock';
@@ -12,7 +12,7 @@ const mockToken = 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1c2VyLWlkIn0.0u5CllULtDVD9DUU
 // { alg: 'HS256' }.{ sub: 'user-id-2' }.sig
 const mockToken2 = 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1c2VyLWlkLTIifQ.K-mhz0Ber1Hfh2xCwmvsLwhZO_IKLtKt78KTHsecEas';
 
-const mockTokenSignature = hmacSHA1(mockToken, 'sk_test_mock').toString();
+const mockTokenSignature = HmacSHA1(mockToken, 'sk_test_mock').toString();
 
 describe('createGetAuth(opts)', () => {
   it('returns a getAuth function', () => {

packages/nextjs/src/server/clerkMiddleware.ts

@@ -104,7 +104,7 @@ export const clerkMiddleware: ClerkMiddleware = (...args: unknown[]) => {
       // Handles the case where `options` is a callback function to dynamically access `NextRequest`
       const resolvedParams = typeof params === 'function' ? params(request) : params;
 
-      const keyless = getKeylessCookieValue(name => request.cookies.get(name)?.value);
+      const keyless = await getKeylessCookieValue(name => request.cookies.get(name)?.value);
 
       const publishableKey = assertKey(
         resolvedParams.publishableKey || PUBLISHABLE_KEY || keyless?.publishableKey,
@@ -218,7 +218,7 @@ export const clerkMiddleware: ClerkMiddleware = (...args: unknown[]) => {
       }
 
       const resolvedParams = typeof params === 'function' ? params(request) : params;
-      const keyless = getKeylessCookieValue(name => request.cookies.get(name)?.value);
+      const keyless = await getKeylessCookieValue(name => request.cookies.get(name)?.value);
       const isMissingPublishableKey = !(resolvedParams.publishableKey || PUBLISHABLE_KEY || keyless?.publishableKey);
       /**
        * In keyless mode, if the publishable key is missing, let the request through, to render `<ClerkProvider/>` that will resume the flow gracefully.

packages/nextjs/src/server/keyless.ts

@@ -1,12 +1,19 @@
 import type { AccountlessApplication } from '@clerk/backend';
-import hex from 'crypto-js/enc-hex';
-import sha256 from 'crypto-js/sha256';
 
 import { canUseKeyless } from '../utils/feature-flags';
 
 const keylessCookiePrefix = `__clerk_keys_`;
 
-const getKeylessCookieName = (): string => {
+async function hashString(str: string) {
+  const encoder = new TextEncoder();
+  const data = encoder.encode(str);
+  const hashBuffer = await crypto.subtle.digest('SHA-256', data);
+  const hashArray = Array.from(new Uint8Array(hashBuffer));
+  const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
+  return hashHex.slice(0, 16); // Take only the first 16 characters
+}
+
+async function getKeylessCookieName(): Promise<string> {
   // eslint-disable-next-line turbo/no-undeclared-env-vars
   const PATH = process.env.PWD;
 
@@ -18,21 +25,19 @@ const getKeylessCookieName = (): string => {
   const lastThreeDirs = PATH.split('/').filter(Boolean).slice(-3).reverse().join('/');
 
   // Hash the resulting string
-  const hash = hashString(lastThreeDirs);
+  const hash = await hashString(lastThreeDirs);
 
   return `${keylessCookiePrefix}${hash}`;
-};
-
-function hashString(str: string) {
-  return sha256(str).toString(hex).slice(0, 16); // Take only the first 16 characters
 }
 
-function getKeylessCookieValue(getter: (cookieName: string) => string | undefined): AccountlessApplication | undefined {
+async function getKeylessCookieValue(
+  getter: (cookieName: string) => string | undefined,
+): Promise<AccountlessApplication | undefined> {
   if (!canUseKeyless) {
     return undefined;
   }
 
-  const keylessCookieName = getKeylessCookieName();
+  const keylessCookieName = await getKeylessCookieName();
   let keyless;
 
   try {

packages/nextjs/src/server/utils.ts

@@ -4,13 +4,11 @@ import { isDevelopmentFromSecretKey } from '@clerk/shared/keys';
 import { logger } from '@clerk/shared/logger';
 import { isHttpOrHttps } from '@clerk/shared/proxy';
 import { handleValueOrFn, isProductionEnvironment } from '@clerk/shared/utils';
-import AES from 'crypto-js/aes';
-import encUtf8 from 'crypto-js/enc-utf8';
-import hmacSHA1 from 'crypto-js/hmac-sha1';
 import { NextResponse } from 'next/server';
 
 import { constants as nextConstants } from '../constants';
 import { canUseKeyless } from '../utils/feature-flags';
+import { AES, HmacSHA1, Utf8 } from '../vendor/crypto-es';
 import { DOMAIN, ENCRYPTION_KEY, IS_SATELLITE, PROXY_URL, SECRET_KEY, SIGN_IN_URL } from './constants';
 import {
   authSignatureInvalid,
@@ -34,7 +32,7 @@ export const setRequestHeadersOnNextResponse = (
   if (!res.headers.get(OVERRIDE_HEADERS)) {
     // Emulate a user setting overrides by explicitly adding the required nextjs headers
     // https://github.com/vercel/next.js/pull/41380
-    // @ts-expect-error
+    // @ts-expect-error -- property keys does not exist on type Headers
     res.headers.set(OVERRIDE_HEADERS, [...req.headers.keys()]);
     req.headers.forEach((val, key) => {
       res.headers.set(`${MIDDLEWARE_HEADER_PREFIX}-${key}`, val);
@@ -160,7 +158,7 @@ export function assertKey(key: string | undefined, onError: () => never): string
  * Compute a cryptographic signature from a session token and provided secret key. Used to validate that the token has not been modified when transferring between middleware and the Next.js origin.
  */
 function createTokenSignature(token: string, key: string): string {
-  return hmacSHA1(token, key).toString();
+  return HmacSHA1(token, key).toString();
 }
 
 /**
@@ -258,6 +256,6 @@ function throwInvalidEncryptionKey(): never {
 
 function decryptData(data: string, key: string) {
   const decryptedBytes = AES.decrypt(data, key);
-  const encoded = decryptedBytes.toString(encUtf8);
+  const encoded = decryptedBytes.toString(Utf8);
   return JSON.parse(encoded);
 }

packages/nextjs/src/vendor/README.md

@@ -0,0 +1,7 @@
+# Vendored dependencies
+
+The modules in this folder contain vendored dependencies that are built and inlined into the published package.
+
+## crypto-es
+
+Used as a synchronous replacement for the [Web Crypto APIs](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API). Currently, we use crypto-es to encrypt and decrypt data transferred between Next.js middleware and the application server.

packages/nextjs/src/vendor/crypto-es.js

@@ -0,0 +1,5 @@
+import { AES } from 'crypto-es/lib/aes';
+import { Utf8 } from 'crypto-es/lib/core';
+import { HmacSHA1 } from 'crypto-es/lib/sha1';
+
+export { AES, HmacSHA1, Utf8 };

packages/nextjs/tsup.config.ts

@@ -15,6 +15,7 @@ export default defineConfig(overrideOptions => {
       '!./src/**/*.test.{ts,tsx}',
       '!./src/**/server-actions.ts',
       '!./src/**/keyless-actions.ts',
+      '!./src/vendor/**',
     ],
     // We want to preserve original file structure
     // so that the "use client" directives are not lost
@@ -43,6 +44,9 @@ export default defineConfig(overrideOptions => {
     outDir: './dist/cjs',
   };
 
+  /**
+   * When server actions are built with sourcemaps, Next.js does not resolve the sourcemap URLs during build and so browser dev tools attempt to load source maps for these files from incorrect locations
+   */
   const serverActionsEsm: Options = {
     ...esm,
     entry: ['./src/**/server-actions.ts', './src/**/keyless-actions.ts'],
@@ -55,6 +59,31 @@ export default defineConfig(overrideOptions => {
     sourcemap: false,
   };
 
+  /**
+   * We vendor certain dependencies to control the output and minimize transitive dependency surface area.
+   */
+  const vendorsEsm: Options = {
+    ...esm,
+    bundle: true,
+    minify: true,
+    entry: ['./src/vendor/*.js'],
+    outDir: './dist/esm/vendor',
+    legacyOutput: false,
+    outExtension: () => ({
+      js: '.js',
+    }),
+    sourcemap: false,
+  };
+
+  const vendorsCjs: Options = {
+    ...cjs,
+    bundle: true,
+    minify: true,
+    entry: ['./src/vendor/*.js'],
+    outDir: './dist/cjs/vendor',
+    sourcemap: false,
+  };
+
   const copyPackageJson = (format: 'esm' | 'cjs') => `cp ./package.${format}.json ./dist/${format}/package.json`;
   // Tsup will not output the generated file in the same location as the source file
   // So we need to move the server-actions.js file to the app-router folder manually
@@ -73,5 +102,5 @@ export default defineConfig(overrideOptions => {
     moveKeylessActions('esm'),
     moveKeylessActions('cjs'),
     shouldPublish && 'pnpm publish:local',
-  ])(esm, cjs, serverActionsEsm, serverActionsCjs);
+  ])(esm, cjs, serverActionsEsm, serverActionsCjs, vendorsEsm, vendorsCjs);
 });