Merge branch 'main' into jacek/user-4607-do-not-await-nonce-in-the-clerkprovider

Author: jacekradko

.changeset/fix-turbopack-ui-import.md

@@ -0,0 +1,5 @@
+---
+'@clerk/nextjs': patch
+---
+
+Fix Turbopack compatibility for `ui` prop by adding `turbopackIgnore` magic comment alongside `webpackIgnore` on the dynamic `@clerk/ui/entry` import. This prevents both bundlers from statically resolving the optional dependency at build time.

.changeset/wild-clocks-stare.md

@@ -0,0 +1,2 @@
+---
+---

integration/tests/next-quickstart-keyless.test.ts

@@ -89,20 +89,28 @@ test.describe('Keyless mode @quickstart', () => {
     await newPage.waitForLoadState();
 
     await newPage.waitForURL(url => {
-      const urlToReturnTo = `${dashboardUrl}apps/claim?token=`;
-
+      const signInForceRedirectUrl = url.searchParams.get('sign_in_force_redirect_url');
       const signUpForceRedirectUrl = url.searchParams.get('sign_up_force_redirect_url');
 
-      const signUpForceRedirectUrlCheck =
-        signUpForceRedirectUrl?.startsWith(urlToReturnTo) ||
-        (signUpForceRedirectUrl?.startsWith(`${dashboardUrl}prepare-account`) &&
-          signUpForceRedirectUrl?.includes(encodeURIComponent('apps/claim?token=')));
+      const signInHasRequiredParams =
+        signInForceRedirectUrl?.includes(`${dashboardUrl}apps/claim`) &&
+        signInForceRedirectUrl?.includes('token=') &&
+        signInForceRedirectUrl?.includes('framework=nextjs');
+
+      const signUpRegularCase =
+        signUpForceRedirectUrl?.includes(`${dashboardUrl}apps/claim`) &&
+        signUpForceRedirectUrl?.includes('token=') &&
+        signUpForceRedirectUrl?.includes('framework=nextjs');
+
+      const signUpPrepareAccountCase =
+        signUpForceRedirectUrl?.startsWith(`${dashboardUrl}prepare-account`) &&
+        signUpForceRedirectUrl?.includes(encodeURIComponent('apps/claim')) &&
+        signUpForceRedirectUrl?.includes(encodeURIComponent('token=')) &&
+        signUpForceRedirectUrl?.includes(encodeURIComponent('framework=nextjs'));
+
+      const signUpHasRequiredParams = signUpRegularCase || signUpPrepareAccountCase;
 
-      return (
-        url.pathname === '/apps/claim/sign-in' &&
-        url.searchParams.get('sign_in_force_redirect_url')?.startsWith(urlToReturnTo) &&
-        signUpForceRedirectUrlCheck
-      );
+      return url.pathname === '/apps/claim/sign-in' && signInHasRequiredParams && signUpHasRequiredParams;
     });
   });
 

integration/tests/tanstack-start/keyless.test.ts

@@ -69,20 +69,28 @@ test.describe('Keyless mode @tanstack-react-start', () => {
     await newPage.waitForLoadState();
 
     await newPage.waitForURL(url => {
-      const urlToReturnTo = `${dashboardUrl}apps/claim?token=`;
-
+      const signInForceRedirectUrl = url.searchParams.get('sign_in_force_redirect_url');
       const signUpForceRedirectUrl = url.searchParams.get('sign_up_force_redirect_url');
 
-      const signUpForceRedirectUrlCheck =
-        signUpForceRedirectUrl?.startsWith(urlToReturnTo) ||
-        (signUpForceRedirectUrl?.startsWith(`${dashboardUrl}prepare-account`) &&
-          signUpForceRedirectUrl?.includes(encodeURIComponent('apps/claim?token=')));
+      const signInHasRequiredParams =
+        signInForceRedirectUrl?.includes(`${dashboardUrl}apps/claim`) &&
+        signInForceRedirectUrl?.includes('token=') &&
+        signInForceRedirectUrl?.includes('framework=tanstack-react-start');
+
+      const signUpRegularCase =
+        signUpForceRedirectUrl?.includes(`${dashboardUrl}apps/claim`) &&
+        signUpForceRedirectUrl?.includes('token=') &&
+        signUpForceRedirectUrl?.includes('framework=tanstack-react-start');
+
+      const signUpPrepareAccountCase =
+        signUpForceRedirectUrl?.startsWith(`${dashboardUrl}prepare-account`) &&
+        signUpForceRedirectUrl?.includes(encodeURIComponent('apps/claim')) &&
+        signUpForceRedirectUrl?.includes(encodeURIComponent('token=')) &&
+        signUpForceRedirectUrl?.includes(encodeURIComponent('framework=tanstack-react-start'));
+
+      const signUpHasRequiredParams = signUpRegularCase || signUpPrepareAccountCase;
 
-      return (
-        url.pathname === '/apps/claim/sign-in' &&
-        url.searchParams.get('sign_in_force_redirect_url')?.startsWith(urlToReturnTo) &&
-        signUpForceRedirectUrlCheck
-      );
+      return url.pathname === '/apps/claim/sign-in' && signInHasRequiredParams && signUpHasRequiredParams;
     });
   });
 

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

@@ -95,11 +95,11 @@ const NextClientClerkProvider = <TUi extends Ui = Ui>(props: NextClerkProviderPr
   // the ClerkUI constructor is stripped (not serializable). Re-import it on the client.
   const uiProp = mergedProps.ui as { __brand?: string; ClerkUI?: unknown } | undefined;
   if (uiProp?.__brand && !uiProp?.ClerkUI) {
-    // webpackIgnore prevents the bundler from statically resolving @clerk/ui/entry at build time,
+    // webpackIgnore/turbopackIgnore prevent the bundler from statically resolving @clerk/ui/entry at build time,
     // since @clerk/ui is an optional dependency that may not be installed.
-    // @ts-expect-error - @clerk/ui/entry is resolved by the user's Next.js bundler at runtime, not at package build time
+    // @ts-expect-error - @clerk/ui is an optional peer dependency, not declared in this package's dependencies
     // eslint-disable-next-line import/no-unresolved
-    _resolvedClerkUI ??= import(/* webpackIgnore: true */ '@clerk/ui/entry').then(
+    _resolvedClerkUI ??= import(/* webpackIgnore: true */ /* turbopackIgnore: true */ '@clerk/ui/entry').then(
       (m: { ClerkUI: ClerkUIConstructor }) => m.ClerkUI,
     );
     mergedProps.ui = { ...mergedProps.ui, ClerkUI: _resolvedClerkUI };