Merge branch 'main' into jacek/fix-upgrade-nuxt-getauth-matcher

jacekradko · web-flow · commit 806a3777a5d2 · 2026-02-17T11:21:04.000-06:00
diff --git a/.changeset/fair-banks-attack.md b/.changeset/fair-banks-attack.md
@@ -0,0 +1,7 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/shared': minor
+'@clerk/react': minor
+---
+
+Renames `mountTaskSetupMfa` and `unmountTaskSetupMfa` to `mountTaskSetupMFA` and `unmountTaskSetupMFA` respectively
diff --git a/.changeset/fix-samesite-replit-dev.md b/.changeset/fix-samesite-replit-dev.md
@@ -0,0 +1,7 @@
+---
+'@clerk/shared': patch
+'@clerk/clerk-js': patch
+'@clerk/ui': patch
+---
+
+Set `SameSite=None` on cookies for `.replit.dev` origins and consolidate third-party domain list
diff --git a/packages/clerk-js/sandbox/app.ts b/packages/clerk-js/sandbox/app.ts
@@ -422,7 +422,7 @@ void (async () => {
       );
     },
     '/task-setup-mfa': () => {
-      Clerk.mountTaskSetupMfa(
+      Clerk.mountTaskSetupMFA(
         app,
         componentControls.taskSetupMFA.getProps() ?? {
           redirectUrlComplete: '/user-profile',
diff --git a/packages/clerk-js/src/core/auth/cookies/__tests__/clientUat.test.ts b/packages/clerk-js/src/core/auth/cookies/__tests__/clientUat.test.ts
@@ -6,12 +6,14 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { getCookieDomain } from '../../getCookieDomain';
 import { getSecureAttribute } from '../../getSecureAttribute';
 import { createClientUatCookie } from '../clientUat';
+import { requiresSameSiteNone } from '../requireSameSiteNone';
 
 vi.mock('@clerk/shared/cookie');
 vi.mock('@clerk/shared/date');
 vi.mock('@clerk/shared/internal/clerk-js/runtime');
 vi.mock('../../getCookieDomain');
 vi.mock('../../getSecureAttribute');
+vi.mock('../requireSameSiteNone');
 
 describe('createClientUatCookie', () => {
   const mockCookieSuffix = 'test-suffix';
@@ -26,6 +28,7 @@ describe('createClientUatCookie', () => {
     mockGet.mockReset();
     (addYears as ReturnType<typeof vi.fn>).mockReturnValue(mockExpires);
     (inCrossOriginIframe as ReturnType<typeof vi.fn>).mockReturnValue(false);
+    (requiresSameSiteNone as ReturnType<typeof vi.fn>).mockReturnValue(false);
     (getCookieDomain as ReturnType<typeof vi.fn>).mockReturnValue(mockDomain);
     (getSecureAttribute as ReturnType<typeof vi.fn>).mockReturnValue(true);
     (createCookieHandler as ReturnType<typeof vi.fn>).mockImplementation(() => ({
@@ -125,4 +128,22 @@ describe('createClientUatCookie', () => {
 
     expect(result).toBe(0);
   });
+
+  it('should set cookies with SameSite=None when the host requires it', () => {
+    (requiresSameSiteNone as ReturnType<typeof vi.fn>).mockReturnValue(true);
+    const cookieHandler = createClientUatCookie(mockCookieSuffix);
+    cookieHandler.set({
+      id: 'test-client',
+      updatedAt: new Date('2024-01-01'),
+      signedInSessions: ['session1'],
+    });
+
+    expect(mockSet).toHaveBeenCalledWith('1704067200', {
+      domain: mockDomain,
+      expires: mockExpires,
+      sameSite: 'None',
+      secure: true,
+      partitioned: false,
+    });
+  });
 });
diff --git a/packages/clerk-js/src/core/auth/cookies/__tests__/session.test.ts b/packages/clerk-js/src/core/auth/cookies/__tests__/session.test.ts
@@ -4,12 +4,14 @@ import { inCrossOriginIframe } from '@clerk/shared/internal/clerk-js/runtime';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { getSecureAttribute } from '../../getSecureAttribute';
+import { requiresSameSiteNone } from '../requireSameSiteNone';
 import { createSessionCookie } from '../session';
 
 vi.mock('@clerk/shared/cookie');
 vi.mock('@clerk/shared/date');
 vi.mock('@clerk/shared/internal/clerk-js/runtime');
 vi.mock('../../getSecureAttribute');
+vi.mock('../requireSameSiteNone');
 
 describe('createSessionCookie', () => {
   const mockCookieSuffix = 'test-suffix';
@@ -24,6 +26,7 @@ describe('createSessionCookie', () => {
     mockGet.mockReset();
     (addYears as ReturnType<typeof vi.fn>).mockReturnValue(mockExpires);
     (inCrossOriginIframe as ReturnType<typeof vi.fn>).mockReturnValue(false);
+    (requiresSameSiteNone as ReturnType<typeof vi.fn>).mockReturnValue(false);
     (getSecureAttribute as ReturnType<typeof vi.fn>).mockReturnValue(true);
     (createCookieHandler as ReturnType<typeof vi.fn>).mockImplementation(() => ({
       set: mockSet,
@@ -113,4 +116,17 @@ describe('createSessionCookie', () => {
 
     expect(result).toBe('non-suffixed-value');
   });
+
+  it('should set cookies with None sameSite on .replit.dev origins', () => {
+    (requiresSameSiteNone as ReturnType<typeof vi.fn>).mockReturnValue(true);
+    const cookieHandler = createSessionCookie(mockCookieSuffix);
+    cookieHandler.set(mockToken);
+
+    expect(mockSet).toHaveBeenCalledWith(mockToken, {
+      expires: mockExpires,
+      sameSite: 'None',
+      secure: true,
+      partitioned: false,
+    });
+  });
 });
diff --git a/packages/clerk-js/src/core/auth/cookies/clientUat.ts b/packages/clerk-js/src/core/auth/cookies/clientUat.ts
@@ -6,6 +6,7 @@ import type { ClientResource } from '@clerk/shared/types';
 
 import { getCookieDomain } from '../getCookieDomain';
 import { getSecureAttribute } from '../getSecureAttribute';
+import { requiresSameSiteNone } from './requireSameSiteNone';
 
 const CLIENT_UAT_COOKIE_NAME = '__client_uat';
 
@@ -37,7 +38,11 @@ export const createClientUatCookie = (cookieSuffix: string): ClientUatCookieHand
      * Generally, this is handled by redirectWithAuth() being called and relying on the dev browser ID in the URL,
      * but if that isn't used we rely on this. In production, nothing is cross-domain and Lax is used when client_uat is set from FAPI.
      */
-    const sameSite = __BUILD_VARIANT_CHIPS__ ? 'None' : inCrossOriginIframe() ? 'None' : 'Strict';
+    const sameSite = __BUILD_VARIANT_CHIPS__
+      ? 'None'
+      : inCrossOriginIframe() || requiresSameSiteNone()
+        ? 'None'
+        : 'Strict';
     const secure = getSecureAttribute(sameSite);
     const partitioned = __BUILD_VARIANT_CHIPS__ && secure;
     const domain = getCookieDomain();
diff --git a/packages/clerk-js/src/core/auth/cookies/devBrowser.ts b/packages/clerk-js/src/core/auth/cookies/devBrowser.ts
@@ -5,6 +5,7 @@ import { inCrossOriginIframe } from '@clerk/shared/internal/clerk-js/runtime';
 import { getSuffixedCookieName } from '@clerk/shared/keys';
 
 import { getSecureAttribute } from '../getSecureAttribute';
+import { requiresSameSiteNone } from './requireSameSiteNone';
 
 export type DevBrowserCookieHandler = {
   set: (jwt: string) => void;
@@ -13,7 +14,7 @@ export type DevBrowserCookieHandler = {
 };
 
 const getCookieAttributes = () => {
-  const sameSite = inCrossOriginIframe() ? 'None' : 'Lax';
+  const sameSite = inCrossOriginIframe() || requiresSameSiteNone() ? 'None' : 'Lax';
   const secure = getSecureAttribute(sameSite);
   return { sameSite, secure } as const;
 };
diff --git a/packages/clerk-js/src/core/auth/cookies/requireSameSiteNone.ts b/packages/clerk-js/src/core/auth/cookies/requireSameSiteNone.ts
@@ -0,0 +1 @@
+export { isThirdPartyCookieDomain as requiresSameSiteNone } from '@clerk/shared/internal/clerk-js/thirdPartyDomains';
diff --git a/packages/clerk-js/src/core/auth/cookies/session.ts b/packages/clerk-js/src/core/auth/cookies/session.ts
@@ -4,6 +4,7 @@ import { inCrossOriginIframe } from '@clerk/shared/internal/clerk-js/runtime';
 import { getSuffixedCookieName } from '@clerk/shared/keys';
 
 import { getSecureAttribute } from '../getSecureAttribute';
+import { requiresSameSiteNone } from './requireSameSiteNone';
 
 const SESSION_COOKIE_NAME = '__session';
 
@@ -14,7 +15,7 @@ export type SessionCookieHandler = {
 };
 
 const getCookieAttributes = () => {
-  const sameSite = __BUILD_VARIANT_CHIPS__ ? 'None' : inCrossOriginIframe() ? 'None' : 'Lax';
+  const sameSite = __BUILD_VARIANT_CHIPS__ ? 'None' : inCrossOriginIframe() || requiresSameSiteNone() ? 'None' : 'Lax';
   const secure = getSecureAttribute(sameSite);
   const partitioned = __BUILD_VARIANT_CHIPS__ && secure;
   return { sameSite, secure, partitioned } as const;
diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts
@@ -1444,7 +1444,7 @@ export class Clerk implements ClerkInterface {
     void this.#clerkUI?.then(ui => ui.ensureMounted()).then(controls => controls.unmountComponent({ node }));
   };
 
-  public mountTaskSetupMfa = (node: HTMLDivElement, props?: TaskSetupMFAProps) => {
+  public mountTaskSetupMFA = (node: HTMLDivElement, props?: TaskSetupMFAProps) => {
     this.assertComponentsReady(this.#clerkUI);
 
     const component = 'TaskSetupMFA';
@@ -1459,10 +1459,10 @@ export class Clerk implements ClerkInterface {
         }),
       );
 
-    this.telemetry?.record(eventPrebuiltComponentMounted('TaskSetupMfa', props));
+    this.telemetry?.record(eventPrebuiltComponentMounted('TaskSetupMFA', props));
   };
 
-  public unmountTaskSetupMfa = (node: HTMLDivElement) => {
+  public unmountTaskSetupMFA = (node: HTMLDivElement) => {
     void this.#clerkUI?.then(ui => ui.ensureMounted()).then(controls => controls.unmountComponent({ node }));
   };
 
diff --git a/packages/react/src/components/uiComponents.tsx b/packages/react/src/components/uiComponents.tsx
@@ -742,8 +742,8 @@ export const TaskSetupMFA = withClerk(
         {clerk.loaded && (
           <ClerkHostRenderer
             component={component}
-            mount={clerk.mountTaskSetupMfa}
-            unmount={clerk.unmountTaskSetupMfa}
+            mount={clerk.mountTaskSetupMFA}
+            unmount={clerk.unmountTaskSetupMFA}
             updateProps={(clerk as any).__internal_updateProps}
             props={props}
             rootProps={rendererRootProps}
diff --git a/packages/react/src/isomorphicClerk.ts b/packages/react/src/isomorphicClerk.ts
@@ -158,7 +158,7 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
   private premountOAuthConsentNodes = new Map<HTMLDivElement, __internal_OAuthConsentProps | undefined>();
   private premountTaskChooseOrganizationNodes = new Map<HTMLDivElement, TaskChooseOrganizationProps | undefined>();
   private premountTaskResetPasswordNodes = new Map<HTMLDivElement, TaskResetPasswordProps | undefined>();
-  private premountTaskSetupMfaNodes = new Map<HTMLDivElement, TaskSetupMFAProps | undefined>();
+  private premountTaskSetupMFANodes = new Map<HTMLDivElement, TaskSetupMFAProps | undefined>();
   // A separate Map of `addListener` method calls to handle multiple listeners.
   private premountAddListenerCalls = new Map<
     ListenerCallback,
@@ -707,8 +707,8 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
       clerkjs.mountTaskResetPassword(node, props);
     });
 
-    this.premountTaskSetupMfaNodes.forEach((props, node) => {
-      clerkjs.mountTaskSetupMfa(node, props);
+    this.premountTaskSetupMFANodes.forEach((props, node) => {
+      clerkjs.mountTaskSetupMFA(node, props);
     });
 
     /**
@@ -1275,19 +1275,19 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
     }
   };
 
-  mountTaskSetupMfa = (node: HTMLDivElement, props?: TaskSetupMFAProps): void => {
+  mountTaskSetupMFA = (node: HTMLDivElement, props?: TaskSetupMFAProps): void => {
     if (this.clerkjs && this.loaded) {
-      this.clerkjs.mountTaskSetupMfa(node, props);
+      this.clerkjs.mountTaskSetupMFA(node, props);
     } else {
-      this.premountTaskSetupMfaNodes.set(node, props);
+      this.premountTaskSetupMFANodes.set(node, props);
     }
   };
 
-  unmountTaskSetupMfa = (node: HTMLDivElement): void => {
+  unmountTaskSetupMFA = (node: HTMLDivElement): void => {
     if (this.clerkjs && this.loaded) {
-      this.clerkjs.unmountTaskSetupMfa(node);
+      this.clerkjs.unmountTaskSetupMFA(node);
     } else {
-      this.premountTaskSetupMfaNodes.delete(node);
+      this.premountTaskSetupMFANodes.delete(node);
     }
   };
 
diff --git a/packages/shared/src/internal/clerk-js/thirdPartyDomains.ts b/packages/shared/src/internal/clerk-js/thirdPartyDomains.ts
@@ -0,0 +1,30 @@
+/**
+ * Domains of third-party embedding platforms (e.g. online IDEs, preview environments)
+ * that require special handling for cookies and OAuth flows.
+ *
+ * These domains need:
+ * - `SameSite=None` on cookies to function correctly
+ * - Popup-based OAuth flows instead of redirects
+ */
+export const THIRD_PARTY_COOKIE_DOMAINS = [
+  '.lovable.app',
+  '.lovableproject.com',
+  '.webcontainer-api.io',
+  '.vusercontent.net',
+  '.v0.dev',
+  '.v0.app',
+  '.lp.dev',
+  '.replit.dev',
+];
+
+/**
+ * Returns `true` if the current origin belongs to a known third-party
+ * embedding platform that requires `SameSite=None` on cookies.
+ */
+export function isThirdPartyCookieDomain(): boolean {
+  try {
+    return THIRD_PARTY_COOKIE_DOMAINS.some(domain => window.location.hostname.endsWith(domain));
+  } catch {
+    return false;
+  }
+}
diff --git a/packages/shared/src/types/clerk.ts b/packages/shared/src/types/clerk.ts
@@ -721,15 +721,15 @@ export interface Clerk {
    * @param targetNode - Target node to mount the TaskSetupMFA component.
    * @param props - configuration parameters.
    */
-  mountTaskSetupMfa: (targetNode: HTMLDivElement, props?: TaskSetupMFAProps) => void;
+  mountTaskSetupMFA: (targetNode: HTMLDivElement, props?: TaskSetupMFAProps) => void;
 
   /**
    * Unmount a TaskSetupMFA component from the target element.
    * If there is no component mounted at the target node, results in a noop.
    *
    * @param targetNode - Target node to unmount the TaskSetupMFA component from.
    */
-  unmountTaskSetupMfa: (targetNode: HTMLDivElement) => void;
+  unmountTaskSetupMFA: (targetNode: HTMLDivElement) => void;
 
   /**
    * @internal
diff --git a/packages/ui/src/utils/__tests__/originPrefersPopup.test.ts b/packages/ui/src/utils/__tests__/originPrefersPopup.test.ts
@@ -15,11 +15,18 @@ describe('originPrefersPopup', () => {
   // Store original location to restore after tests
   const originalLocation = window.location;
 
-  // Helper function to mock window.location.origin
+  // Helper function to mock window.location.hostname
   const mockLocationOrigin = (origin: string) => {
+    let hostname: string;
+    try {
+      hostname = new URL(origin).hostname;
+    } catch {
+      hostname = origin;
+    }
     Object.defineProperty(window, 'location', {
       value: {
         origin,
+        hostname,
       },
       writable: true,
       configurable: true,
@@ -176,12 +183,12 @@ describe('originPrefersPopup', () => {
         expect(originPrefersPopup()).toBe(false);
       });
 
-      it('should be case sensitive', () => {
+      it('should be case insensitive (hostnames are normalized to lowercase)', () => {
         mockLocationOrigin('https://app.LOVABLE.APP');
-        expect(originPrefersPopup()).toBe(false);
+        expect(originPrefersPopup()).toBe(true);
 
         mockLocationOrigin('https://APP.V0.DEV');
-        expect(originPrefersPopup()).toBe(false);
+        expect(originPrefersPopup()).toBe(true);
       });
 
       it('should handle malformed origins gracefully', () => {
diff --git a/packages/ui/src/utils/originPrefersPopup.ts b/packages/ui/src/utils/originPrefersPopup.ts
@@ -1,20 +1,11 @@
 import { inIframe } from '@clerk/shared/internal/clerk-js/runtime';
-
-const POPUP_PREFERRED_ORIGINS = [
-  '.lovable.app',
-  '.lovableproject.com',
-  '.webcontainer-api.io',
-  '.vusercontent.net',
-  '.v0.dev',
-  '.v0.app',
-  '.lp.dev',
-];
+import { THIRD_PARTY_COOKIE_DOMAINS } from '@clerk/shared/internal/clerk-js/thirdPartyDomains';
 
 /**
  * Returns `true` if the current origin is one that is typically embedded via an iframe, which would benefit from the
  * popup flow.
  * @returns {boolean} Whether the current origin prefers the popup flow.
  */
 export function originPrefersPopup(): boolean {
-  return inIframe() || POPUP_PREFERRED_ORIGINS.some(origin => window.location.origin.endsWith(origin));
+  return inIframe() || THIRD_PARTY_COOKIE_DOMAINS.some(domain => window.location.hostname.endsWith(domain));
 }

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { isThirdPartyCookieDomain as requiresSameSiteNone } from '@clerk/shared/internal/clerk-js/thirdPartyDomains';`