test(e2e): add Clerk OTP login helper (cy.origin)

frontend/cypress/e2e/clerk_login.cy.ts

@@ -0,0 +1,19 @@
+describe("Clerk login (OTP)", () => {
+  it("can sign in via Clerk modal", () => {
+    // Skip unless explicitly configured.
+    const clerkOrigin = Cypress.env("CLERK_ORIGIN");
+    const email = Cypress.env("CLERK_TEST_EMAIL");
+    const otp = Cypress.env("CLERK_TEST_OTP");
+
+    if (!clerkOrigin || !email || !otp) {
+      cy.log("Skipping: missing CYPRESS_CLERK_ORIGIN / CYPRESS_CLERK_TEST_EMAIL / CYPRESS_CLERK_TEST_OTP");
+      return;
+    }
+
+    cy.visit("/activity");
+    cy.loginWithClerkOtp();
+
+    // After login, the SignedIn UI should render.
+    cy.contains(/live feed/i, { timeout: 20_000 }).should("be.visible");
+  });
+});

frontend/cypress/support/commands.ts

@@ -0,0 +1,100 @@
+/// <reference types="cypress" />
+
+type ClerkOtpLoginOptions = {
+  clerkOrigin: string;
+  email: string;
+  otp: string;
+};
+
+function requireEnv(name: string): string {
+  const value = Cypress.env(name) as string | undefined;
+  if (!value) {
+    throw new Error(
+      `Missing Cypress env var ${name}. ` +
+        `Set it via CYPRESS_${name}=... in CI/local before running Clerk login tests.`,
+    );
+  }
+  return value;
+}
+
+function normalizeOrigin(value: string): string {
+  try {
+    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 email = requireEnv("CLERK_TEST_EMAIL");
+  const otp = requireEnv("CLERK_TEST_OTP");
+
+  const opts: ClerkOtpLoginOptions = { clerkOrigin, email, otp };
+
+  // Trigger the modal from the app first.
+  cy.get('[data-testid="activity-signin"]').click({ force: true });
+
+  // The Clerk UI is typically hosted on a different origin (clerk.accounts.dev / clerk.com).
+  // Use cy.origin to drive the UI in Chrome.
+  cy.origin(
+    opts.clerkOrigin,
+    { args: { email: opts.email, otp: opts.otp } },
+    ({ email, otp }) => {
+      // 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
+      cy.get('button[type="submit"], button')
+        .contains(/continue|sign in|send|next/i)
+        .click({ force: true });
+
+      // OTP input - Clerk commonly uses autocomplete=one-time-code
+      cy.get('input[autocomplete="one-time-code"], input[name*="code"], input[inputmode="numeric"]', {
+        timeout: 20_000,
+      })
+        .first()
+        .clear()
+        .type(otp, { delay: 10 });
+
+      // Final submit (some flows auto-submit)
+      cy.get("body").then(($body) => {
+        const hasSubmit = $body
+          .find('button[type="submit"], button')
+          .toArray()
+          .some((el) => /verify|continue|sign in|confirm/i.test(el.textContent || ""));
+        if (hasSubmit) {
+          cy.get('button[type="submit"], button')
+            .contains(/verify|continue|sign in|confirm/i)
+            .click({ force: true });
+        }
+      });
+    },
+  );
+});
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace Cypress {
+    interface Chainable {
+      /**
+       * Logs in via the real Clerk modal using deterministic OTP credentials.
+       *
+       * Requires env vars:
+       * - CYPRESS_CLERK_ORIGIN (e.g. https://<subdomain>.clerk.accounts.dev)
+       * - CYPRESS_CLERK_TEST_EMAIL
+       * - CYPRESS_CLERK_TEST_OTP
+       */
+      loginWithClerkOtp(): Chainable<void>;
+    }
+  }
+}
+
+export {};

frontend/cypress/support/e2e.ts

@@ -1,2 +1,4 @@
 // Cypress support file.
 // Place global hooks/commands here.
+
+import "./commands";

frontend/src/app/activity/page.tsx

@@ -302,7 +302,9 @@ export default function ActivityPage() {
               forceRedirectUrl="/activity"
               signUpForceRedirectUrl="/activity"
             >
-              <Button className="mt-4">Sign in</Button>
+              <Button className="mt-4" data-testid="activity-signin">
+                Sign in
+              </Button>
             </SignInButton>
           </div>
         </div>