E2E: remove Clerk bypass and sign in via Clerk in Cypress

.github/workflows/ci.yml

@@ -99,18 +99,29 @@ jobs:
           cache: npm
           cache-dependency-path: frontend/package-lock.json
 
-      - name: Cypress run
-        uses: cypress-io/github-action@v6
-        with:
-          working-directory: frontend
-          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
+      - name: Install frontend dependencies
+        run: make frontend-sync
+
+      - name: Start frontend (dev server)
         env:
           NEXT_TELEMETRY_DISABLED: "1"
-          # Force Clerk disabled in E2E to keep tests secretless/deterministic.
-          NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: ""
+          CLERK_SECRET_KEY: ${{ secrets.CLERK_SECRET_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 -- --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_TELEMETRY_DISABLED: "1"
+          NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: ${{ vars.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY }}
+        run: |
+          cd frontend
+          npm run e2e

frontend/cypress.config.ts

@@ -2,8 +2,7 @@ import { defineConfig } from "cypress";
 
 export default defineConfig({
   e2e: {
-    // Use loopback to avoid network/proxy flakiness in CI.
-    baseUrl: "http://127.0.0.1:3000",
+    baseUrl: "http://localhost:3000",
     video: false,
     screenshotOnRunFailure: true,
     specPattern: "cypress/e2e/**/*.cy.{ts,tsx,js,jsx}",

frontend/cypress/e2e/activity_feed.cy.ts

@@ -28,6 +28,7 @@ describe("/activity feed", () => {
       .clear()
       .type("jane+clerk_test@example.com");
 
+<<<<<<< HEAD
     cy.contains('button', /continue|sign in/i).click();
 
     cy.get('input', { timeout: 20_000 })
@@ -40,6 +41,18 @@ describe("/activity feed", () => {
 
     // Back to app
     cy.contains(/live feed/i, { timeout: 30_000 }).should("be.visible");
+=======
+    // OTP / verification code
+    cy.contains(/verification code|code/i).should("be.visible");
+    cy
+      .get('input')
+      .filter('[inputmode="numeric"], [autocomplete="one-time-code"], [type="tel"], [type="text"]')
+      .first()
+      .type("424242");
+
+    cy.contains('button', /verify|continue|sign in/i).click();
+    cy.contains(/live feed/i).should('be.visible');
+>>>>>>> 446cfb2 (E2E: remove Clerk bypass and sign in via Clerk in Cypress)
   }
 
 <<<<<<< HEAD
@@ -82,6 +95,8 @@ describe("/activity feed", () => {
       .first()
       .type("000000");
 
+    cy.contains('button', /verify|continue|sign in/i).click();
+
     // Clerk should display an error message.
     cy.contains(/invalid|incorrect|try again/i).should("be.visible");
 >>>>>>> a6188f5 (test(e2e): add negative auth case (wrong OTP))

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,8 +15,6 @@ import {
   useUser as clerkUseUser,
 } from "@clerk/nextjs";
 
-import type { ComponentProps } from "react";
-
 import { isLikelyValidClerkPublishableKey } from "@/auth/clerkKey";
 
 export function isClerkEnabled(): boolean {