E2E: remove auth bypass; use real Clerk sign-in

Merges PR #49. CI: https://github.com/abhi1693/openclaw-mission-control/actions/runs/21800456912

.github/workflows/ci.yml

@@ -99,18 +99,48 @@ jobs:
           cache: npm
           cache-dependency-path: frontend/package-lock.json
 
-      - name: Cypress run
+      - name: Install frontend dependencies
-        uses: cypress-io/github-action@v6
+        run: make frontend-sync
-        with:
+
-          working-directory: frontend
+      - name: Start frontend (dev server)
-          install-command: npm ci
-          build: npm run build
-          # Bind to loopback to avoid CI network flakiness.
-          start: npm start -- -H 127.0.0.1 -p 3000
-          wait-on: http://127.0.0.1:3000
-          command: npm run e2e
-          browser: chrome
         env:
+          NEXT_PUBLIC_API_URL: "http://localhost:3000"
           NEXT_TELEMETRY_DISABLED: "1"
-          # Force Clerk disabled in E2E to keep tests secretless/deterministic.
+          CLERK_SECRET_KEY: ${{ secrets.CLERK_SECRET_KEY }}
-          NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: ""
+          NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: ${{ vars.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY }}
+          CLERK_JWKS_URL: ${{ vars.CLERK_JWKS_URL }}
+        run: |
+          cd frontend
+          npm run dev -- --hostname 0.0.0.0 --port 3000 &
+          for i in {1..60}; do
+            if curl -sf http://localhost:3000/ > /dev/null; then exit 0; fi
+            sleep 2
+          done
+          echo "Frontend did not start"
+          exit 1
+
+      - name: Run Cypress E2E
+        env:
+          NEXT_PUBLIC_API_URL: "http://localhost:3000"
+          NEXT_TELEMETRY_DISABLED: "1"
+          # Clerk testing tokens (official @clerk/testing Cypress integration)
+          CLERK_SECRET_KEY: ${{ secrets.CLERK_SECRET_KEY }}
+          CLERK_PUBLISHABLE_KEY: ${{ vars.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY }}
+          # Also set for the app itself.
+          NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: ${{ vars.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY }}
+          CLERK_JWKS_URL: ${{ vars.CLERK_JWKS_URL }}
+          # Test user identifier (used by cy.clerkSignIn)
+          CYPRESS_CLERK_TEST_EMAIL: "jane+clerk_test@example.com"
+        run: |
+          cd frontend
+          npm run e2e -- --browser chrome
+
+      - name: Upload Cypress artifacts
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: cypress-artifacts
+          if-no-files-found: ignore
+          path: |
+            frontend/cypress/screenshots/**
+            frontend/cypress/videos/**

docs/e2e-auth.md

@@ -0,0 +1,10 @@
+# E2E auth (Cypress)
+
+Hard requirement: **no auth bypass** for Cypress E2E.
+
+- Cypress tests must use real Clerk sign-in.
+- CI should inject Clerk keys into the Cypress job environment.
+
+Test account (non-secret):
+- email: `jane+clerk_test@example.com`
+- OTP: `424242`

frontend/cypress.config.ts

@@ -1,12 +1,20 @@
 import { defineConfig } from "cypress";
+import { clerkSetup } from "@clerk/testing/cypress";
 
 export default defineConfig({
+  env: {
+    NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
+    // Optional overrides.
+    CLERK_ORIGIN: process.env.CYPRESS_CLERK_ORIGIN,
+    CLERK_TEST_EMAIL: process.env.CYPRESS_CLERK_TEST_EMAIL,
+    CLERK_TEST_OTP: process.env.CYPRESS_CLERK_TEST_OTP,
+  },
   e2e: {
-    // Use loopback to avoid network/proxy flakiness in CI.
+    baseUrl: "http://localhost:3000",
-    baseUrl: "http://127.0.0.1:3000",
+    specPattern: "cypress/e2e/**/*.cy.{js,jsx,ts,tsx}",
-    video: false,
-    screenshotOnRunFailure: true,
-    specPattern: "cypress/e2e/**/*.cy.{ts,tsx,js,jsx}",
     supportFile: "cypress/support/e2e.ts",
+    setupNodeEvents(on, config) {
+      return clerkSetup({ config });
+    },
   },
 });

frontend/cypress/e2e/activity_feed.cy.ts

@@ -2,9 +2,9 @@
 
 describe("/activity feed", () => {
   const apiBase = "**/api/v1";
+  const email = Cypress.env("CLERK_TEST_EMAIL") || "jane+clerk_test@example.com";
 
   function stubStreamEmpty() {
-    // Return a minimal SSE response that ends immediately.
     cy.intercept(
       "GET",
       `${apiBase}/activity/task-comments/stream*`,
@@ -18,12 +18,16 @@ describe("/activity feed", () => {
     ).as("activityStream");
   }
 
-  function isSignedOutView(): Cypress.Chainable<boolean> {
+  function assertSignedInAndLanded() {
-    return cy
+    cy.contains(/live feed/i, { timeout: 30_000 }).should("be.visible");
-      .get("body")
-      .then(($body) => $body.text().toLowerCase().includes("sign in to view the feed"));
   }
 
+  it("auth negative: signed-out user cannot access /activity", () => {
+    // Story: signed-out user tries to visit /activity and is redirected to sign-in.
+    cy.visit("/activity");
+    cy.location("pathname", { timeout: 20_000 }).should("match", /\/sign-in/);
+  });
+
   it("happy path: renders task comment cards", () => {
     cy.intercept("GET", `${apiBase}/activity/task-comments*`, {
       statusCode: 200,
@@ -40,43 +44,23 @@ describe("/activity feed", () => {
             task_title: "CI hardening",
             created_at: "2026-02-07T00:00:00Z",
           },
-          {
-            id: "c2",
-            message: "Second comment",
-            agent_name: "Riya",
-            agent_role: "QA",
-            board_id: "b1",
-            board_name: "Testing",
-            task_id: "t2",
-            task_title: "Coverage policy",
-            created_at: "2026-02-07T00:01:00Z",
-          },
         ],
       },
     }).as("activityList");
 
     stubStreamEmpty();
 
-    cy.visit("/activity", {
+    // Story: user signs in, then visits /activity and sees the live feed.
-      onBeforeLoad(win: Window) {
+    cy.visit("/sign-in");
-        win.localStorage.clear();
+    cy.clerkLoaded();
-      },
+    cy.clerkSignIn({ strategy: "email_code", identifier: email });
-    });
 
-    isSignedOutView().then((signedOut) => {
+    cy.visit("/activity");
-      if (signedOut) {
+    assertSignedInAndLanded();
-        // In secretless CI (no Clerk), the SignedOut UI is expected and no API calls should happen.
-        cy.contains(/sign in to view the feed/i).should("be.visible");
-        return;
-      }
 
-      cy.wait("@activityList");
+    cy.wait("@activityList");
-
+    cy.contains("CI hardening").should("be.visible");
-      cy.contains(/live feed/i).should("be.visible");
+    cy.contains("Hello world").should("be.visible");
-      cy.contains("CI hardening").should("be.visible");
-      cy.contains("Coverage policy").should("be.visible");
-      cy.contains("Hello world").should("be.visible");
-    });
   });
 
   it("empty state: shows waiting message when no items", () => {
@@ -87,17 +71,16 @@ describe("/activity feed", () => {
 
     stubStreamEmpty();
 
+    // Story: user signs in, then visits /activity and sees an empty-state message.
+    cy.visit("/sign-in");
+    cy.clerkLoaded();
+    cy.clerkSignIn({ strategy: "email_code", identifier: email });
+
     cy.visit("/activity");
+    assertSignedInAndLanded();
 
-    isSignedOutView().then((signedOut) => {
+    cy.wait("@activityList");
-      if (signedOut) {
+    cy.contains(/waiting for new comments/i).should("be.visible");
-        cy.contains(/sign in to view the feed/i).should("be.visible");
-        return;
-      }
-
-      cy.wait("@activityList");
-      cy.contains(/waiting for new comments/i).should("be.visible");
-    });
   });
 
   it("error state: shows failure UI when API errors", () => {
@@ -108,18 +91,15 @@ describe("/activity feed", () => {
 
     stubStreamEmpty();
 
+    // Story: user signs in, then visits /activity; API fails and user sees an error.
+    cy.visit("/sign-in");
+    cy.clerkLoaded();
+    cy.clerkSignIn({ strategy: "email_code", identifier: email });
+
     cy.visit("/activity");
+    assertSignedInAndLanded();
 
-    isSignedOutView().then((signedOut) => {
+    cy.wait("@activityList");
-      if (signedOut) {
+    cy.contains(/unable to load feed|boom/i).should("be.visible");
-        cy.contains(/sign in to view the feed/i).should("be.visible");
-        return;
-      }
-
-      cy.wait("@activityList");
-
-      // UI uses query.error.message or fallback.
-      cy.contains(/unable to load feed|boom/i).should("be.visible");
-    });
   });
 });

frontend/cypress/e2e/activity_smoke.cy.ts

@@ -1,7 +1,6 @@
 describe("/activity page", () => {
-  it("loads without crashing", () => {
+  it("signed-out user is redirected to sign-in", () => {
     cy.visit("/activity");
-    // In secretless/unsigned state, UI should render the signed-out prompt.
+    cy.location("pathname", { timeout: 20_000 }).should("match", /\/sign-in/);
-    cy.contains(/sign in to view the feed/i).should("be.visible");
   });
 });

frontend/cypress/e2e/clerk_login.cy.ts

@@ -1,19 +1,15 @@
-describe("Clerk login (OTP)", () => {
+describe("Clerk login", () => {
-  it("can sign in via Clerk modal", () => {
+  it("user can sign in via Clerk testing commands", () => {
-    // Skip unless explicitly configured.
+    const email = Cypress.env("CLERK_TEST_EMAIL") || "jane+clerk_test@example.com";
-    const clerkOrigin = Cypress.env("CLERK_ORIGIN");
-    const email = Cypress.env("CLERK_TEST_EMAIL");
-    const otp = Cypress.env("CLERK_TEST_OTP");
 
-    if (!clerkOrigin || !email || !otp) {
+    // Prereq per Clerk docs: visit a non-protected page that loads Clerk.
-      cy.log("Skipping: missing CYPRESS_CLERK_ORIGIN / CYPRESS_CLERK_TEST_EMAIL / CYPRESS_CLERK_TEST_OTP");
+    cy.visit("/sign-in");
-      return;
+    cy.clerkLoaded();
-    }
 
+    cy.clerkSignIn({ strategy: "email_code", identifier: email });
+
+    // After login, user should be able to access protected route.
     cy.visit("/activity");
-    cy.loginWithClerkOtp();
+    cy.contains(/live feed/i, { timeout: 30_000 }).should("be.visible");
-
-    // After login, the SignedIn UI should render.
-    cy.contains(/live feed/i, { timeout: 20_000 }).should("be.visible");
   });
 });

frontend/cypress/support/commands.ts

@@ -6,15 +6,29 @@ type ClerkOtpLoginOptions = {
   otp: string;
 };
 
-function requireEnv(name: string): string {
+function getEnv(name: string, fallback?: string): string {
   const value = Cypress.env(name) as string | undefined;
-  if (!value) {
+  if (value) return value;
-    throw new Error(
+  if (fallback !== undefined) return fallback;
-      `Missing Cypress env var ${name}. ` +
+  throw new Error(
-        `Set it via CYPRESS_${name}=... in CI/local before running Clerk login tests.`,
+    `Missing Cypress env var ${name}. ` +
-    );
+      `Set it via CYPRESS_${name}=... in CI/local before running Clerk login tests.`,
-  }
+  );
-  return value;
+}
+
+function clerkOriginFromPublishableKey(): string {
+  const key = getEnv("NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY");
+
+  // pk_test_<base64(domain$)> OR pk_live_<...>
+  const m = /^pk_(?:test|live)_(.+)$/.exec(key);
+  if (!m) throw new Error(`Unexpected Clerk publishable key format: ${key}`);
+
+  const decoded = atob(m[1]); // e.g. beloved-ghost-73.clerk.accounts.dev$
+  const domain = decoded.replace(/\$$/, "");
+
+  // Some flows redirect to *.accounts.dev (no clerk. subdomain)
+  const normalized = domain.replace(".clerk.accounts.dev", ".accounts.dev");
+  return `https://${normalized}`;
 }
 
 function normalizeOrigin(value: string): string {
@@ -22,62 +36,158 @@ function normalizeOrigin(value: string): string {
     const url = new URL(value);
     return url.origin;
   } catch {
-    // allow providing just an origin-like string
     return value.replace(/\/$/, "");
   }
 }
 
 Cypress.Commands.add("loginWithClerkOtp", () => {
-  const clerkOrigin = normalizeOrigin(requireEnv("CLERK_ORIGIN"));
+  const clerkOrigin = normalizeOrigin(
-  const email = requireEnv("CLERK_TEST_EMAIL");
+    getEnv("CLERK_ORIGIN", clerkOriginFromPublishableKey()),
-  const otp = requireEnv("CLERK_TEST_OTP");
+  );
+  const email = getEnv("CLERK_TEST_EMAIL", "jane+clerk_test@example.com");
+  const otp = getEnv("CLERK_TEST_OTP", "424242");
 
   const opts: ClerkOtpLoginOptions = { clerkOrigin, email, otp };
 
-  // Trigger the modal from the app first.
+  // Navigate to a dedicated sign-in route that renders Clerk SignIn top-level.
-  cy.get('[data-testid="activity-signin"]').click({ force: true });
+  // Cypress cannot reliably drive Clerk modal/iframe flows.
+  cy.visit("/sign-in");
 
-  // The Clerk UI is typically hosted on a different origin (clerk.accounts.dev / clerk.com).
+  const emailSelector =
-  // Use cy.origin to drive the UI in Chrome.
+    'input[type="email"], input[name="identifier"], input[autocomplete="email"]';
-  cy.origin(
+  const otpSelector =
-    opts.clerkOrigin,
+    'input[autocomplete="one-time-code"], input[name*="code"], input[name^="code"], input[name^="code."], input[inputmode="numeric"]';
-    { args: { email: opts.email, otp: opts.otp } },
+  const continueSelector = 'button[type="submit"], button';
-    ({ email, otp }) => {
+  const methodSelector = /email|code|otp|send code|verification|verify|use email/i;
-      // Email / identifier input
-      cy.get('input[type="email"], input[name="identifier"], input[autocomplete="email"]', {
-        timeout: 20_000,
-      })
-        .first()
-        .clear()
-        .type(email, { delay: 10 });
 
-      // Submit / continue
+  const fillEmailStep = (email: string) => {
-      cy.get('button[type="submit"], button')
+    cy.get(emailSelector, { timeout: 20_000 })
-        .contains(/continue|sign in|send|next/i)
+      .first()
-        .click({ force: true });
+      .clear()
+      .type(email, { delay: 10 });
 
-      // OTP input - Clerk commonly uses autocomplete=one-time-code
+    cy.contains(continueSelector, /continue|sign in|send|next/i, { timeout: 20_000 })
-      cy.get('input[autocomplete="one-time-code"], input[name*="code"], input[inputmode="numeric"]', {
+      .should("be.visible")
-        timeout: 20_000,
+      .click({ force: true });
-      })
+  };
-        .first()
-        .clear()
-        .type(otp, { delay: 10 });
 
-      // Final submit (some flows auto-submit)
+  const maybeSelectEmailCodeMethod = () => {
-      cy.get("body").then(($body) => {
+    cy.get("body").then(($body) => {
-        const hasSubmit = $body
+      const hasOtp = $body.find(otpSelector).length > 0;
-          .find('button[type="submit"], button')
+      if (hasOtp) return;
-          .toArray()
+
-          .some((el) => /verify|continue|sign in|confirm/i.test(el.textContent || ""));
+      const candidates = $body
-        if (hasSubmit) {
+        .find("button,a")
-          cy.get('button[type="submit"], button')
+        .toArray()
-            .contains(/verify|continue|sign in|confirm/i)
+        .filter((el) => methodSelector.test((el.textContent || "").trim()));
-            .click({ force: true });
+
-        }
+      if (candidates.length > 0) {
-      });
+        cy.wrap(candidates[0]).click({ force: true });
-    },
+      }
-  );
+    });
+  };
+
+  const waitForOtpOrMethod = () => {
+    cy.get("body", { timeout: 60_000 }).should(($body) => {
+      const hasOtp = $body.find(otpSelector).length > 0;
+      const hasMethod = $body
+        .find("button,a")
+        .toArray()
+        .some((el) => methodSelector.test((el.textContent || "").trim()));
+      expect(
+        hasOtp || hasMethod,
+        "waiting for OTP input or verification method UI",
+      ).to.equal(true);
+    });
+  };
+
+  const fillOtpAndSubmit = (otp: string) => {
+    waitForOtpOrMethod();
+    maybeSelectEmailCodeMethod();
+
+    cy.get(otpSelector, { timeout: 60_000 }).first().clear().type(otp, { delay: 10 });
+
+    cy.get("body").then(($body) => {
+      const hasSubmit = $body
+        .find(continueSelector)
+        .toArray()
+        .some((el) => /verify|continue|sign in|confirm/i.test(el.textContent || ""));
+      if (hasSubmit) {
+        cy.contains(continueSelector, /verify|continue|sign in|confirm/i, { timeout: 20_000 })
+          .should("be.visible")
+          .click({ force: true });
+      }
+    });
+  };
+
+  // Clerk SignIn can start on our app origin and then redirect to Clerk-hosted UI.
+  // Do email step first, then decide where the OTP step lives based on the *current* origin.
+  fillEmailStep(opts.email);
+
+  cy.location("origin", { timeout: 60_000 }).then((origin) => {
+    const current = normalizeOrigin(origin);
+    if (current === opts.clerkOrigin) {
+      cy.origin(
+        opts.clerkOrigin,
+        { args: { otp: opts.otp } },
+        ({ otp }) => {
+          const otpSelector =
+            'input[autocomplete="one-time-code"], input[name*="code"], input[name^="code"], input[name^="code."], input[inputmode="numeric"]';
+          const continueSelector = 'button[type="submit"], button';
+          const methodSelector = /email|code|otp|send code|verification|verify|use email/i;
+
+          const maybeSelectEmailCodeMethod = () => {
+            cy.get("body").then(($body) => {
+              const hasOtp = $body.find(otpSelector).length > 0;
+              if (hasOtp) return;
+
+              const candidates = $body
+                .find("button,a")
+                .toArray()
+                .filter((el) => methodSelector.test((el.textContent || "").trim()));
+
+              if (candidates.length > 0) {
+                cy.wrap(candidates[0]).click({ force: true });
+              }
+            });
+          };
+
+          const waitForOtpOrMethod = () => {
+            cy.get("body", { timeout: 60_000 }).should(($body) => {
+              const hasOtp = $body.find(otpSelector).length > 0;
+              const hasMethod = $body
+                .find("button,a")
+                .toArray()
+                .some((el) => methodSelector.test((el.textContent || "").trim()));
+              expect(
+                hasOtp || hasMethod,
+                "waiting for OTP input or verification method UI",
+              ).to.equal(true);
+            });
+          };
+
+          waitForOtpOrMethod();
+          maybeSelectEmailCodeMethod();
+
+          cy.get(otpSelector, { timeout: 60_000 }).first().clear().type(otp, { delay: 10 });
+
+          cy.get("body").then(($body) => {
+            const hasSubmit = $body
+              .find(continueSelector)
+              .toArray()
+              .some((el) => /verify|continue|sign in|confirm/i.test(el.textContent || ""));
+            if (hasSubmit) {
+              cy.contains(continueSelector, /verify|continue|sign in|confirm/i, { timeout: 20_000 })
+                .should("be.visible")
+                .click({ force: true });
+            }
+          });
+        },
+      );
+    } else {
+      fillOtpAndSubmit(opts.otp);
+    }
+  });
 });
 
 declare global {
@@ -85,12 +195,13 @@ declare global {
   namespace Cypress {
     interface Chainable {
       /**
-       * Logs in via the real Clerk modal using deterministic OTP credentials.
+       * Logs in via the real Clerk SignIn page using deterministic OTP credentials.
        *
-       * Requires env vars:
+       * Optional env vars (CYPRESS_*):
-       * - CYPRESS_CLERK_ORIGIN (e.g. https://<subdomain>.clerk.accounts.dev)
+       * - CLERK_ORIGIN (e.g. https://<subdomain>.accounts.dev)
-       * - CYPRESS_CLERK_TEST_EMAIL
+       * - NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY (used to derive origin when CLERK_ORIGIN not set)
-       * - CYPRESS_CLERK_TEST_OTP
+       * - CLERK_TEST_EMAIL (default: jane+clerk_test@example.com)
+       * - CLERK_TEST_OTP (default: 424242)
        */
       loginWithClerkOtp(): Chainable<void>;
     }

frontend/cypress/support/e2e.ts

@@ -1,4 +1,10 @@
 // Cypress support file.
 // Place global hooks/commands here.
 
+/// <reference types="cypress" />
+
+import { addClerkCommands } from "@clerk/testing/cypress";
+
+addClerkCommands({ Cypress, cy });
+
 import "./commands";

frontend/package-lock.json

@@ -26,6 +26,7 @@
         "remark-gfm": "^4.0.1"
       },
       "devDependencies": {
+        "@clerk/testing": "^1.13.35",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.1.0",
         "@testing-library/user-event": "^14.5.2",
@@ -364,9 +365,9 @@
       "license": "MIT"
     },
     "node_modules/@clerk/backend": {
-      "version": "2.29.7",
+      "version": "2.30.1",
-      "resolved": "https://registry.npmjs.org/@clerk/backend/-/backend-2.29.7.tgz",
+      "resolved": "https://registry.npmjs.org/@clerk/backend/-/backend-2.30.1.tgz",
-      "integrity": "sha512-OSfFQ85L0FV2wSzqlr0hRvluIu3Z5ClgLiBE6Qx7XjSGyJoqEvP5OP4fl5Nt5icgGvH0EwA1dljPGyQpaqbQEw==",
+      "integrity": "sha512-GoxnJzVH0ycNPAGCDMfo3lPBFbo5nehpLSVFjgGEnzIRGGahBtAB8PQT7KM2zo58pD8apjb/+suhcB/WCiEasQ==",
       "license": "MIT",
       "dependencies": {
         "@clerk/shared": "^3.44.0",
@@ -453,6 +454,34 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
+    "node_modules/@clerk/testing": {
+      "version": "1.13.35",
+      "resolved": "https://registry.npmjs.org/@clerk/testing/-/testing-1.13.35.tgz",
+      "integrity": "sha512-y95kJZrMt0tvbNek1AWhWrNrgnOy+a53PSzHTHPF9d0kkOgzzu9l/Wq+Y0kBk6p64wtupYomeb7oVCQD7yCc0A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@clerk/backend": "^2.30.1",
+        "@clerk/shared": "^3.44.0",
+        "@clerk/types": "^4.101.14",
+        "dotenv": "17.2.2"
+      },
+      "engines": {
+        "node": ">=18.17.0"
+      },
+      "peerDependencies": {
+        "@playwright/test": "^1",
+        "cypress": "^13 || ^14"
+      },
+      "peerDependenciesMeta": {
+        "@playwright/test": {
+          "optional": true
+        },
+        "cypress": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@clerk/types": {
       "version": "4.101.14",
       "resolved": "https://registry.npmjs.org/@clerk/types/-/types-4.101.14.tgz",
@@ -6634,6 +6663,19 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/dotenv": {
+      "version": "17.2.2",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.2.2.tgz",
+      "integrity": "sha512-Sf2LSQP+bOlhKWWyhFsn0UsfdK/kCWRv1iuA2gXAwt3dyNabr6QSj00I2V10pidqz69soatm9ZwZvpQMTIOd5Q==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",

frontend/package.json

@@ -33,6 +33,7 @@
     "remark-gfm": "^4.0.1"
   },
   "devDependencies": {
+    "@clerk/testing": "^1.13.35",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",

frontend/src/app/activity/page.tsx

@@ -298,7 +298,7 @@ export default function ActivityPage() {
           <div className="rounded-xl border border-slate-200 bg-white px-8 py-6 shadow-sm">
             <p className="text-sm text-slate-600">Sign in to view the feed.</p>
             <SignInButton
-              mode="modal"
+              mode="redirect"
               forceRedirectUrl="/activity"
               signUpForceRedirectUrl="/activity"
             >

frontend/src/app/sign-in/[[...rest]]/page.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import { SignIn } from "@clerk/nextjs";
+
+export default function SignInPage() {
+  // Dedicated sign-in route for Cypress E2E.
+  // Avoids modal/iframe auth flows and gives Cypress a stable top-level page.
+  return (
+    <main className="flex min-h-screen items-center justify-center bg-slate-50 p-6">
+      <SignIn routing="path" path="/sign-in" forceRedirectUrl="/activity" />
+    </main>
+  );
+}

frontend/src/auth/clerk.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import type { ReactNode } from "react";
-
 // NOTE: We intentionally keep this file very small and dependency-free.
 // It provides CI/secretless-build safe fallbacks for Clerk hooks/components.
 
+import type { ReactNode, ComponentProps } from "react";
+
 import {
   ClerkProvider,
   SignedIn as ClerkSignedIn,
@@ -15,33 +15,22 @@ import {
   useUser as clerkUseUser,
 } from "@clerk/nextjs";
 
-import type { ComponentProps } from "react";
-
 import { isLikelyValidClerkPublishableKey } from "@/auth/clerkKey";
 
-function isE2EAuthBypassEnabled(): boolean {
-  // Used only for Cypress E2E to keep tests secretless and deterministic.
-  // When enabled, we treat the user as signed in and skip Clerk entirely.
-  return process.env.NEXT_PUBLIC_E2E_AUTH_BYPASS === "1";
-}
-
 export function isClerkEnabled(): boolean {
   // IMPORTANT: keep this in sync with AuthProvider; otherwise components like
   // <SignedOut/> may render without a <ClerkProvider/> and crash during prerender.
-  if (isE2EAuthBypassEnabled()) return false;
   return isLikelyValidClerkPublishableKey(
     process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
   );
 }
 
 export function SignedIn(props: { children: ReactNode }) {
-  if (isE2EAuthBypassEnabled()) return <>{props.children}</>;
   if (!isClerkEnabled()) return null;
   return <ClerkSignedIn>{props.children}</ClerkSignedIn>;
 }
 
 export function SignedOut(props: { children: ReactNode }) {
-  if (isE2EAuthBypassEnabled()) return null;
   if (!isClerkEnabled()) return <>{props.children}</>;
   return <ClerkSignedOut>{props.children}</ClerkSignedOut>;
 }
@@ -67,15 +56,6 @@ export function useUser() {
 }
 
 export function useAuth() {
-  if (isE2EAuthBypassEnabled()) {
-    return {
-      isLoaded: true,
-      isSignedIn: true,
-      userId: "e2e-user",
-      sessionId: "e2e-session",
-      getToken: async () => "e2e-token",
-    } as const;
-  }
   if (!isClerkEnabled()) {
     return {
       isLoaded: true,

frontend/src/proxy.ts

@@ -1,5 +1,5 @@
 import { NextResponse } from "next/server";
-import { clerkMiddleware } from "@clerk/nextjs/server";
+import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";
 
 import { isLikelyValidClerkPublishableKey } from "@/auth/clerkKey";
 
@@ -8,7 +8,23 @@ const isClerkEnabled = () =>
     process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
   );
 
-export default isClerkEnabled() ? clerkMiddleware() : () => NextResponse.next();
+// Public routes must include Clerk sign-in paths to avoid redirect loops.
+const isPublicRoute = createRouteMatcher(["/sign-in(.*)"]);
+
+export default isClerkEnabled()
+  ? clerkMiddleware(async (auth, req) => {
+      if (isPublicRoute(req)) return NextResponse.next();
+
+      // In middleware, `auth()` resolves to a session/auth context (Promise in current typings).
+      // Use redirectToSignIn() (instead of protect()) for unauthenticated requests.
+      const { userId, redirectToSignIn } = await auth();
+      if (!userId) {
+        return redirectToSignIn({ returnBackUrl: req.url });
+      }
+
+      return NextResponse.next();
+    })
+  : () => NextResponse.next();
 
 export const config = {
   matcher: [