e2e: remove auth bypass; use real Clerk sign-in in Cypress

This commit is contained in:
Kunal
2026-02-07 16:57:41 +00:00
parent 7d407b073e
commit ac1c90c742
4 changed files with 70 additions and 74 deletions

10
docs/e2e-auth.md Normal file
View File

@@ -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`

View File

@@ -4,7 +4,6 @@ describe("/activity feed", () => {
const apiBase = "**/api/v1"; const apiBase = "**/api/v1";
function stubStreamEmpty() { function stubStreamEmpty() {
// Return a minimal SSE response that ends immediately.
cy.intercept( cy.intercept(
"GET", "GET",
`${apiBase}/activity/task-comments/stream*`, `${apiBase}/activity/task-comments/stream*`,
@@ -18,12 +17,56 @@ describe("/activity feed", () => {
).as("activityStream"); ).as("activityStream");
} }
function isSignedOutView(): Cypress.Chainable<boolean> { function signInWithClerk({ otp }: { otp: string }) {
return cy cy.contains(/sign in to view the feed/i).should("be.visible");
.get("body") cy.get('[data-testid="activity-signin"]').click();
.then(($body) => $body.text().toLowerCase().includes("sign in to view the feed"));
// Redirect mode should bring us to a full-page Clerk sign-in experience.
cy.get('input[type="email"], input[name="identifier"]', { timeout: 20_000 })
.first()
.should("be.visible")
.clear()
.type("jane+clerk_test@example.com");
cy.contains('button', /continue|sign in/i).click();
cy.get('input', { timeout: 20_000 })
.filter('[inputmode="numeric"], [autocomplete="one-time-code"], [type="tel"], [name="code"], [type="text"]')
.first()
.should("be.visible")
.type(otp);
cy.contains('button', /verify|continue|sign in/i).click();
// Back to app
cy.contains(/live feed/i, { timeout: 30_000 }).should("be.visible");
} }
it("auth negative: wrong OTP shows an error", () => {
cy.visit("/activity");
cy.contains(/sign in to view the feed/i).should("be.visible");
cy.get('[data-testid="activity-signin"]').click();
cy.get('input[type="email"], input[name="identifier"]', { timeout: 20_000 })
.first()
.should("be.visible")
.clear()
.type("jane+clerk_test@example.com");
cy.contains('button', /continue|sign in/i).click();
cy.get('input', { timeout: 20_000 })
.filter('[inputmode="numeric"], [autocomplete="one-time-code"], [type="tel"], [name="code"], [type="text"]')
.first()
.should("be.visible")
.type("000000");
cy.contains('button', /verify|continue|sign in/i).click();
cy.contains(/invalid|incorrect|try again/i, { timeout: 20_000 }).should("be.visible");
});
it("happy path: renders task comment cards", () => { it("happy path: renders task comment cards", () => {
cy.intercept("GET", `${apiBase}/activity/task-comments*`, { cy.intercept("GET", `${apiBase}/activity/task-comments*`, {
statusCode: 200, statusCode: 200,
@@ -40,44 +83,19 @@ describe("/activity feed", () => {
task_title: "CI hardening", task_title: "CI hardening",
created_at: "2026-02-07T00:00:00Z", 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"); }).as("activityList");
stubStreamEmpty(); stubStreamEmpty();
cy.visit("/activity", { cy.visit("/activity");
onBeforeLoad(win: Window) { signInWithClerk({ otp: "424242" });
win.localStorage.clear();
},
});
isSignedOutView().then((signedOut) => {
if (signedOut) {
// 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(/live feed/i).should("be.visible");
cy.contains("CI hardening").should("be.visible"); cy.contains("CI hardening").should("be.visible");
cy.contains("Coverage policy").should("be.visible");
cy.contains("Hello world").should("be.visible"); cy.contains("Hello world").should("be.visible");
}); });
});
it("empty state: shows waiting message when no items", () => { it("empty state: shows waiting message when no items", () => {
cy.intercept("GET", `${apiBase}/activity/task-comments*`, { cy.intercept("GET", `${apiBase}/activity/task-comments*`, {
@@ -88,17 +106,11 @@ describe("/activity feed", () => {
stubStreamEmpty(); stubStreamEmpty();
cy.visit("/activity"); cy.visit("/activity");
signInWithClerk({ otp: "424242" });
isSignedOutView().then((signedOut) => {
if (signedOut) {
cy.contains(/sign in to view the feed/i).should("be.visible");
return;
}
cy.wait("@activityList"); cy.wait("@activityList");
cy.contains(/waiting for new comments/i).should("be.visible"); cy.contains(/waiting for new comments/i).should("be.visible");
}); });
});
it("error state: shows failure UI when API errors", () => { it("error state: shows failure UI when API errors", () => {
cy.intercept("GET", `${apiBase}/activity/task-comments*`, { cy.intercept("GET", `${apiBase}/activity/task-comments*`, {
@@ -109,17 +121,9 @@ describe("/activity feed", () => {
stubStreamEmpty(); stubStreamEmpty();
cy.visit("/activity"); cy.visit("/activity");
signInWithClerk({ otp: "424242" });
isSignedOutView().then((signedOut) => {
if (signedOut) {
cy.contains(/sign in to view the feed/i).should("be.visible");
return;
}
cy.wait("@activityList"); cy.wait("@activityList");
// UI uses query.error.message or fallback.
cy.contains(/unable to load feed|boom/i).should("be.visible"); cy.contains(/unable to load feed|boom/i).should("be.visible");
}); });
}); });
});

View File

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

View File

@@ -19,29 +19,20 @@ import type { ComponentProps } from "react";
import { isLikelyValidClerkPublishableKey } from "@/auth/clerkKey"; 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 { export function isClerkEnabled(): boolean {
// IMPORTANT: keep this in sync with AuthProvider; otherwise components like // IMPORTANT: keep this in sync with AuthProvider; otherwise components like
// <SignedOut/> may render without a <ClerkProvider/> and crash during prerender. // <SignedOut/> may render without a <ClerkProvider/> and crash during prerender.
if (isE2EAuthBypassEnabled()) return false;
return isLikelyValidClerkPublishableKey( return isLikelyValidClerkPublishableKey(
process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY, process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
); );
} }
export function SignedIn(props: { children: ReactNode }) { export function SignedIn(props: { children: ReactNode }) {
if (isE2EAuthBypassEnabled()) return <>{props.children}</>;
if (!isClerkEnabled()) return null; if (!isClerkEnabled()) return null;
return <ClerkSignedIn>{props.children}</ClerkSignedIn>; return <ClerkSignedIn>{props.children}</ClerkSignedIn>;
} }
export function SignedOut(props: { children: ReactNode }) { export function SignedOut(props: { children: ReactNode }) {
if (isE2EAuthBypassEnabled()) return null;
if (!isClerkEnabled()) return <>{props.children}</>; if (!isClerkEnabled()) return <>{props.children}</>;
return <ClerkSignedOut>{props.children}</ClerkSignedOut>; return <ClerkSignedOut>{props.children}</ClerkSignedOut>;
} }
@@ -67,15 +58,6 @@ export function useUser() {
} }
export function useAuth() { export function useAuth() {
if (isE2EAuthBypassEnabled()) {
return {
isLoaded: true,
isSignedIn: true,
userId: "e2e-user",
sessionId: "e2e-session",
getToken: async () => "e2e-token",
} as const;
}
if (!isClerkEnabled()) { if (!isClerkEnabled()) {
return { return {
isLoaded: true, isLoaded: true,