test(e2e): Expand Express testing

Author: tmilewski

.changeset/hot-moose-leave.md

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

integration/presets/longRunningApps.ts

@@ -82,6 +82,8 @@ export const createLongRunningApps = () => {
     { id: 'nuxt.node', config: nuxt.node, env: envs.withCustomRoles },
     { id: 'react-router.node', config: reactRouter.reactRouterNode, env: envs.withEmailCodes },
     { id: 'express.vite.withEmailCodes', config: express.vite, env: envs.withEmailCodes },
+    { id: 'express.vite.withEmailCodesProxy', config: express.vite, env: envs.withEmailCodesProxy },
+    { id: 'express.vite.withCustomRoles', config: express.vite, env: envs.withCustomRoles },
 
     /**
      * Fastify apps

integration/templates/express-vite/src/client/main.ts

@@ -13,11 +13,14 @@ document.addEventListener('DOMContentLoaded', async function () {
   if (clerk.isSignedIn) {
     document.getElementById('app')!.innerHTML = `
           <div id="user-button"></div>
+          <div id="org-switcher"></div>
         `;
 
     const userButtonDiv = document.getElementById('user-button');
-
     clerk.mountUserButton(userButtonDiv);
+
+    const orgSwitcherDiv = document.getElementById('org-switcher');
+    clerk.mountOrganizationSwitcher(orgSwitcherDiv);
   } else {
     document.getElementById('app')!.innerHTML = `
           <div id="sign-in"></div>

integration/templates/express-vite/src/server/main.ts

@@ -1,14 +1,20 @@
 import 'dotenv/config';
 
 import { clerkMiddleware, getAuth } from '@clerk/express';
+import { verifyWebhook } from '@clerk/express/webhooks';
 import express from 'express';
 import ViteExpress from 'vite-express';
 
 const app = express();
 
+const proxyEnabled = process.env.CLERK_PROXY_ENABLED === 'true';
+
+app.use(express.json());
+
 app.use(
   clerkMiddleware({
     publishableKey: process.env.VITE_CLERK_PUBLISHABLE_KEY,
+    ...(proxyEnabled ? { frontendApiProxy: { enabled: (url: URL) => url.pathname.startsWith('/api') } } : {}),
   }),
 );
 
@@ -22,5 +28,28 @@ app.get('/api/protected', (req: any, res: any, _next: any) => {
   res.send('Protected API response');
 });
 
+app.get('/api/me', (req: any, res: any) => {
+  const auth = getAuth(req);
+  res.json({
+    userId: auth.userId,
+    sessionId: auth.sessionId,
+    orgId: auth.orgId ?? null,
+    orgRole: auth.orgRole ?? null,
+    orgSlug: auth.orgSlug ?? null,
+  });
+});
+
+// Must match the secret in integration/tests/express/webhook.test.ts
+const TEST_WEBHOOK_SECRET = 'whsec_dGVzdF9zaWduaW5nX3NlY3JldF8zMl9jaGFyc19sb25n';
+
+app.post('/api/webhooks/clerk', async (req: any, res: any) => {
+  try {
+    const evt = await verifyWebhook(req, { signingSecret: TEST_WEBHOOK_SECRET });
+    res.json({ success: true, type: evt.type, data: evt.data });
+  } catch (err) {
+    res.status(400).json({ success: false, error: err instanceof Error ? err.message : 'Unknown error' });
+  }
+});
+
 const port = parseInt(process.env.PORT as string) || 3002;
 ViteExpress.listen(app, port, () => console.log(`Server is listening on port ${port}...`));

integration/tests/express/error-handling.test.ts

@@ -0,0 +1,48 @@
+import { expect, test } from '@playwright/test';
+
+import { appConfigs } from '../../presets';
+import { testAgainstRunningApps } from '../../testUtils';
+
+testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })(
+  'error handling tests for @express',
+  ({ app }) => {
+    test.describe.configure({ mode: 'parallel' });
+
+    test('direct API call without browser cookies returns null userId', async () => {
+      const url = new URL('/api/me', app.serverUrl);
+      const res = await fetch(url.toString());
+
+      expect(res.status).toBe(200);
+      const json = await res.json();
+      expect(json.userId).toBeNull();
+    });
+
+    test('request with invalid Authorization header is handled gracefully', async () => {
+      const url = new URL('/api/me', app.serverUrl);
+      const res = await fetch(url.toString(), {
+        headers: {
+          Authorization: 'Bearer invalid_token_here',
+        },
+      });
+
+      // Clerk middleware treats an invalid bearer token as unauthenticated (not a crash)
+      expect(res.status).toBe(200);
+      const json = await res.json();
+      expect(json.userId).toBeNull();
+    });
+
+    test('request with malformed cookie is handled gracefully', async () => {
+      const url = new URL('/api/me', app.serverUrl);
+      const res = await fetch(url.toString(), {
+        headers: {
+          Cookie: '__session=malformed_jwt_value; __client_uat=0',
+        },
+      });
+
+      // Clerk middleware handles malformed cookies gracefully, treating the request as unauthenticated
+      expect(res.status).toBe(200);
+      const json = await res.json();
+      expect(json.userId).toBeNull();
+    });
+  },
+);

integration/tests/express/middleware.test.ts

@@ -0,0 +1,83 @@
+import { expect, test } from '@playwright/test';
+
+import { appConfigs } from '../../presets';
+import type { FakeUser } from '../../testUtils';
+import { createTestUtils, testAgainstRunningApps } from '../../testUtils';
+
+testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })(
+  'middleware and auth object tests for @express',
+  ({ app }) => {
+    test.describe.configure({ mode: 'parallel' });
+
+    let fakeUser: FakeUser;
+
+    test.beforeAll(async () => {
+      const u = createTestUtils({ app });
+      fakeUser = u.services.users.createFakeUser();
+      await u.services.users.createBapiUser(fakeUser);
+    });
+
+    test.afterAll(async () => {
+      await fakeUser.deleteIfExists();
+      await app.teardown();
+    });
+
+    test('auth object contains userId and sessionId when signed in', async ({ page, context }) => {
+      const u = createTestUtils({ app, page, context });
+      await u.page.goToRelative('/');
+
+      await u.po.signIn.waitForMounted();
+      await u.po.signIn.setIdentifier(fakeUser.email);
+      await u.po.signIn.continue();
+      await u.po.signIn.setPassword(fakeUser.password);
+      await u.po.signIn.continue();
+
+      await u.po.userButton.waitForMounted();
+
+      const url = new URL('/api/me', app.serverUrl);
+      const res = await u.page.request.get(url.toString());
+      expect(res.status()).toBe(200);
+
+      const json = await res.json();
+      expect(typeof json.userId).toBe('string');
+      expect(typeof json.sessionId).toBe('string');
+    });
+
+    test('auth object contains null userId when signed out', async () => {
+      const url = new URL('/api/me', app.serverUrl);
+      // Raw fetch has no browser cookies, simulating an unauthenticated request.
+      const res = await fetch(url.toString());
+
+      expect(res.status).toBe(200);
+      const json = await res.json();
+      expect(json.userId).toBeNull();
+      expect(json.sessionId).toBeNull();
+    });
+
+    test('multiple sequential requests maintain session', async ({ page, context }) => {
+      const u = createTestUtils({ app, page, context });
+      await u.page.goToRelative('/');
+
+      await u.po.signIn.waitForMounted();
+      await u.po.signIn.setIdentifier(fakeUser.email);
+      await u.po.signIn.continue();
+      await u.po.signIn.setPassword(fakeUser.password);
+      await u.po.signIn.continue();
+
+      await u.po.userButton.waitForMounted();
+
+      const url = new URL('/api/me', app.serverUrl);
+
+      const res1 = await u.page.request.get(url.toString());
+      const json1 = await res1.json();
+
+      const res2 = await u.page.request.get(url.toString());
+      const json2 = await res2.json();
+
+      expect(json1.userId).toBeTruthy();
+      expect(json1.sessionId).toBeTruthy();
+      expect(json1.userId).toBe(json2.userId);
+      expect(json1.sessionId).toBe(json2.sessionId);
+    });
+  },
+);

integration/tests/express/organizations.test.ts

@@ -0,0 +1,114 @@
+import type { OrganizationMembershipRole } from '@clerk/backend';
+import { expect, test } from '@playwright/test';
+
+import { appConfigs } from '../../presets';
+import type { FakeOrganization, FakeUser } from '../../testUtils';
+import { createTestUtils, testAgainstRunningApps } from '../../testUtils';
+
+testAgainstRunningApps({ withEnv: [appConfigs.envs.withCustomRoles] })(
+  'organization auth tests for @express',
+  ({ app }) => {
+    test.describe.configure({ mode: 'serial' });
+
+    let fakeAdmin: FakeUser;
+    let fakeViewer: FakeUser;
+    let fakeNonMember: FakeUser;
+    let fakeOrganization: FakeOrganization;
+
+    test.beforeAll(async () => {
+      const m = createTestUtils({ app });
+      fakeAdmin = m.services.users.createFakeUser();
+      const admin = await m.services.users.createBapiUser(fakeAdmin);
+      fakeOrganization = await m.services.users.createFakeOrganization(admin.id);
+      fakeViewer = m.services.users.createFakeUser();
+      const viewer = await m.services.users.createBapiUser(fakeViewer);
+      await m.services.clerk.organizations.createOrganizationMembership({
+        organizationId: fakeOrganization.organization.id,
+        role: 'org:viewer' as OrganizationMembershipRole,
+        userId: viewer.id,
+      });
+      fakeNonMember = m.services.users.createFakeUser();
+      await m.services.users.createBapiUser(fakeNonMember);
+    });
+
+    test.afterAll(async () => {
+      await fakeOrganization.delete();
+      await fakeNonMember.deleteIfExists();
+      await fakeViewer.deleteIfExists();
+      await fakeAdmin.deleteIfExists();
+      await app.teardown();
+    });
+
+    test('admin auth object includes orgId, orgRole, orgSlug after selecting org', async ({ page, context }) => {
+      const u = createTestUtils({ app, page, context });
+      await u.page.goToRelative('/');
+
+      await u.po.signIn.waitForMounted();
+      await u.po.signIn.setIdentifier(fakeAdmin.email);
+      await u.po.signIn.continue();
+      await u.po.signIn.setPassword(fakeAdmin.password);
+      await u.po.signIn.continue();
+
+      await u.po.userButton.waitForMounted();
+
+      await u.po.organizationSwitcher.waitForMounted();
+      await u.po.organizationSwitcher.waitForAnOrganizationToSelected();
+
+      const url = new URL('/api/me', app.serverUrl);
+      const res = await u.page.request.get(url.toString());
+      expect(res.status()).toBe(200);
+
+      const json = await res.json();
+      expect(json.userId).toBeTruthy();
+      expect(json.orgId).toBe(fakeOrganization.organization.id);
+      expect(json.orgRole).toBe('org:admin');
+      expect(json.orgSlug).toBeTruthy();
+    });
+
+    test('non-member auth object has null orgId', async ({ page, context }) => {
+      const u = createTestUtils({ app, page, context });
+      await u.page.goToRelative('/');
+
+      await u.po.signIn.waitForMounted();
+      await u.po.signIn.setIdentifier(fakeNonMember.email);
+      await u.po.signIn.continue();
+      await u.po.signIn.setPassword(fakeNonMember.password);
+      await u.po.signIn.continue();
+
+      await u.po.userButton.waitForMounted();
+
+      const url = new URL('/api/me', app.serverUrl);
+      const res = await u.page.request.get(url.toString());
+      expect(res.status()).toBe(200);
+
+      const json = await res.json();
+      expect(json.userId).toBeTruthy();
+      expect(json.orgId).toBeNull();
+    });
+
+    test('viewer org role is correctly reflected in auth response', async ({ page, context }) => {
+      const u = createTestUtils({ app, page, context });
+      await u.page.goToRelative('/');
+
+      await u.po.signIn.waitForMounted();
+      await u.po.signIn.setIdentifier(fakeViewer.email);
+      await u.po.signIn.continue();
+      await u.po.signIn.setPassword(fakeViewer.password);
+      await u.po.signIn.continue();
+
+      await u.po.userButton.waitForMounted();
+
+      await u.po.organizationSwitcher.waitForMounted();
+      await u.po.organizationSwitcher.waitForAnOrganizationToSelected();
+
+      const url = new URL('/api/me', app.serverUrl);
+      const res = await u.page.request.get(url.toString());
+      expect(res.status()).toBe(200);
+
+      const json = await res.json();
+      expect(json.userId).toBeTruthy();
+      expect(json.orgId).toBe(fakeOrganization.organization.id);
+      expect(json.orgRole).toBe('org:viewer');
+    });
+  },
+);