fix(repo): Run sessions tests with disabled web security

.github/workflows/ci.yml

@@ -171,7 +171,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        test-name: [ 'generic', 'express', 'quickstart', 'ap-flows', 'elements', 'sessions', 'astro', 'expo-web', 'tanstack-start', 'tanstack-router', 'vue', 'nuxt', 'react-router']
+        test-name: [ 'generic', 'express', 'quickstart', 'ap-flows', 'elements', 'localhost', 'sessions', 'astro', 'expo-web', 'tanstack-start', 'tanstack-router', 'vue', 'nuxt', 'react-router']
         test-project: ['chrome']
         include:
           - test-name: 'nextjs'

integration/playwright.config.ts

@@ -38,7 +38,14 @@ export default defineConfig({
     },
     {
       name: 'chrome',
-      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+      use: {
+        ...devices['Desktop Chrome'],
+        channel: 'chrome',
+        launchOptions: {
+          args: [process.env.DISABLE_WEB_SECURITY ? '--disable-web-security' : ''],
+        },
+      },
+
       dependencies: ['setup'],
     },
     // {

integration/scripts/proxyServer.ts

@@ -19,6 +19,9 @@ export const createProxyServer = (opts: ProxyServerOptions) => {
   const createServer: typeof _createServer = usingSSL ? https.createServer.bind(https) : http.createServer.bind(http);
 
   return createServer(opts.ssl, (req, res) => {
+    console.log(`/n/n/n/n------------------------------------`);
+    console.log('Proxying request', req.headers.host, req.url);
+    console.log('Headers', req.headers);
     const hostHeader = req.headers.host || '';
     if (opts.targets[hostHeader]) {
       proxy.web(req, res, { target: opts.targets[hostHeader] });

integration/tests/sessions/localhost-different-port-different-instance.test.ts → integration/tests/localhost/localhost-different-port-different-instance.test.ts

@@ -14,9 +14,9 @@ import { expect, test } from '@playwright/test';
 import type { Application } from '../../models/application';
 import type { FakeUser } from '../../testUtils';
 import { createTestUtils } from '../../testUtils';
-import { prepareApplication } from './utils';
+import { prepareApplication } from '../sessions/utils';
 
-test.describe('multiple apps running on localhost using different Clerk instances @sessions', () => {
+test.describe('multiple apps running on localhost using different Clerk instances @localhost', () => {
   test.describe.configure({ mode: 'serial' });
 
   let fakeUsers: FakeUser[];

integration/tests/sessions/localhost-different-port-same-instance.test.ts → integration/tests/localhost/localhost-different-port-same-instance.test.ts

@@ -12,9 +12,9 @@ import { expect, test } from '@playwright/test';
 import type { Application } from '../../models/application';
 import type { FakeUser } from '../../testUtils';
 import { createTestUtils } from '../../testUtils';
-import { prepareApplication } from './utils';
+import { prepareApplication } from '../sessions/utils';
 
-test.describe('multiple apps running on localhost using same Clerk instance @sessions', () => {
+test.describe('multiple apps running on localhost using same Clerk instance @localhost', () => {
   test.describe.configure({ mode: 'serial' });
 
   let fakeUsers: FakeUser[];

integration/tests/sessions/localhost-switch-instance.test.ts → integration/tests/localhost/localhost-switch-instance.test.ts

@@ -13,9 +13,9 @@ import { expect, test } from '@playwright/test';
 import { getPort } from '../../scripts';
 import type { FakeUser } from '../../testUtils';
 import { createTestUtils } from '../../testUtils';
-import { getEnvForMultiAppInstance, prepareApplication } from './utils';
+import { getEnvForMultiAppInstance, prepareApplication } from '../sessions/utils';
 
-test.describe('switching instances on localhost same port @sessions', () => {
+test.describe('switching instances on localhost same port @localhost', () => {
   test.describe.configure({ mode: 'serial', timeout: 5 * 60 * 1000 });
   const fakeUsers: FakeUser[] = [];
 

integration/tests/sessions/root-subdomain-prod-instances.test.ts

@@ -97,13 +97,13 @@ test.describe('root and subdomain production apps @sessions', () => {
       // Check that the cookies are set as expected
       const tab0Cookies = await u[0].page.cookies();
       expect(tab0Cookies.get('__session')).toBeDefined();
-      expect(tab0Cookies.get('__session').domain).toEqual(hosts[0]);
+      expect(tab0Cookies.get('__session').domain).toEqual(hosts[0].split(':')[0]);
       expect(tab0Cookies.get('__session').value).toEqual(tab0Cookies.get('__session_*').value);
       expect(tab0Cookies.get('__session_*').name.split('__session_')[1].length).toEqual(8);
 
       expect(tab0Cookies.get('__client_uat')).toBeDefined();
       // The client_uat cookie should always be set on etld+1
-      expect(tab0Cookies.get('__client_uat').domain).toEqual('.' + hosts[0]);
+      expect(tab0Cookies.get('__client_uat').domain).toEqual('.' + hosts[0].split(':')[0]);
       expect(tab0Cookies.get('__client_uat').value).toEqual(tab0Cookies.get('__client_uat_*').value);
       expect(tab0Cookies.get('__client_uat').domain).toEqual(tab0Cookies.get('__client_uat_*').domain);
       expect(tab0Cookies.get('__client_uat_*').name.split('__client_uat_')[1].length).toEqual(8);
@@ -131,7 +131,7 @@ test.describe('root and subdomain production apps @sessions', () => {
       expect(tab0Cookies.raw().filter(c => c.name.startsWith('__client_uat')).length).toEqual(2);
       // the session cookie should be set on the domain of the app
       // so, it can be accessed by the host server
-      expect(tab1Cookies.get('__session').domain).toEqual(hosts[1]);
+      expect(tab1Cookies.get('__session').domain).toEqual(hosts[1].split(':')[0]);
       expect(tab1Cookies.get('__session').domain).not.toEqual(tab0Cookies.get('__session').domain);
     });
 
@@ -180,7 +180,7 @@ test.describe('root and subdomain production apps @sessions', () => {
    * 5. The second app is going to be served on sub-1.multiple-apps-e2e.clerk.app
    */
   test.describe('multiple apps same domain for different production instances', () => {
-    const hosts = ['multiple-apps-e2e.clerk.app', 'sub-2.multiple-apps-e2e.clerk.app'];
+    const hosts = ['multiple-apps-e2e.clerk.app:8443', 'sub-2.multiple-apps-e2e.clerk.app:8443'];
     let fakeUsers: FakeUser[];
     let server: Server;
     let apps: Array<{ app: Application; serverUrl: string }>;
@@ -235,16 +235,16 @@ test.describe('root and subdomain production apps @sessions', () => {
       const tab0Cookies = await u[0].page.cookies();
       expect(tab0Cookies.get('__client')).toBeDefined();
       expect(tab0Cookies.get('__client_*')).not.toBeDefined();
-      expect(tab0Cookies.get('__client').domain).toBe(`.clerk.${hosts[0]}`);
+      expect(tab0Cookies.get('__client').domain).toBe(`.clerk.${hosts[0].split(':')[0]}`);
       expect(tab0Cookies.get('__client').httpOnly).toBeTruthy();
 
       expect(tab0Cookies.get('__session')).toBeDefined();
-      expect(tab0Cookies.get('__session').domain).toEqual(hosts[0]);
+      expect(tab0Cookies.get('__session').domain).toEqual(hosts[0].split(':')[0]);
 
       // ensure that only 2 client_uat cookies (base and suffixed variant) are visible here
       expect([...tab0Cookies.values()].filter(c => c.name.startsWith('__client_uat')).length).toEqual(2);
       // The client_uat cookie should always be set on etld+1
-      expect(tab0Cookies.get('__client_uat_*').domain).toEqual('.' + hosts[0]);
+      expect(tab0Cookies.get('__client_uat_*').domain).toEqual('.' + hosts[0].split(':')[0]);
 
       u[1].po.expect.toBeHandshake(await u[1].page.goto(`https://${hosts[1]}`));
       await u[1].po.expect.toBeSignedOut();
@@ -263,13 +263,13 @@ test.describe('root and subdomain production apps @sessions', () => {
       const tab1Cookies = await u[1].page.cookies();
       expect(tab1Cookies.get('__client')).toBeDefined();
       expect(tab1Cookies.get('__client_*')).not.toBeDefined();
-      expect(tab1Cookies.get('__client').domain).toBe(`.clerk.${hosts[1]}`);
+      expect(tab1Cookies.get('__client').domain).toBe(`.clerk.${hosts[1].split(':')[0]}`);
 
       expect(tab1Cookies.get('__session')).toBeDefined();
-      expect(tab1Cookies.get('__session').domain).toEqual(hosts[1]);
+      expect(tab1Cookies.get('__session').domain).toEqual(hosts[1].split(':')[0]);
 
       // ensure that all client_uat cookies are still set on the root domain
-      expect(tab1Cookies.get('__client_uat_*').domain).toEqual('.' + hosts[0]);
+      expect(tab1Cookies.get('__client_uat_*').domain).toEqual('.' + hosts[0].split(':')[0]);
       // we have 3 client_uat cookies here: 1 base and 2 suffixed variants
       expect(tab1Cookies.raw().filter(c => c.name.startsWith('__client_uat')).length).toEqual(3);
     });
@@ -312,7 +312,7 @@ test.describe('root and subdomain production apps @sessions', () => {
    *
    */
   test.describe('multiple apps different same-level subdomains  for different production instances', () => {
-    const hosts = ['sub-1.multiple-apps-e2e.clerk.app', 'sub-2.multiple-apps-e2e.clerk.app'];
+    const hosts = ['sub-1.multiple-apps-e2e.clerk.app:8443', 'sub-2.multiple-apps-e2e.clerk.app:8443'];
     let fakeUsers: FakeUser[];
     let server: Server;
     let apps: Array<{ app: Application; serverUrl: string }>;

package.json

@@ -38,11 +38,12 @@
     "test:integration:expo-web": "E2E_APP_ID=expo.expo-web pnpm test:integration:base --grep @expo-web",
     "test:integration:express": "E2E_APP_ID=express.* pnpm test:integration:base --grep @express",
     "test:integration:generic": "E2E_APP_ID=react.vite.*,next.appRouter.withEmailCodes* pnpm test:integration:base --grep @generic",
+    "test:integration:localhost": "pnpm test:integration:base --grep @localhost",
     "test:integration:nextjs": "E2E_APP_ID=next.appRouter.* pnpm test:integration:base --grep @nextjs",
     "test:integration:nuxt": "E2E_APP_ID=nuxt.node npm run test:integration:base -- --grep @nuxt",
     "test:integration:quickstart": "E2E_APP_ID=quickstart.* pnpm test:integration:base --grep @quickstart",
     "test:integration:react-router": "E2E_APP_ID=react-router.* npm run test:integration:base -- --grep @react-router",
-    "test:integration:sessions": "pnpm test:integration:base --grep @sessions",
+    "test:integration:sessions": "DISABLE_WEB_SECURITY=true pnpm test:integration:base --grep @sessions",
     "test:integration:tanstack-router": "E2E_APP_ID=tanstack.router pnpm test:integration:base --grep @tanstack-router",
     "test:integration:tanstack-start": "E2E_APP_ID=tanstack.start pnpm test:integration:base --grep @tanstack-start",
     "test:integration:vue": "E2E_APP_ID=vue.vite pnpm test:integration:base --grep @vue",

turbo.json

@@ -193,12 +193,18 @@
       "inputs": ["integration/**"],
       "outputLogs": "new-only"
     },
-    "//#test:integration:sessions": {
+    "//#test:integration:localhost": {
       "dependsOn": ["@clerk/clerk-js#build", "@clerk/backend#build", "@clerk/nextjs#build"],
       "env": ["CLEANUP", "DEBUG", "E2E_*", "INTEGRATION_INSTANCE_KEYS", "NODE_EXTRA_CA_CERTS"],
       "inputs": ["integration/**"],
       "outputLogs": "new-only"
     },
+    "//#test:integration:sessions": {
+      "dependsOn": ["@clerk/clerk-js#build", "@clerk/backend#build", "@clerk/nextjs#build"],
+      "env": ["CLEANUP", "DEBUG", "DISABLE_WEB_SECURITY", "E2E_*", "INTEGRATION_INSTANCE_KEYS", "NODE_EXTRA_CA_CERTS"],
+      "inputs": ["integration/**"],
+      "outputLogs": "new-only"
+    },
     "//#test:integration:elements": {
       "dependsOn": ["@clerk/clerk-js#build", "@clerk/backend#build", "@clerk/nextjs#build", "@clerk/elements#build"],
       "env": ["CLEANUP", "DEBUG", "E2E_*", "INTEGRATION_INSTANCE_KEYS"],