Fix auth E2E: invitation accept fallback and branding mocks.

Accept invitations client-side after invite signup without failing when the server hook already accepted; fix org-config route mocks for tagline-only fetches and disambiguate login password field.

Author: jlouisugbo

components/auth/AcceptInvitationActions.tsx

@@ -10,6 +10,40 @@ import { AuthMessage } from "@/components/auth/authConstants";
 import api from "@/lib/api";
 import authClient from "@/lib/authClient";
 
+const SESSION_POLL_MS = 50;
+const SESSION_POLL_ATTEMPTS = 20;
+
+async function waitForAuthSession() {
+  for (let attempt = 0; attempt < SESSION_POLL_ATTEMPTS; attempt++) {
+    const { data } = await authClient.getSession();
+    if (data?.session) return true;
+    await new Promise((resolve) => setTimeout(resolve, SESSION_POLL_MS));
+  }
+  return false;
+}
+
+/** Accepts the invitation for the current session and sets the active org. */
+export async function acceptInvitationForSession(
+  invitationId: string,
+): Promise<boolean> {
+  try {
+    if (!(await waitForAuthSession())) return false;
+    const res = await api.invitations[":id"].accept.$post({
+      param: { id: invitationId },
+    });
+    if (!res.ok) return false;
+    const { organizationId } = (await res.json()) as {
+      organizationId: string;
+    };
+    const { error: activeOrgError } = await authClient.organization.setActive({
+      organizationId,
+    });
+    return !activeOrgError;
+  } catch {
+    return false;
+  }
+}
+
 /** Accepts the invitation as the signed-in invitee, then goes home. */
 export function AcceptInvitationButton({
   invitationId,
@@ -22,27 +56,7 @@ export function AcceptInvitationButton({
 
   const accept = async () => {
     setMessage({ kind: "loading", text: AuthMessage.Loading });
-    try {
-      const res = await api.invitations[":id"].accept.$post({
-        param: { id: invitationId },
-      });
-      if (!res.ok) {
-        setMessage({ kind: "error", text: AuthMessage.AcceptFailed });
-        return;
-      }
-      const { organizationId } = (await res.json()) as {
-        organizationId: string;
-      };
-      const { error: activeOrgError } = await authClient.organization.setActive(
-        {
-          organizationId,
-        },
-      );
-      if (activeOrgError) {
-        setMessage({ kind: "error", text: AuthMessage.AcceptFailed });
-        return;
-      }
-    } catch {
+    if (!(await acceptInvitationForSession(invitationId))) {
       setMessage({ kind: "error", text: AuthMessage.AcceptFailed });
       return;
     }

components/auth/SignupForm.tsx

@@ -6,6 +6,7 @@ import { useRouter } from "next/navigation";
 import AuthTextField, {
   focusFirstInvalidField,
 } from "@/components/auth/AuthTextField";
+import { acceptInvitationForSession } from "@/components/auth/AcceptInvitationActions";
 import AuthPasswordField from "@/components/auth/AuthPasswordField";
 import AuthSubmitButton from "@/components/auth/AuthSubmitButton";
 import AuthFormMessage, {
@@ -124,6 +125,11 @@ export default function SignupForm({
       return;
     }
 
+    if (invitation) {
+      setMessage({ kind: "loading", text: AuthMessage.Loading });
+      await acceptInvitationForSession(invitation.id);
+    }
+
     setMessage({ kind: "success", text: AuthMessage.AccountCreated });
   };
 

tests/e2e/login.spec.ts

@@ -37,7 +37,7 @@ test.describe("Login Page", () => {
 
     await page.goto("/login");
     await page.getByPlaceholder("example@email.com").fill(user.email);
-    await page.getByPlaceholder("Password").fill(user.password);
+    await page.getByLabel("Password", { exact: true }).fill(user.password);
 
     await page.getByRole("button", { name: "Login" }).click();
     await expect(page).toHaveURL(/\//);

tests/e2e/unauthenticated-branding.spec.ts

@@ -20,15 +20,20 @@ async function configureBranding(
     const url = new URL(route.request().url());
     expect(url.searchParams.get("organizationSlug")).toBe("servicestart");
     const keys = url.searchParams.getAll("keys");
-    expect(keys).toContain(OrganizationConfigKey.LogoUrl);
+    const normalizedLogo =
+      logoUrl === null || logoUrl === undefined
+        ? logoUrl
+        : logoUrl.trim() === ""
+          ? logoUrl
+          : logoUrl.trim();
     const config: Record<string, string | null> = {
-      [OrganizationConfigKey.LogoUrl]: logoUrl,
+      [OrganizationConfigKey.LogoUrl]: normalizedLogo,
       [OrganizationConfigKey.Tagline]: tagline,
       [OrganizationConfigKey.PrimaryColor]: "#FD8033",
       [OrganizationConfigKey.SecondaryColor]: "#FB3552",
     };
     await route.fulfill({
-      json: Object.fromEntries(keys.map((key) => [key, config[key]])),
+      json: Object.fromEntries(keys.map((key) => [key, config[key] ?? null])),
     });
   });
 }
@@ -110,7 +115,11 @@ test.describe("Unauthenticated organization branding", () => {
       page,
     }) => {
       await configureBranding(page, "/bog.svg");
+      const configResponse = page.waitForResponse((response) =>
+        new URL(response.url()).pathname.endsWith("/organizationConfig"),
+      );
       await page.goto(path);
+      await configResponse;
       const tagline = page.getByTestId("organization-tagline");
       await expect(tagline).toHaveText("Our organization welcomes you");
       await expect(tagline).toBeVisible();