feat(GRO-1867): bridge Better Auth session to CustomerPortal (#34)

src/__tests__/portal.test.tsx

@@ -313,3 +313,164 @@ describe("CustomerPortal session loading", () => {
     Object.defineProperty(window, "location", { value: originalLocation, writable: true });
   });
 });
+
+// ─── CustomerPortal — Better Auth SSO bridge (GRO-1867) ────────────────────
+
+describe("CustomerPortal SSO bridge", () => {
+  beforeEach(() => {
+    // Make sure no dev-user leaks across tests
+    window.localStorage.clear();
+  });
+
+  const brandingResponse = {
+    ok: true,
+    json: async () => ({
+      businessName: "GroomBook",
+      primaryColor: "#4f8a6f",
+      accentColor: "#8b7355",
+      logoBase64: null,
+      logoMimeType: null,
+    }),
+  } as Response;
+
+  it("bridges Better Auth session via /api/portal/session-from-auth and uses returned sessionId", async () => {
+    global.fetch = vi.fn((input: RequestInfo, init?: RequestInit) => {
+      const url = typeof input === "string" ? input : input.toString();
+      if (url === "/api/branding") return Promise.resolve(brandingResponse);
+      if (url === "/api/auth/get-session") {
+        return Promise.resolve({
+          ok: true,
+          json: async () => ({ user: { email: "customer@example.com", role: "customer" } }),
+        } as Response);
+      }
+      if (url === "/api/portal/session-from-auth" && init?.method === "POST") {
+        return Promise.resolve({
+          ok: true,
+          status: 201,
+          json: async () => ({ sessionId: "sso-sess-1", clientId: "client-1", clientName: "Jane Doe" }),
+        } as Response);
+      }
+      // Subsequent portal API calls — surface them so we can assert the header
+      return Promise.resolve({ ok: true, json: async () => ({}) } as Response);
+    }) as unknown as typeof fetch;
+
+    const { CustomerPortal } = await import("../portal/CustomerPortal.js");
+    render(
+      <MemoryRouter initialEntries={["/"]}>
+        <CustomerPortal />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      expect(global.fetch).toHaveBeenCalledWith("/api/auth/get-session", expect.objectContaining({ credentials: "include" }));
+    });
+    await waitFor(() => {
+      expect(global.fetch).toHaveBeenCalledWith(
+        "/api/portal/session-from-auth",
+        expect.objectContaining({ method: "POST", credentials: "include" })
+      );
+    });
+    // Client greeting reflects the bridged customer name (proof the response was consumed)
+    await waitFor(() => {
+      expect(screen.getByText(/Hi, Jane/)).toBeInTheDocument();
+    });
+    // The impersonation banner must NOT appear — this is the customer themselves
+    expect(screen.queryByRole("button", { name: /End Session/i })).not.toBeInTheDocument();
+  });
+
+  it("shows a friendly fallback when session-from-auth returns 404 (no client record)", async () => {
+    global.fetch = vi.fn((input: RequestInfo) => {
+      const url = typeof input === "string" ? input : input.toString();
+      if (url === "/api/branding") return Promise.resolve(brandingResponse);
+      if (url === "/api/auth/get-session") {
+        return Promise.resolve({
+          ok: true,
+          json: async () => ({ user: { email: "stranger@example.com", role: "customer" } }),
+        } as Response);
+      }
+      if (url === "/api/portal/session-from-auth") {
+        return Promise.resolve({
+          ok: false,
+          status: 404,
+          json: async () => ({ error: "No client record found for this user" }),
+        } as Response);
+      }
+      return Promise.resolve({ ok: true, json: async () => ({}) } as Response);
+    }) as unknown as typeof fetch;
+
+    const { CustomerPortal } = await import("../portal/CustomerPortal.js");
+    render(
+      <MemoryRouter initialEntries={["/"]}>
+        <CustomerPortal />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText(/Portal access not configured/i)).toBeInTheDocument();
+    });
+    expect(screen.getByText(/not linked to a customer record/i)).toBeInTheDocument();
+    // Sign-out escape hatch is present so the user is not stuck in a loop
+    expect(screen.getByRole("button", { name: /Sign out/i })).toBeInTheDocument();
+  });
+
+  it("does not call session-from-auth when there is no Better Auth session", async () => {
+    global.fetch = vi.fn((input: RequestInfo) => {
+      const url = typeof input === "string" ? input : input.toString();
+      if (url === "/api/branding") return Promise.resolve(brandingResponse);
+      if (url === "/api/auth/get-session") {
+        return Promise.resolve({
+          ok: true,
+          json: async () => null,
+        } as Response);
+      }
+      return Promise.resolve({ ok: true, json: async () => ({}) } as Response);
+    }) as unknown as typeof fetch;
+
+    const { CustomerPortal } = await import("../portal/CustomerPortal.js");
+    render(
+      <MemoryRouter initialEntries={["/"]}>
+        <CustomerPortal />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      expect(global.fetch).toHaveBeenCalledWith("/api/auth/get-session", expect.objectContaining({ credentials: "include" }));
+    });
+    // Wait one tick to ensure no subsequent bridge call is queued
+    await new Promise((r) => setTimeout(r, 30));
+    const bridgeCalls = vi.mocked(global.fetch).mock.calls.filter(
+      ([u]) => typeof u === "string" && u === "/api/portal/session-from-auth"
+    );
+    expect(bridgeCalls).toHaveLength(0);
+  });
+
+  it("skips the bridge for staff Better Auth sessions", async () => {
+    global.fetch = vi.fn((input: RequestInfo) => {
+      const url = typeof input === "string" ? input : input.toString();
+      if (url === "/api/branding") return Promise.resolve(brandingResponse);
+      if (url === "/api/auth/get-session") {
+        return Promise.resolve({
+          ok: true,
+          json: async () => ({ user: { email: "staff@example.com", role: "staff" } }),
+        } as Response);
+      }
+      return Promise.resolve({ ok: true, json: async () => ({}) } as Response);
+    }) as unknown as typeof fetch;
+
+    const { CustomerPortal } = await import("../portal/CustomerPortal.js");
+    render(
+      <MemoryRouter initialEntries={["/"]}>
+        <CustomerPortal />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      expect(global.fetch).toHaveBeenCalledWith("/api/auth/get-session", expect.objectContaining({ credentials: "include" }));
+    });
+    await new Promise((r) => setTimeout(r, 30));
+    const bridgeCalls = vi.mocked(global.fetch).mock.calls.filter(
+      ([u]) => typeof u === "string" && u === "/api/portal/session-from-auth"
+    );
+    expect(bridgeCalls).toHaveLength(0);
+  });
+});

src/portal/CustomerPortal.tsx

@@ -43,6 +43,15 @@ export function CustomerPortal() {
   // Track whether an impersonation session fetch from URL param is in-flight
   // Dashboard will not redirect while this is true, allowing the session to load
   const [isImpersonating, setIsImpersonating] = useState(false);
+  // Portal session ID for real SSO customers (GRO-1867). Populated by the
+  // Better Auth → /api/portal/session-from-auth bridge below. Carries the
+  // X-Impersonation-Session-Id header on subsequent portal API calls without
+  // triggering the impersonation banner (the customer is themselves).
+  const [portalSessionId, setPortalSessionId] = useState<string | null>(null);
+  // User-facing message when the SSO bridge cannot resolve a client record
+  // (e.g. authenticated user with no matching client row). Rendered in place
+  // of the portal chrome instead of bouncing back to /login.
+  const [authError, setAuthError] = useState<string | null>(null);
   const { branding } = useBranding();
   const [searchParams, setSearchParams] = useSearchParams();
 
@@ -98,10 +107,64 @@ export function CustomerPortal() {
           }
         })
         .finally(() => setInitComplete(true));
-    } else {
-      // No valid session: staff dev users and unauthenticated users fall through here
-      setInitComplete(true);
+      return;
     }
+
+    if (devUser && devUser.type === "staff") {
+      // Staff dev user — fall through; App.tsx redirects to /admin.
+      setInitComplete(true);
+      return;
+    }
+
+    // Real SSO customer (GRO-1867): bridge a Better Auth session into a portal
+    // session via POST /api/portal/session-from-auth. The returned session ID
+    // is used in the X-Impersonation-Session-Id header for portal API calls.
+    (async () => {
+      try {
+        const sessionResp = await fetch("/api/auth/get-session", { credentials: "include" });
+        if (!sessionResp.ok) {
+          setInitComplete(true);
+          return;
+        }
+        let sessionData: { user?: { email?: string; role?: string | null } } | null = null;
+        try {
+          sessionData = (await sessionResp.json()) as { user?: { email?: string; role?: string | null } } | null;
+        } catch {
+          // Better Auth returns an empty body when there is no session
+        }
+        if (!sessionData || !sessionData.user) {
+          setInitComplete(true);
+          return;
+        }
+        // Staff are routed to /admin by App.tsx; don't run the customer bridge.
+        if (sessionData.user.role === "staff") {
+          setInitComplete(true);
+          return;
+        }
+
+        const bridgeResp = await fetch("/api/portal/session-from-auth", {
+          method: "POST",
+          credentials: "include",
+        });
+
+        if (bridgeResp.ok) {
+          const data = await bridgeResp.json() as { sessionId: string; clientId: string; clientName: string };
+          setPortalSessionId(data.sessionId);
+          setClientName(data.clientName);
+        } else if (bridgeResp.status === 404) {
+          // Authenticated but no matching client row — show a friendly message
+          // instead of bouncing back to /login (which would loop indefinitely).
+          setAuthError(
+            "Your account is not linked to a customer record. Please contact your groomer to set up portal access."
+          );
+        }
+        // 401/other: fall through; App.tsx render guard will redirect to /login.
+      } catch {
+        // Network error — fall through; the render guard will redirect to /login.
+      } finally {
+        setInitComplete(true);
+      }
+    })();
   }, []);
 
   const handleEnd = useCallback(async () => {
@@ -157,7 +220,7 @@ export function CustomerPortal() {
   const isReadOnly = session?.status === "active";
 
   const renderSection = () => {
-    const sessionId = session?.id ?? null;
+    const sessionId = session?.id ?? portalSessionId;
     switch (activeSection) {
       case "dashboard":
         return <Dashboard onNavigate={handleNavClick} readOnly={!!isReadOnly} sessionId={sessionId} clientName={clientName} onReschedule={handleReschedule} isImpersonating={isImpersonating} />;
@@ -183,7 +246,40 @@ export function CustomerPortal() {
   // For client dev users, we stay on the portal even if session is null — the dev-session
   // response may not have id set immediately, or there may be timing issues with the
   // session state. Dev users are verified via localStorage and the dev-session flow.
-  if (initComplete && !session) {
+  // SSO customers are recognised by portalSessionId (set by the Better Auth bridge).
+  if (initComplete && !session && !portalSessionId) {
+    if (authError) {
+      // GRO-1867: graceful 404 fallback — authenticated user has no client row.
+      return (
+        <div
+          className="min-h-screen flex items-center justify-center bg-[#faf8f5] font-sans px-6"
+          role="alert"
+          aria-live="polite"
+        >
+          <div className="max-w-md w-full bg-white rounded-xl shadow-sm border border-stone-200 p-8 text-center">
+            <div className="w-12 h-12 rounded-full bg-amber-100 text-amber-700 flex items-center justify-center mx-auto mb-4">
+              <Shield size={22} />
+            </div>
+            <h1 className="text-lg font-semibold text-stone-800 mb-2">Portal access not configured</h1>
+            <p className="text-sm text-stone-600 mb-6">{authError}</p>
+            <button
+              onClick={async () => {
+                try {
+                  await fetch("/api/auth/sign-out", { method: "POST", credentials: "include" });
+                } catch {
+                  // Best-effort sign-out; redirect to /login regardless.
+                }
+                window.location.href = "/login";
+              }}
+              className="inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg text-sm font-medium text-stone-700 bg-stone-100 hover:bg-stone-200 transition-colors"
+            >
+              <LogOut size={14} />
+              Sign out
+            </button>
+          </div>
+        </div>
+      );
+    }
     const devUser = getDevUser();
     if (devUser && devUser.type === "staff") {
       return <Navigate to="/admin" replace />;