orcheo-studio 0.22.2 → 0.23.1

package/src/features/account/pages/workspace-members.tsx

@@ -22,35 +22,41 @@ import { getAuthenticatedUserProfile } from "@features/auth/lib/auth-session";
 import {
   getActiveWorkspace,
   listWorkspaceMembers,
-  addWorkspaceMember,
+  listWorkspaceInvitations,
+  createWorkspaceInvitation,
+  revokeWorkspaceInvitation,
   updateWorkspaceMemberRole,
   removeWorkspaceMember,
   type WorkspaceMember,
+  type WorkspaceInvitation,
 } from "@/lib/api";
 import { getSelectedWorkspaceSlug } from "@/lib/workspace-session";
 
 type MemberRole = "owner" | "admin" | "editor" | "viewer";
 
 const ROLE_OPTIONS: MemberRole[] = ["owner", "admin", "editor", "viewer"];
-const USER_ID_PATTERN = /^[A-Za-z0-9._:@+-]{3,128}$/;
-const USER_ID_VALIDATION_MESSAGE =
-  "Enter a valid user ID using letters, numbers, dots, underscores, colons, at signs, plus signs, or hyphens.";
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const EMAIL_VALIDATION_MESSAGE = "Enter a valid email address.";
 
-const isValidUserId = (userId: string): boolean =>
-  USER_ID_PATTERN.test(userId.trim());
+const isValidEmail = (email: string): boolean =>
+  EMAIL_PATTERN.test(email.trim());
 
 export default function WorkspaceMembers() {
   const [members, setMembers] = useState<WorkspaceMember[]>([]);
+  const [invitations, setInvitations] = useState<WorkspaceInvitation[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [canManage, setCanManage] = useState(false);
   const [isForbidden, setIsForbidden] = useState(false);
 
-  const [newUserId, setNewUserId] = useState("");
-  const [newUserIdError, setNewUserIdError] = useState<string | null>(null);
+  const [newEmail, setNewEmail] = useState("");
+  const [newEmailError, setNewEmailError] = useState<string | null>(null);
   const [newRole, setNewRole] = useState<MemberRole>("editor");
   const [isAdding, setIsAdding] = useState(false);
   const [removingUserId, setRemovingUserId] = useState<string | null>(null);
   const [updatingUserId, setUpdatingUserId] = useState<string | null>(null);
+  const [revokingInvitationId, setRevokingInvitationId] = useState<
+    string | null
+  >(null);
 
   const slug = getSelectedWorkspaceSlug();
   const currentUserId = getAuthenticatedUserProfile()?.subject ?? null;
@@ -76,11 +82,15 @@ export default function WorkspaceMembers() {
           setIsForbidden(true);
           return;
         }
-        const memberList = await listWorkspaceMembers(slug);
+        const [memberList, invitationList] = await Promise.all([
+          listWorkspaceMembers(slug),
+          listWorkspaceInvitations(slug),
+        ]);
         if (!active) {
           return;
         }
         setMembers(memberList);
+        setInvitations(invitationList);
       } catch {
         if (active) {
           toast({
@@ -102,29 +112,32 @@ export default function WorkspaceMembers() {
     };
   }, [slug]);
 
-  const handleAddMember = async () => {
-    const normalizedUserId = newUserId.trim();
-    if (!slug || !normalizedUserId) {
+  const handleInvite = async () => {
+    const normalizedEmail = newEmail.trim();
+    if (!slug || !normalizedEmail) {
       return;
     }
-    if (!isValidUserId(normalizedUserId)) {
-      setNewUserIdError(USER_ID_VALIDATION_MESSAGE);
+    if (!isValidEmail(normalizedEmail)) {
+      setNewEmailError(EMAIL_VALIDATION_MESSAGE);
       return;
     }
     setIsAdding(true);
     try {
-      const member = await addWorkspaceMember(slug, {
-        user_id: normalizedUserId,
+      const invitation = await createWorkspaceInvitation(slug, {
+        email: normalizedEmail,
         role: newRole,
       });
-      setMembers((prev) => [...prev, member]);
-      setNewUserId("");
-      setNewUserIdError(null);
+      setInvitations((prev) => [invitation, ...prev]);
+      setNewEmail("");
+      setNewEmailError(null);
       setNewRole("editor");
-      toast({ title: "Member added successfully" });
+      toast({
+        title: "Invitation sent",
+        description: `An invite was emailed to ${invitation.email}.`,
+      });
     } catch (err) {
       toast({
-        title: "Failed to add member",
+        title: "Failed to send invitation",
         description: err instanceof Error ? err.message : undefined,
         variant: "destructive",
       });
@@ -133,6 +146,28 @@ export default function WorkspaceMembers() {
     }
   };
 
+  const handleRevokeInvitation = async (invitationId: string) => {
+    if (!slug) {
+      return;
+    }
+    setRevokingInvitationId(invitationId);
+    try {
+      const revoked = await revokeWorkspaceInvitation(slug, invitationId);
+      setInvitations((prev) =>
+        prev.map((i) => (i.id === invitationId ? revoked : i)),
+      );
+      toast({ title: "Invitation revoked" });
+    } catch (err) {
+      toast({
+        title: "Failed to revoke invitation",
+        description: err instanceof Error ? err.message : undefined,
+        variant: "destructive",
+      });
+    } finally {
+      setRevokingInvitationId(null);
+    }
+  };
+
   const handleRoleChange = async (userId: string, role: MemberRole) => {
     if (!slug) {
       return;
@@ -186,27 +221,30 @@ export default function WorkspaceMembers() {
 
       {canManage && (
         <div className="rounded-lg border p-4">
-          <h3 className="mb-4 text-lg font-medium">Add Member</h3>
+          <h3 className="mb-1 text-lg font-medium">Invite Member</h3>
+          <p className="mb-4 text-sm text-muted-foreground">
+            We&apos;ll email an invitation link. The member joins once they
+            accept while signed in with a verified email that matches.
+          </p>
           <div className="flex items-end gap-3">
             <div className="flex-1 space-y-1.5">
-              <Label htmlFor="new-user-id">User ID</Label>
+              <Label htmlFor="new-email">Email</Label>
               <Input
-                id="new-user-id"
-                placeholder="Enter user ID"
-                value={newUserId}
+                id="new-email"
+                type="email"
+                placeholder="person@example.com"
+                value={newEmail}
                 onChange={(e) => {
-                  setNewUserId(e.target.value);
-                  setNewUserIdError(null);
+                  setNewEmail(e.target.value);
+                  setNewEmailError(null);
                 }}
                 disabled={isAdding}
-                aria-invalid={newUserIdError ? true : undefined}
-                aria-describedby={
-                  newUserIdError ? "new-user-id-error" : undefined
-                }
+                aria-invalid={newEmailError ? true : undefined}
+                aria-describedby={newEmailError ? "new-email-error" : undefined}
               />
-              {newUserIdError && (
-                <p id="new-user-id-error" className="text-xs text-destructive">
-                  {newUserIdError}
+              {newEmailError && (
+                <p id="new-email-error" className="text-xs text-destructive">
+                  {newEmailError}
                 </p>
               )}
             </div>
@@ -234,16 +272,80 @@ export default function WorkspaceMembers() {
                 Action
               </Label>
               <Button
-                onClick={() => void handleAddMember()}
-                disabled={isAdding || !newUserId.trim()}
+                onClick={() => void handleInvite()}
+                disabled={isAdding || !newEmail.trim()}
               >
-                {isAdding ? "Adding..." : "Add"}
+                {isAdding ? "Sending..." : "Send invite"}
               </Button>
             </div>
           </div>
         </div>
       )}
 
+      {canManage &&
+        invitations.some((i) => i.status === "pending") && (
+          <div className="rounded-lg border">
+            <div className="border-b px-4 py-3">
+              <h3 className="text-sm font-medium">Pending Invitations</h3>
+            </div>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Email</TableHead>
+                  <TableHead>Role</TableHead>
+                  <TableHead>Expires</TableHead>
+                  <TableHead className="text-right">Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {invitations
+                  .filter((i) => i.status === "pending")
+                  .map((invitation) => {
+                    const isRevoking =
+                      revokingInvitationId === invitation.id;
+                    const isExpired =
+                      new Date(invitation.expires_at) < new Date();
+                    return (
+                      <TableRow
+                        key={invitation.id}
+                        className={isExpired ? "opacity-60" : undefined}
+                      >
+                        <TableCell className="text-sm">
+                          {invitation.email}
+                        </TableCell>
+                        <TableCell className="capitalize">
+                          {invitation.role}
+                        </TableCell>
+                        <TableCell className="text-sm text-muted-foreground">
+                          {isExpired ? (
+                            <span className="text-destructive">Expired</span>
+                          ) : (
+                            new Date(
+                              invitation.expires_at,
+                            ).toLocaleDateString()
+                          )}
+                        </TableCell>
+                        <TableCell className="text-right">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="text-destructive hover:text-destructive"
+                            onClick={() =>
+                              void handleRevokeInvitation(invitation.id)
+                            }
+                            disabled={isRevoking}
+                          >
+                            {isRevoking ? "Revoking..." : "Revoke"}
+                          </Button>
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+              </TableBody>
+            </Table>
+          </div>
+        )}
+
       {isForbidden ? null : isLoading ? (
         <p className="text-sm text-muted-foreground">Loading members...</p>
       ) : members.length === 0 ? (
@@ -254,7 +356,7 @@ export default function WorkspaceMembers() {
             <TableHeader>
               <TableRow>
                 <TableHead>Name</TableHead>
-                <TableHead>User ID</TableHead>
+                <TableHead>Email / ID</TableHead>
                 <TableHead>Role</TableHead>
                 <TableHead>Joined</TableHead>
                 {canManage && (
@@ -271,10 +373,19 @@ export default function WorkspaceMembers() {
                 return (
                   <TableRow key={member.id}>
                     <TableCell className="text-sm">
-                      {member.user_name ?? "—"}
+                      {member.user_name ?? member.email ?? "—"}
                     </TableCell>
-                    <TableCell className="font-mono text-sm">
-                      {member.user_id}
+                    <TableCell className="text-sm">
+                      {member.email ? (
+                        <div className="flex flex-col">
+                          <span>{member.email}</span>
+                          <span className="font-mono text-xs text-muted-foreground">
+                            {member.user_id}
+                          </span>
+                        </div>
+                      ) : (
+                        <span className="font-mono">{member.user_id}</span>
+                      )}
                     </TableCell>
                     <TableCell>
                       {canManage && !isSelf ? (

package/src/features/auth/components/require-auth.tsx

@@ -1,29 +1,24 @@
 import { useEffect, useState } from "react";
-import { Outlet, useLocation } from "react-router-dom";
+import { Navigate, Outlet, useLocation } from "react-router-dom";
 import { Loader2 } from "lucide-react";
 import {
   isAuthenticated,
   getAuthTokens,
 } from "@features/auth/lib/auth-session";
-import { tryRefreshTokens } from "@features/auth/lib/oidc-client";
-import AutoLogin from "@features/auth/components/auto-login";
-
-const isValidHttpUrl = (value: unknown): boolean => {
-  if (!value || typeof value !== "string") return false;
-  try {
-    const url = new URL(value.trim());
-    return url.protocol === "https:" || url.protocol === "http:";
-  } catch {
-    return false;
-  }
-};
-
-const authEnabled = isValidHttpUrl(import.meta.env.VITE_ORCHEO_AUTH_ISSUER);
+import { refreshSession } from "@features/auth/lib/auth-api";
 
 type AuthState = "authenticated" | "refreshing" | "unauthenticated";
 
+// Self-host/dev deployments that run the backend with auth disabled opt out of
+// the login gate via VITE_ORCHEO_AUTH_DISABLED=true. Hosted deployments leave
+// it unset so first-party login is required.
+const authDisabled = (): boolean =>
+  String(import.meta.env?.VITE_ORCHEO_AUTH_DISABLED ?? "")
+    .trim()
+    .toLowerCase() === "true";
+
 const resolveInitialAuthState = (): AuthState => {
-  if (!authEnabled || isAuthenticated()) return "authenticated";
+  if (authDisabled() || isAuthenticated()) return "authenticated";
   if (getAuthTokens()?.refreshToken) return "refreshing";
   return "unauthenticated";
 };
@@ -37,7 +32,7 @@ export default function RequireAuth() {
 
   useEffect(() => {
     if (authState !== "refreshing") return;
-    tryRefreshTokens().then((refreshed) => {
+    void refreshSession().then((refreshed) => {
       setAuthState(refreshed ? "authenticated" : "unauthenticated");
     });
   }, [authState]);
@@ -52,5 +47,5 @@ export default function RequireAuth() {
     );
   }
 
-  return <AutoLogin redirectTo={redirectTo} />;
+  return <Navigate to="/login" replace state={{ from: redirectTo }} />;
 }

package/src/features/auth/lib/auth-api.ts

@@ -0,0 +1,196 @@
+import { buildBackendHttpUrl } from "@/lib/config";
+import {
+  clearAuthSession,
+  getAuthTokens,
+  setAuthTokens,
+} from "@features/auth/lib/auth-session";
+
+export interface AuthUserProfile {
+  id: string;
+  email: string;
+  email_verified: boolean;
+  name: string | null;
+}
+
+interface SessionPayload {
+  access_token: string;
+  refresh_token: string;
+  expires_in: number;
+  user?: AuthUserProfile;
+}
+
+interface TokenPayload {
+  access_token: string;
+  refresh_token: string;
+  expires_in: number;
+}
+
+const authUrl = (path: string): string =>
+  buildBackendHttpUrl(`/api/auth${path}`);
+
+const persistTokens = (payload: TokenPayload): void => {
+  setAuthTokens({
+    accessToken: payload.access_token,
+    refreshToken: payload.refresh_token,
+    expiresAt:
+      typeof payload.expires_in === "number"
+        ? Date.now() + payload.expires_in * 1000
+        : undefined,
+  });
+};
+
+const readErrorMessage = async (
+  response: Response,
+  fallback: string,
+): Promise<string> => {
+  try {
+    const body = (await response.json()) as { detail?: unknown };
+    const detail = body.detail;
+    if (typeof detail === "string") {
+      return detail;
+    }
+    if (detail && typeof detail === "object" && "message" in detail) {
+      const message = (detail as { message?: unknown }).message;
+      if (typeof message === "string" && message.trim()) {
+        return message;
+      }
+    }
+  } catch {
+    // fall through to the fallback message
+  }
+  return fallback;
+};
+
+/**
+ * Request a passwordless challenge for an email. The backend responds
+ * identically whether or not the account exists, so a resolved promise only
+ * means the request was accepted — never that an email was definitely sent.
+ */
+export const startEmailChallenge = async (
+  email: string,
+  intent: "login" | "signup" = "login",
+  redirectTo?: string,
+): Promise<void> => {
+  const response = await fetch(authUrl("/email/start"), {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      email,
+      intent,
+      ...(redirectTo ? { redirect_to: redirectTo } : {}),
+    }),
+  });
+  if (response.status === 429) {
+    throw new Error("Too many attempts. Please wait a moment and try again.");
+  }
+  if (!response.ok) {
+    throw new Error(
+      await readErrorMessage(response, "Unable to send the sign-in email."),
+    );
+  }
+};
+
+const verify = async (
+  body: Record<string, string>,
+): Promise<AuthUserProfile | undefined> => {
+  const response = await fetch(authUrl("/email/verify"), {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(body),
+  });
+  if (!response.ok) {
+    throw new Error(
+      await readErrorMessage(
+        response,
+        "This sign-in link or code is invalid or has expired.",
+      ),
+    );
+  }
+  const payload = (await response.json()) as SessionPayload;
+  persistTokens(payload);
+  return payload.user;
+};
+
+/** Verify a magic-link token and start an authenticated session. */
+export const verifyEmailToken = (
+  token: string,
+): Promise<AuthUserProfile | undefined> => verify({ token });
+
+/** Verify an OTP code for an email and start an authenticated session. */
+export const verifyEmailCode = (
+  email: string,
+  code: string,
+): Promise<AuthUserProfile | undefined> => verify({ email, code });
+
+/**
+ * Rotate the stored refresh token into a fresh access token. Returns true on
+ * success; clears the local session and returns false when the refresh token
+ * is missing, invalid, or revoked.
+ */
+export const refreshSession = async (): Promise<boolean> => {
+  const tokens = getAuthTokens();
+  if (!tokens?.refreshToken) {
+    return false;
+  }
+  let response: Response;
+  try {
+    response = await fetch(authUrl("/refresh"), {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ refresh_token: tokens.refreshToken }),
+    });
+  } catch {
+    return false;
+  }
+  if (!response.ok) {
+    clearAuthSession();
+    return false;
+  }
+  try {
+    persistTokens((await response.json()) as TokenPayload);
+  } catch {
+    clearAuthSession();
+    return false;
+  }
+  return true;
+};
+
+/**
+ * Revoke the server-side session (log out everywhere) and clear local tokens.
+ * Always clears the local session, even if the network call fails.
+ */
+export const logoutSession = async (): Promise<void> => {
+  let tokens = getAuthTokens();
+  const isExpired =
+    typeof tokens?.expiresAt === "number" && Date.now() >= tokens.expiresAt;
+
+  try {
+    if (isExpired && tokens?.refreshToken && (await refreshSession())) {
+      tokens = getAuthTokens();
+    }
+
+    if (tokens?.accessToken) {
+      const response = await fetch(authUrl("/logout"), {
+        method: "POST",
+        headers: { Authorization: `Bearer ${tokens.accessToken}` },
+      });
+      if (
+        response.status === 401 &&
+        tokens.refreshToken &&
+        (await refreshSession())
+      ) {
+        tokens = getAuthTokens();
+        if (tokens?.accessToken) {
+          await fetch(authUrl("/logout"), {
+            method: "POST",
+            headers: { Authorization: `Bearer ${tokens.accessToken}` },
+          });
+        }
+      }
+    }
+  } catch {
+    // Best effort — the local session is cleared regardless.
+  } finally {
+    clearAuthSession();
+  }
+};

package/src/features/auth/lib/auth-session.ts

@@ -234,7 +234,6 @@ export const getAccessToken = (): string | null => {
     return null;
   }
   if (!isTokenFresh(tokens)) {
-    clearAuthSession();
     return null;
   }
   return tokens.accessToken;