Merge branch 'master' into feat/organizations

This commit is contained in:
Abhimanyu Saharan
2026-02-08 21:30:25 +05:30
14 changed files with 366 additions and 174 deletions

View File

@@ -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://127.0.0.1:3000",
video: false,
screenshotOnRunFailure: true,
specPattern: "cypress/e2e/**/*.cy.{ts,tsx,js,jsx}",
baseUrl: "http://localhost:3000",
specPattern: "cypress/e2e/**/*.cy.{js,jsx,ts,tsx}",
supportFile: "cypress/support/e2e.ts",
setupNodeEvents(on, config) {
return clerkSetup({ config });
},
},
});

View File

@@ -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> {
return cy
.get("body")
.then(($body) => $body.text().toLowerCase().includes("sign in to view the feed"));
function assertSignedInAndLanded() {
cy.contains(/live feed/i, { timeout: 30_000 }).should("be.visible");
}
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", {
onBeforeLoad(win: Window) {
win.localStorage.clear();
},
});
// Story: user signs in, then visits /activity and sees the live feed.
cy.visit("/sign-in");
cy.clerkLoaded();
cy.clerkSignIn({ strategy: "email_code", identifier: email });
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.visit("/activity");
assertSignedInAndLanded();
cy.wait("@activityList");
cy.contains(/live feed/i).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.wait("@activityList");
cy.contains("CI hardening").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) => {
if (signedOut) {
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");
});
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) => {
if (signedOut) {
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");
});
cy.wait("@activityList");
cy.contains(/unable to load feed|boom/i).should("be.visible");
});
});

View File

@@ -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.contains(/sign in to view the feed/i).should("be.visible");
cy.location("pathname", { timeout: 20_000 }).should("match", /\/sign-in/);
});
});

View File

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

View File

@@ -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) {
throw new Error(
`Missing Cypress env var ${name}. ` +
`Set it via CYPRESS_${name}=... in CI/local before running Clerk login tests.`,
);
}
return value;
if (value) return value;
if (fallback !== undefined) return fallback;
throw new Error(
`Missing Cypress env var ${name}. ` +
`Set it via CYPRESS_${name}=... in CI/local before running Clerk login tests.`,
);
}
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 email = requireEnv("CLERK_TEST_EMAIL");
const otp = requireEnv("CLERK_TEST_OTP");
const clerkOrigin = normalizeOrigin(
getEnv("CLERK_ORIGIN", clerkOriginFromPublishableKey()),
);
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.
cy.get('[data-testid="activity-signin"]').click({ force: true });
// Navigate to a dedicated sign-in route that renders Clerk SignIn top-level.
// 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).
// 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 });
const emailSelector =
'input[type="email"], input[name="identifier"], input[autocomplete="email"]';
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;
// Submit / continue
cy.get('button[type="submit"], button')
.contains(/continue|sign in|send|next/i)
.click({ force: true });
const fillEmailStep = (email: string) => {
cy.get(emailSelector, { timeout: 20_000 })
.first()
.clear()
.type(email, { delay: 10 });
// 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 });
cy.contains(continueSelector, /continue|sign in|send|next/i, { timeout: 20_000 })
.should("be.visible")
.click({ force: true });
};
// 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 });
}
});
},
);
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);
});
};
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:
* - CYPRESS_CLERK_ORIGIN (e.g. https://<subdomain>.clerk.accounts.dev)
* - CYPRESS_CLERK_TEST_EMAIL
* - CYPRESS_CLERK_TEST_OTP
* Optional env vars (CYPRESS_*):
* - CLERK_ORIGIN (e.g. https://<subdomain>.accounts.dev)
* - NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY (used to derive origin when CLERK_ORIGIN not set)
* - CLERK_TEST_EMAIL (default: jane+clerk_test@example.com)
* - CLERK_TEST_OTP (default: 424242)
*/
loginWithClerkOtp(): Chainable<void>;
}

View File

@@ -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";

View File

@@ -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",
"resolved": "https://registry.npmjs.org/@clerk/backend/-/backend-2.29.7.tgz",
"integrity": "sha512-OSfFQ85L0FV2wSzqlr0hRvluIu3Z5ClgLiBE6Qx7XjSGyJoqEvP5OP4fl5Nt5icgGvH0EwA1dljPGyQpaqbQEw==",
"version": "2.30.1",
"resolved": "https://registry.npmjs.org/@clerk/backend/-/backend-2.30.1.tgz",
"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",

View File

@@ -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",

View File

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

View File

@@ -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>
);
}

View File

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

View File

@@ -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: [