Rework cloud org flow: onboarding page + live membership check (#234)

Replace the callback's auto-org-creation with an explicit OnboardingPage that AuthGate renders when a user has a session but no org. Drops the duplicated create-org logic, the login-time upsertOrganization calls, and the '"{name}'s Organization"' default. Users name their own org. Add resolveOrganization helper that reads the local mirror first and lazily falls back to WorkOS on miss, so /me and protected API routes self-heal when the mirror is stale instead of silently returning a null org (the bug that was routing existing users to onboarding). Add authorizeOrganization helper that performs a live listUserMemberships check on every protected request. A user removed from their active org now loses access on the next request, not up to ~10 minutes later when the JWT access token naturally expires. The extra WorkOS call is acceptable for now; can be swapped for a local memberships table fed by the Events API as a follow-up. Fix silent refresh failure in createOrganization: if refreshSession returns null or yields a session still scoped to the previous org (happens when the current session is stale — e.g. the caller was removed from the org their cookie is pinned to), clear the cookie and fail loudly so the frontend bounces to login instead of getting stuck on onboarding with a successful 200 and a cookie that will never match. Extract CreateOrganizationForm hook + fields into a shared component so the shell dialog and the new onboarding page reuse the same state and styling.

Rhys Sullivan committed 7 months ago

Commit 5693f5d1 parent 48eeb909 files · +314 −115Browse files

Unified · Split

9 files

apps/cloud/src/api/protected.ts +2 −3
apps/cloud/src/auth/api.ts +6 −1
apps/cloud/src/auth/authorize-organization.ts +36 −0
apps/cloud/src/auth/handlers.ts +38 −38
apps/cloud/src/auth/resolve-organization.ts +30 −0
apps/cloud/src/routes/__root.tsx +5 −0
apps/cloud/src/web/components/create-organization-form.tsx +91 −0
apps/cloud/src/web/pages/onboarding.tsx +77 −0
apps/cloud/src/web/shell.tsx +29 −73

apps/cloud/src/api/protected.ts+2−3

 import { GoogleDiscoveryExtensionService } from "@executor/plugin-google-discovery/api";
 import { GraphqlExtensionService } from "@executor/plugin-graphql/api";
-import { UserStoreService } from "../auth/context";
+import { authorizeOrganization } from "../auth/authorize-organization";
 import { WorkOSAuth } from "../auth/workos";
 import { AutumnService } from "../services/autumn";
 import { createOrgExecutor } from "../services/executor";
     const session = yield* workos.authenticateRequest(webRequest);
     if (!session || !session.organizationId) return null;
-    const users = yield* UserStoreService;
+    return yield* authorizeOrganization(session.userId, session.organizationId);
-    return yield* users.use((s) => s.getOrganization(session.organizationId!));
   });
 const createProtectedApp = (organizationId: string, organizationName: string) =>

apps/cloud/src/auth/api.ts+6−1

 /** Session auth endpoints — require a logged-in user, may not have an org */
 export class CloudAuthApi extends HttpApiGroup.make("cloudAuth")
-  .add(HttpApiEndpoint.get("me")`/auth/me`.addSuccess(AuthMeResponse).addError(UserStoreError))
+  .add(
+    HttpApiEndpoint.get("me")`/auth/me`
+      .addSuccess(AuthMeResponse)
+      .addError(UserStoreError)
+      .addError(WorkOSError),
+  )
   .add(HttpApiEndpoint.post("logout")`/auth/logout`)
   .add(
     HttpApiEndpoint.get("organizations")`/auth/organizations`

apps/cloud/src/auth/authorize-organization.ts+36−0

@@ -0,0 +1,36 @@
	1	// ---------------------------------------------------------------------------
	2	// Organization authorization — live membership check against WorkOS.
	3	// ---------------------------------------------------------------------------
	4	//
	5	// The sealed session cookie carries an organizationId that WorkOS signed at
	6	// login / refresh time. WorkOS does NOT invalidate existing sessions when a
	7	// membership is revoked, and `session.authenticate()` validates the JWT
	8	// locally without hitting the API — so a removed user keeps full access
	9	// until their access token naturally expires (~10 min).
	10	//
	11	// To close that gap we verify membership live on every protected request.
	12	// `listUserMemberships` is one WorkOS call per request. If this becomes a
	13	// hot path we can layer a short per-(user, org) TTL cache underneath, or
	14	// swap it for a local memberships table fed by the WorkOS Events API.
	15	//
	16	// Returns the resolved organization (via resolveOrganization) if the user
	17	// currently holds an active membership in it, otherwise null. Callers
	18	// should treat null as "no access" and route accordingly (onboarding page /
	19	// 403).
	20
	21	import { Effect } from "effect";
	22
	23	import { resolveOrganization } from "./resolve-organization";
	24	import { WorkOSAuth } from "./workos";
	25
	26	export const authorizeOrganization = (userId: string, organizationId: string) =>
	27	Effect.gen(function* () {
	28	const workos = yield* WorkOSAuth;
	29	const memberships = yield* workos.listUserMemberships(userId);
	30	const active = memberships.data.find(
	31	(m) => m.organizationId === organizationId && m.status === "active",
	32	);
	33	if (!active) return null;
	34
	35	return yield* resolveOrganization(organizationId);
	36	});

apps/cloud/src/auth/handlers.ts+38−38

 import { AUTH_PATHS, CloudAuthApi, CloudAuthPublicApi } from "./api";
 import { SessionContext } from "./middleware";
 import { UserStoreService } from "./context";
+import { authorizeOrganization } from "./authorize-organization";
+import { WorkOSError } from "./errors";
 import { WorkOSAuth } from "./workos";
 import { server } from "../env";
           yield* users.use((s) => s.ensureAccount(result.user.id));
           let sealedSession = result.sealedSession;
-          let organizationId = result.organizationId;
-          // If the auth response doesn't include an org, check if the user
+          // If the auth response didn't surface an org but the user already
-          // already belongs to one. Only create a new organization if they truly
+          // belongs to one, rehydrate the session with it. If they have no
-          // have no memberships — this prevents duplicate orgs on re-login.
+          // memberships at all, leave the session org-less — the frontend
-          if (!organizationId) {
+          // AuthGate will render the onboarding flow. We never auto-create
+          // organizations on login.
+          if (!result.organizationId && sealedSession) {
             const memberships = yield* workos.listUserMemberships(result.user.id);
             const existing = memberships.data[0];
             if (existing) {
-              organizationId = existing.organizationId;
+              const refreshed = yield* workos.refreshSession(
-            } else {
+                sealedSession,
-              const name =
+                existing.organizationId,
-                [result.user.firstName, result.user.lastName].filter(Boolean).join(" ") ||
+              );
-                result.user.email;
-              const org = yield* workos.createOrganization(`${name}'s Organization`);
-              yield* workos.createMembership(org.id, result.user.id, "admin");
-              yield* users.use((s) => s.upsertOrganization({ id: org.id, name: org.name }));
-              organizationId = org.id;
-            }
-            // Refresh the session so it includes the org context
-            if (sealedSession) {
-              const refreshed = yield* workos.refreshSession(sealedSession, organizationId);
               if (refreshed) sealedSession = refreshed;
             }
-          } else {
-            const org = yield* workos.getOrganization(organizationId!);
-            yield* users.use((s) =>
-              s.upsertOrganization({
-                id: organizationId!,
-                name: org.name,
-              }),
-            );
           }
           if (!sealedSession) {
           setCookie("wos-session", sealedSession, COOKIE_OPTIONS);
           return HttpServerResponse.redirect("/", { status: 302 });
-        }).pipe(
+        }),
-          Effect.catchTags({
-            WorkOSError: () => Effect.succeed(HttpServerResponse.redirect("/", { status: 302 })),
-            UserStoreError: () => Effect.succeed(HttpServerResponse.redirect("/", { status: 302 })),
-          }),
-        ),
       ),
 );
       .handle("me", () =>
         Effect.gen(function* () {
           const session = yield* SessionContext;
-          const users = yield* UserStoreService;
           const org = session.organizationId
-            ? yield* users.use((s) => s.getOrganization(session.organizationId!))
+            ? yield* authorizeOrganization(session.accountId, session.organizationId)
             : null;
           return {
           yield* workos.createMembership(org.id, session.accountId, "admin");
           yield* users.use((s) => s.upsertOrganization({ id: org.id, name: org.name }));
+          // Try to attach the new org to the current session. This can fail
+          // (or silently return a session still scoped to the old org) when
+          // the caller's current session is stale — most commonly after the
+          // user was removed from the org their cookie is pinned to. In that
+          // case we can't repair the session in-place, so we clear the
+          // cookie and fail loudly; the frontend will bounce to login and
+          // the callback's rehydrate path will pick up the new membership.
           const refreshed = yield* workos.refreshSession(session.sealedSession, org.id);
-          if (refreshed) {
+          const verified = refreshed
-            setCookie("wos-session", refreshed, COOKIE_OPTIONS);
+            ? yield* workos.authenticateSealedSession(refreshed)
+            : null;
+          if (!refreshed || !verified || verified.organizationId !== org.id) {
+            yield* Effect.logWarning(
+              "createOrganization: unable to attach new org to current session",
+              {
+                userId: session.accountId,
+                newOrgId: org.id,
+                refreshReturnedSession: refreshed != null,
+                verifiedOrgId: verified?.organizationId ?? null,
+              },
+            );
+            deleteCookie("wos-session", { path: "/" });
+            return yield* new WorkOSError();
           }
+          setCookie("wos-session", refreshed, COOKIE_OPTIONS);
           return { id: org.id, name: org.name };
         }),
       ),

apps/cloud/src/auth/resolve-organization.ts+30−0

@@ -0,0 +1,30 @@
	1	// ---------------------------------------------------------------------------
	2	// Organization lookup — local mirror with lazy WorkOS fallback.
	3	// ---------------------------------------------------------------------------
	4	//
	5	// We keep a minimal local mirror of organizations so domain tables can
	6	// foreign-key against them and so we don't hit WorkOS on every request.
	7	// But the mirror can drift: a user's session can reference an org that was
	8	// created outside this app (or before the mirror existed). Rather than
	9	// proactively mirroring on every login — which was the source of the messy
	10	// callback flow we just untangled — we mirror lazily the first time an
	11	// unknown org is read. All other callers just do `getOrganization` and get
	12	// a self-healing lookup for free.
	13
	14	import { Effect } from "effect";
	15
	16	import { UserStoreService } from "./context";
	17	import { WorkOSAuth } from "./workos";
	18
	19	export const resolveOrganization = (organizationId: string) =>
	20	Effect.gen(function* () {
	21	const users = yield* UserStoreService;
	22	const existing = yield* users.use((s) => s.getOrganization(organizationId));
	23	if (existing) return existing;
	24
	25	const workos = yield* WorkOSAuth;
	26	const fresh = yield* workos.getOrganization(organizationId);
	27	return yield* users.use((s) =>
	28	s.upsertOrganization({ id: fresh.id, name: fresh.name }),
	29	);
	30	});

apps/cloud/src/routes/__root.tsx+5−0

 import { Toaster } from "@executor/react/components/sonner";
 import { AuthProvider, useAuth } from "../web/auth";
 import { LoginPage } from "../web/pages/login";
+import { OnboardingPage } from "../web/pages/onboarding";
 import { Shell } from "../web/shell";
 import appCss from "@executor/react/globals.css?url";
     return <LoginPage />;
   }
+  if (auth.organization == null) {
+    return <OnboardingPage />;
+  }
   return (
     <AutumnProvider pathPrefix="/api/autumn">
       <ExecutorProvider>

apps/cloud/src/web/components/create-organization-form.tsx+91−0

@@ -0,0 +1,91 @@
	1	import { useState } from "react";
	2	import { useAtomSet } from "@effect-atom/atom-react";
	3	import { Input } from "@executor/react/components/input";
	4	import { Label } from "@executor/react/components/label";
	5
	6	import { createOrganization } from "../auth";
	7
	8	type CreatedOrganization = { id: string; name: string };
	9
	10	export function useCreateOrganizationForm(options: {
	11	defaultName?: string;
	12	onSuccess: (org: CreatedOrganization) => void;
	13	onFailure?: () => void;
	14	}) {
	15	const doCreate = useAtomSet(createOrganization, { mode: "promiseExit" });
	16	const [name, setName] = useState(options.defaultName ?? "");
	17	const [error, setError] = useState<string \| null>(null);
	18	const [creating, setCreating] = useState(false);
	19
	20	const reset = (nextName = options.defaultName ?? "") => {
	21	setName(nextName);
	22	setError(null);
	23	setCreating(false);
	24	};
	25
	26	const submit = async () => {
	27	const trimmed = name.trim();
	28	if (!trimmed) {
	29	setError("Organization name is required.");
	30	return;
	31	}
	32	setCreating(true);
	33	setError(null);
	34	const exit = await doCreate({ payload: { name: trimmed } });
	35	setCreating(false);
	36	if (exit._tag === "Success") {
	37	options.onSuccess(exit.value);
	38	} else {
	39	setError("Failed to create organization.");
	40	options.onFailure?.();
	41	}
	42	};
	43
	44	return {
	45	name,
	46	setName,
	47	error,
	48	setError,
	49	creating,
	50	submit,
	51	reset,
	52	canSubmit: name.trim().length > 0,
	53	};
	54	}
	55
	56	export function CreateOrganizationFields(props: {
	57	name: string;
	58	onNameChange: (name: string) => void;
	59	error: string \| null;
	60	onSubmit: () => void;
	61	}) {
	62	return (
	63	<div className="grid gap-4 py-3">
	64	<div className="grid gap-1.5">
	65	<Label
	66	htmlFor="organization-name"
	67	className="text-sm font-medium uppercase tracking-wider text-muted-foreground"
	68	>
	69	Organization name
	70	</Label>
	71	<Input
	72	id="organization-name"
	73	value={props.name}
	74	placeholder="Northwind Labs"
	75	autoFocus
	76	onChange={(event) => props.onNameChange((event.target as HTMLInputElement).value)}
	77	onKeyDown={(event) => {
	78	if (event.key === "Enter") props.onSubmit();
	79	}}
	80	className="h-9 text-sm"
	81	/>
	82	</div>
	83
	84	{props.error && (
	85	<div className="rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2">
	86	<p className="text-sm text-destructive">{props.error}</p>
	87	</div>
	88	)}
	89	</div>
	90	);
	91	}

apps/cloud/src/web/pages/onboarding.tsx+77−0

@@ -0,0 +1,77 @@
	1	import { useAtomRefresh } from "@effect-atom/atom-react";
	2	import { Button } from "@executor/react/components/button";
	3
	4	import { AUTH_PATHS } from "../../auth/api";
	5	import { authAtom, useAuth } from "../auth";
	6	import {
	7	CreateOrganizationFields,
	8	useCreateOrganizationForm,
	9	} from "../components/create-organization-form";
	10
	11	export const OnboardingPage = () => {
	12	const auth = useAuth();
	13	const refreshAuth = useAtomRefresh(authAtom);
	14
	15	const suggestedName =
	16	auth.status === "authenticated" &&
	17	auth.user.name != null &&
	18	auth.user.name.trim() !== ""
	19	? `${auth.user.name}'s Organization`
	20	: "";
	21
	22	const form = useCreateOrganizationForm({
	23	defaultName: suggestedName,
	24	// On success: the server set a new cookie with the new org; refetch /me
	25	// so AuthGate routes into Shell.
	26	// On failure: the server may have cleared the cookie because the current
	27	// session was too stale to attach the new org. Refetch /me regardless so
	28	// AuthGate can route to LoginPage if that's the case.
	29	onSuccess: () => refreshAuth(),
	30	onFailure: () => refreshAuth(),
	31	});
	32
	33	return (
	34	<div className="flex min-h-screen items-center justify-center bg-background px-4">
	35	<div className="mx-auto flex w-full max-w-sm flex-col gap-6">
	36	<div className="flex flex-col gap-2">
	37	<h1 className="font-serif text-3xl">Create your organization</h1>
	38	<p className="text-sm text-muted-foreground">
	39	Organizations group your sources, secrets, and teammates. You can invite others once
	40	it's set up.
	41	</p>
	42	</div>
	43
	44	<CreateOrganizationFields
	45	name={form.name}
	46	onNameChange={(name) => {
	47	form.setName(name);
	48	if (form.error) form.setError(null);
	49	}}
	50	error={form.error}
	51	onSubmit={() => void form.submit()}
	52	/>
	53
	54	<div className="flex items-center justify-between gap-3">
	55	{/* oxlint-disable-next-line react/forbid-elements */}
	56	<button
	57	type="button"
	58	className="text-xs text-muted-foreground hover:text-foreground"
	59	onClick={async () => {
	60	await fetch(AUTH_PATHS.logout, { method: "POST" });
	61	window.location.href = "/";
	62	}}
	63	>
	64	Sign out
	65	</button>
	66	<Button
	67	size="sm"
	68	onClick={() => void form.submit()}
	69	disabled={!form.canSubmit \|\| form.creating}
	70	>
	71	{form.creating ? "Creating…" : "Create organization"}
	72	</Button>
	73	</div>
	74	</div>
	75	</div>
	76	);
	77	};

apps/cloud/src/web/shell.tsx+29−73

   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "@executor/react/components/dropdown-menu";
-import { Input } from "@executor/react/components/input";
-import { Label } from "@executor/react/components/label";
 import { SourceFavicon } from "@executor/react/components/source-favicon";
 import { CommandPalette } from "@executor/react/components/command-palette";
 import { openApiSourcePlugin } from "@executor/plugin-openapi/react";
 import { googleDiscoverySourcePlugin } from "@executor/plugin-google-discovery/react";
 import { graphqlSourcePlugin } from "@executor/plugin-graphql/react";
 import { AUTH_PATHS } from "../auth/api";
+import { organizationsAtom, switchOrganization, useAuth } from "./auth";
 import {
-  createOrganization,
+  CreateOrganizationFields,
-  organizationsAtom,
+  useCreateOrganizationForm,
-  switchOrganization,
+} from "./components/create-organization-form";
-  useAuth,
-} from "./auth";
 const sourcePlugins = [
   openApiSourcePlugin,
 function UserFooter() {
   const auth = useAuth();
-  const doCreateOrganization = useAtomSet(createOrganization, { mode: "promiseExit" });
   const [createOrganizationOpen, setCreateOrganizationOpen] = useState(false);
-  const [organizationName, setOrganizationName] = useState("");
-  const [createOrganizationError, setCreateOrganizationError] = useState<string | null>(null);
-  const [creatingOrganization, setCreatingOrganization] = useState(false);
-  if (auth.status !== "authenticated") return null;
   const suggestedOrganizationName =
-    auth.user.name?.trim() !== "" && auth.user.name != null
+    auth.status === "authenticated" &&
+    auth.user.name?.trim() !== "" &&
+    auth.user.name != null
       ? `${auth.user.name}'s Organization`
       : "New Organization";
+  const form = useCreateOrganizationForm({
+    defaultName: suggestedOrganizationName,
+    onSuccess: () => window.location.reload(),
+  });
+  if (auth.status !== "authenticated") return null;
   const openCreateOrganization = () => {
-    setOrganizationName(suggestedOrganizationName);
+    form.reset(suggestedOrganizationName);
-    setCreateOrganizationError(null);
     setCreateOrganizationOpen(true);
   };
-  const handleCreateOrganization = async () => {
-    const name = organizationName.trim();
-    if (!name) {
-      setCreateOrganizationError("Organization name is required.");
-      return;
-    }
-    setCreatingOrganization(true);
-    setCreateOrganizationError(null);
-    const exit = await doCreateOrganization({ payload: { name } });
-    if (exit._tag === "Success") {
-      window.location.reload();
-    } else {
-      setCreateOrganizationError("Failed to create organization.");
-    }
-    setCreatingOrganization(false);
-  };
   return (
     <div className="shrink-0 border-t border-sidebar-border px-3 py-2.5">
       <Dialog
         open={createOrganizationOpen}
         onOpenChange={(open) => {
           setCreateOrganizationOpen(open);
-          if (!open) {
+          if (!open) form.reset(suggestedOrganizationName);
-            setOrganizationName(suggestedOrganizationName);
-            setCreateOrganizationError(null);
-            setCreatingOrganization(false);
-          }
         }}
       >
         <DropdownMenu>
             </DialogDescription>
           </DialogHeader>
-          <div className="grid gap-4 py-3">
+          <CreateOrganizationFields
-            <div className="grid gap-1.5">
+            name={form.name}
-              <Label
+            onNameChange={(name) => {
-                htmlFor="organization-name"
+              form.setName(name);
-                className="text-sm font-medium uppercase tracking-wider text-muted-foreground"
+              if (form.error) form.setError(null);
-              >
+            }}
-                Organization name
+            error={form.error}
-              </Label>
+            onSubmit={() => void form.submit()}
-              <Input
+          />
-                id="organization-name"
-                value={organizationName}
-                placeholder="Northwind Labs"
-                autoFocus
-                onChange={(event) => {
-                  setOrganizationName((event.target as HTMLInputElement).value);
-                  if (createOrganizationError) setCreateOrganizationError(null);
-                }}
-                onKeyDown={(event) => {
-                  if (event.key === "Enter") void handleCreateOrganization();
-                }}
-                className="h-9 text-sm"
-              />
-            </div>
-            {createOrganizationError && (
-              <div className="rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2">
-                <p className="text-sm text-destructive">{createOrganizationError}</p>
-              </div>
-            )}
-          </div>
           <DialogFooter>
             <DialogClose asChild>
-              <Button variant="ghost" size="sm" disabled={creatingOrganization}>
+              <Button variant="ghost" size="sm" disabled={form.creating}>
                 Cancel
               </Button>
             </DialogClose>
             <Button
               size="sm"
-              onClick={() => void handleCreateOrganization()}
+              onClick={() => void form.submit()}
-              disabled={!organizationName.trim() || creatingOrganization}
+              disabled={!form.canSubmit || form.creating}
             >
-              {creatingOrganization ? "Creating…" : "Create organization"}
+              {form.creating ? "Creating…" : "Create organization"}
             </Button>
           </DialogFooter>
         </DialogContent>