Web clients scope by the URL org; drop cookie-based org switching (#1000)

The console URL's org slug is now the request scope on the client too: both API clients (core + account) read the slug from window.location at request time and send it as the x-executor-organization header, so every tab's requests are scoped to the org its own URL names — independent of the single shared session cookie. With requests URL-scoped, the cookie-based switch machinery is dead weight: - delete the switchOrganization endpoint/handler/atom; the org switcher and create-org just navigate to /<slug> (the session already authenticates the user to all their orgs, so there is nothing to switch server-side). - delete ForeignOrgSlug; a slug the caller can't access now resolves to a null org via /account/me and the shell 404s, no switch-into-org dance. - simplify OrgSlugGate to canonicalize a bare URL onto the active slug and otherwise render through (a slug in the URL is already the scope). Flips the multi-tab scenario from reproducing the cookie-steal corruption to asserting per-tab independence, and reframes the foreign-slug scenario around URL scoping (no session switch; the cookie is never rewritten).

Rhys Sullivan committed 5 months ago

Commit 1f9bfe01 parent 58e23e814 files · +233 −214Browse files

Showing the changes to apps/cloud/src (6 of 14 files). Show all

Unified · Split

6 files

apps/cloud/src/auth/api.ts +0 −11
apps/cloud/src/auth/handlers.ts +0 −14
apps/cloud/src/routes/__root.tsx +19 −15
apps/cloud/src/web/auth.tsx +0 −1
apps/cloud/src/web/components/foreign-org-slug.tsx +0 −61
apps/cloud/src/web/components/org-menu-slot.tsx +12 −15

apps/cloud/src/auth/api.ts+0−11

   activeOrganizationId: Schema.NullOr(Schema.String),
 });
-const SwitchOrganizationBody = Schema.Struct({
-  organizationId: Schema.String,
-});
 const CreateOrganizationBody = Schema.Struct({
   name: Schema.String,
 });
   login: "/api/auth/login",
   logout: "/api/auth/logout",
   callback: "/api/auth/callback",
-  switchOrganization: "/api/auth/switch-organization",
 } as const;
 const AuthErrors = [UserStoreError, WorkOSError] as const;
       error: WorkOSError,
     }),
   )
-  .add(
-    HttpApiEndpoint.post("switchOrganization", "/auth/switch-organization", {
-      payload: SwitchOrganizationBody,
-      error: WorkOSError,
-    }),
-  )
   .add(
     HttpApiEndpoint.post("createOrganization", "/auth/create-organization", {
       payload: CreateOrganizationBody,

apps/cloud/src/auth/handlers.ts+0−14

@@ -301,20 +301,6 @@ export const CloudSessionAuthHandlers = HttpApiBuilder.group( · 300 unmodified lines
301	};	301	};
302	}),	302	}),
303	)	303	)
304	.handle("switchOrganization", ({ payload }) =>
305	Effect.gen(function* () {
306	const workos = yield* WorkOSClient;
307	const session = yield* SessionContext;
308
309	const refreshed = yield* workos.refreshSession(
310	session.sealedSession,
311	payload.organizationId,
312	);
313	if (refreshed) {
314	(yield* SessionCookies).set("wos-session", refreshed, RESPONSE_COOKIE_OPTIONS);
315	}
316	}),
317	)
318	.handle("createOrganization", ({ payload }) =>	304	.handle("createOrganization", ({ payload }) =>
319	Effect.gen(function* () {	305	Effect.gen(function* () {
320	const workos = yield* WorkOSClient;	306	const workos = yield* WorkOSClient;

apps/cloud/src/routes/__root.tsx+19−15

   createRootRoute,
   useLocation,
   useNavigate,
+  useParams,
 } from "@tanstack/react-router";
 import { AutumnProvider } from "autumn-js/react";
 import posthog from "posthog-js";
 import { AuthProvider, useAuth } from "../web/auth";
 import { loginPath } from "../auth/return-to";
 import { ONBOARDING_PATHS, PUBLIC_PATHS } from "../auth/route-paths";
-import { ForeignOrgSlug } from "../web/components/foreign-org-slug";
 import { SupportOptions } from "../web/components/support-options";
 import { Shell } from "../web/shell";
 import appCss from "@executor-js/react/globals.css?url";
   const navigate = useNavigate();
   const isOnboardingRoute = ONBOARDING_PATHS.has(location.pathname);
   const isPublicRoute = PUBLIC_PATHS.has(location.pathname);
+  // The org the URL names (the `{-$orgSlug}` segment), if any. `/account/me`
+  // is scoped to it, so `auth.organization` IS this org when the caller is a
+  // member — and `null` when the URL names an org they can't access.
+  const urlOrgSlug = (useParams({ strict: false }) as { orgSlug?: string }).orgSlug;
   // The SSR gate already bounced fresh org-less document requests to
   // /create-org; this catches the MID-SESSION transitions (org deleted,
-  // membership revoked → /account/me now reports no org).
+  // membership revoked → /account/me now reports no org). Only for BARE paths:
+  // an org-less result on a slugged URL is a wrong address (404 below), not a
+  // reason to send the user to onboarding.
   const needsOrgRedirect =
     auth.status === "authenticated" &&
     auth.organization == null &&
+    !urlOrgSlug &&
     !isOnboardingRoute &&
     !isPublicRoute;
   }
   if (auth.organization == null) {
-    return <BlankScreen />;
+    // A URL naming an org this session can't access (`/account/me` returned no
+    // org for its slug) is a wrong address → the route 404, framed by nothing
+    // (the user isn't "in" any org here). A bare path with no org is a new
+    // user — the redirect effect above is taking them to onboarding.
+    return urlOrgSlug ? <NotFoundPage /> : <BlankScreen />;
   }
   // Seed the server connection from the SSR origin so origin-derived UI (the
                 organizationId={auth.organization.id}
                 organizationSlug={activeSlug}
               >
-                <OrgSlugGate
+                {/* The org header scopes every request to the URL's org, so
-                  activeSlug={activeSlug}
+                    reaching here means the caller is a member of `activeSlug`
-                  // Framed by the real shell: a foreign slug resolves (or
+                    (a foreign slug already 404'd above). The gate only keeps
-                  // 404s) inside the app chrome, exactly like the route-level
+                    the URL canonical — bare → /<slug>. */}
-                  // not-found — never a bare full-page state.
+                <OrgSlugGate activeSlug={activeSlug}>
-                  foreignSlug={(slug) => (
-                    <>
-                      <Shell content={<ForeignOrgSlug slug={slug} />} />
-                      <Toaster />
-                    </>
-                  )}
-                >
                   <Shell />
                   <Toaster />
                 </OrgSlugGate>

apps/cloud/src/web/auth.tsx+0−1

@@ -33,7 +33,6 @@ export const organizationsAtom = Atom.refreshOnWindowFocus( · 32 unmodified lines
33	}),	33	}),
34	);	34	);
35		35
36	export const switchOrganization = CloudApiClient.mutation("cloudAuth", "switchOrganization");
37	export const createOrganization = CloudApiClient.mutation("cloudAuth", "createOrganization");	36	export const createOrganization = CloudApiClient.mutation("cloudAuth", "createOrganization");
38		37
39	export const pendingInvitationsAtom = CloudApiClient.query("cloudAuth", "pendingInvitations", {	38	export const pendingInvitationsAtom = CloudApiClient.query("cloudAuth", "pendingInvitations", {

apps/cloud/src/web/components/foreign-org-slug.tsx+0−61

@@ -1,61 +0,0 @@
1	import { useEffect, useRef, useState, type ReactNode } from "react";
2	import { useAtomValue, useAtomSet } from "@effect/atom-react";
3	import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";
4	import * as Exit from "effect/Exit";
5	import { authWriteKeys } from "@executor-js/react/api/reactivity-keys";
6	import { OrgSlugNotFound } from "@executor-js/react/multiplayer/org-slug-gate";
7
8	import { organizationsAtom, switchOrganization } from "../auth";
9
10	// ---------------------------------------------------------------------------
11	// Foreign-slug resolution for the cloud org-slug gate: the URL names a slug
12	// that isn't the active org's. Resolve it against the caller's memberships:
13	// - a member of that org (their bookmark, a teammate's shared link) → switch
14	// the session into it and reload, so every atom re-scopes
15	// - anything else → a WRONG ADDRESS → not-found. A slug must never silently
16	// resolve to a different workspace than the URL names, and single-segment
17	// typos (/this-page-does-not-exist) match the slugged index route, so this
18	// IS the app's 404 for them.
19	// Membership comes from the already-cached organizations atom; the matched
20	// case alone performs a side effect, isolated in `SwitchIntoOrg`.
21	// ---------------------------------------------------------------------------
22
23	const Centered = (props: { children?: ReactNode }) => (
24	<div className="flex min-h-full flex-1 items-center justify-center text-sm text-muted-foreground">
25	{props.children}
26	</div>
27	);
28
29	// Switch the session into `organizationId`, then full-reload so the whole app
30	// re-scopes. One-shot: the ref guards React's double-invoke and the render
31	// between resolution and the reload landing. A failed switch means the slug
32	// named an org we can't actually enter — fall back to not-found.
33	function SwitchIntoOrg(props: { readonly organizationId: string }) {
34	const doSwitchOrganization = useAtomSet(switchOrganization, { mode: "promiseExit" });
35	const [failed, setFailed] = useState(false);
36	const started = useRef(false);
37
38	useEffect(() => {
39	if (started.current) return;
40	started.current = true;
41	void doSwitchOrganization({
42	payload: { organizationId: props.organizationId },
43	reactivityKeys: authWriteKeys,
44	}).then((exit) => (Exit.isSuccess(exit) ? window.location.reload() : setFailed(true)));
45	}, [props.organizationId, doSwitchOrganization]);
46
47	return failed ? <OrgSlugNotFound /> : <Centered>Switching organization…</Centered>;
48	}
49
50	export function ForeignOrgSlug(props: { readonly slug: string }) {
51	const organizations = useAtomValue(organizationsAtom);
52
53	return AsyncResult.match(organizations, {
54	onInitial: () => <Centered />,
55	onFailure: () => <OrgSlugNotFound />,
56	onSuccess: ({ value }) => {
57	const match = value.organizations.find((org: { slug: string }) => org.slug === props.slug);
58	return match ? <SwitchIntoOrg organizationId={match.id} /> : <OrgSlugNotFound />;
59	},
60	});
61	}

apps/cloud/src/web/components/org-menu-slot.tsx+12−15

 import { useState } from "react";
-import { useAtomValue, useAtomSet } from "@effect/atom-react";
+import { useAtomValue } from "@effect/atom-react";
 import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";
-import * as Exit from "effect/Exit";
-import { authWriteKeys } from "@executor-js/react/api/reactivity-keys";
 import { trackEvent } from "@executor-js/react/api/analytics";
 import { Button } from "@executor-js/react/components/button";
 import {
   DropdownMenuSubTrigger,
 } from "@executor-js/react/components/dropdown-menu";
 import { useAuth } from "../auth";
-import { organizationsAtom, switchOrganization } from "../auth";
+import { organizationsAtom } from "../auth";
 import { CreateOrganizationFields, useCreateOrganizationForm } from "./create-organization-form";
 // ---------------------------------------------------------------------------
 function OrganizationSwitcherItems(props: { activeOrganizationId: string | null }) {
   const organizations = useAtomValue(organizationsAtom);
-  const doSwitchOrganization = useAtomSet(switchOrganization, { mode: "promiseExit" });
-  const handleSwitch = async (organization: { id: string; slug: string }) => {
+  // Switching orgs is now a pure URL navigation: the session authenticates the
+  // user to ALL their orgs, and the slug in the path scopes every request (the
+  // `x-executor-organization` header). No cookie to rewrite, no server switch
+  // call — just land on the other org's URL root and the whole app re-scopes.
+  const handleSwitch = (organization: { id: string; slug: string }) => {
     if (organization.id === props.activeOrganizationId) return;
-    const exit = await doSwitchOrganization({
+    trackEvent("org_switched", { success: true });
-      payload: { organizationId: organization.id },
+    window.location.href = `/${organization.slug}`;
-      reactivityKeys: authWriteKeys,
-    });
-    trackEvent("org_switched", { success: Exit.isSuccess(exit) });
-    // Land on the new org's URL root — a plain reload would keep the OLD
-    // org's slug in the path and the slug gate would switch right back.
-    if (Exit.isSuccess(exit)) window.location.href = `/${organization.slug}`;
   };
   return AsyncResult.match(organizations, {
               <DropdownMenuItem
                 key={organization.id}
                 disabled={isActive}
-                onClick={() => handleSwitch(organization)}
+                onClick={() => {
+                  handleSwitch(organization);
+                }}
                 className="text-xs"
               >
                 <span className="min-w-0 flex-1 truncate">{organization.name}</span>