@vertesia/ui 1.6.0-dev.20261008.064737Z → 1.6.0-dev.20261014.015055Z

package/src/session/auth/vertesiaHosts.ts

@@ -1,54 +1,9 @@
 const LOOPBACK_IPV4 = /^127\.\d{1,3}\.\d{1,3}\.\d{1,3}$/;
 /** A single DNS label: alphanumeric, inner hyphens allowed. */
-export const LABEL = '[a-z0-9](?:[a-z0-9-]*[a-z0-9])?';
+const LABEL = '[a-z0-9](?:[a-z0-9-]*[a-z0-9])?';
 
 /** The region label is optional throughout, because each regional host has a global US alias. */
-export const REGION = `(?:${LABEL}\\.)?`;
-
-/**
- * Hostnames served by the UI backend — Vertesia's own code, not merely a Vertesia-owned name:
- *   `cloud.vertesia.io`, `cloud.us1.vertesia.io`                     — the Cloud UI
- *   `preprod.cloud.vertesia.io`, `preview.cloud.us1.vertesia.io`     — its preview/preprod tiers
- *   `acme.cloud.us1.vertesia.io`                                     — per-IdP-tenant branded hosts
- *   `dev-feat-x.ui.dev1.vertesia.io`                                 — dynamic per-branch dev envs
- *
- * Mirrors the load-balancer host rules (region-lb/main.tf: `cloud.${var.domain}`,
- * `*.cloud.${var.domain}`, `*.ui.${var.domain}`) rather than the DNS zone, so a name we merely own
- * is not trusted for what serves it.
- */
-export const FIRST_PARTY_HOST_PATTERNS: readonly RegExp[] = [
-    new RegExp(`^cloud\\.${REGION}vertesia\\.io$`),
-    new RegExp(`^${LABEL}\\.cloud\\.${REGION}vertesia\\.io$`),
-    new RegExp(`^${LABEL}\\.ui\\.${LABEL}\\.vertesia\\.io$`),
-];
-
-/**
- * Public app-gateway origins. Stable tiers use the `apps*` browser-facing host, while development
- * environments reach the gateway through its `*.api.*` Cloud Run route:
- *   `apps.us1.vertesia.io`, `apps-preview.us1.vertesia.io`
- *   `app-gateway-dev1.api.dev1.vertesia.io`, `app-gateway-us3.api.us3.vertesia.io`
- *
- * The second label is deliberately unconstrained. Branch environments do NOT each get a gateway —
- * they share their region's (`detectGatewayUrl` in packages/server-common/src/env/ServerEnv.ts:444
- * and `getAppgenServerBaseUrl` in packages/workflows/.../app_workspace/workspace-utils.ts), so the
- * host published to browsers is region-scoped, while the per-branch `app-gateway-dev-<branch>`
- * shape in the infrastructure README also exists. Matching `app-gateway-<anything>` covers both,
- * and every Cloud Run service named that way *is* a gateway (region-compute/main.tf:373).
- *
- * These serve every tenant's published application from one shared origin, and published assets
- * need no authentication — so this is generated, low-trust code sitting on a Vertesia-owned
- * hostname. Owning the domain is not the test; which backend serves the origin is.
- *
- * Two load-balancer variables can map further hostnames onto the same backend —
- * `appgen_host_aliases` and `appgen_preview_host_aliases` in
- * infrastructure/terraform/modules/region-lb/variables.tf. Both are empty in every region today; if
- * one is ever set, add the alias here too, or it silently falls through to the permissive branch of
- * Policy L and becomes an origin that may receive a token at any path.
- */
-export const GATEWAY_HOST_PATTERNS: readonly RegExp[] = [
-    new RegExp(`^apps(?:-preview|-preprod)?\\.${REGION}vertesia\\.io$`),
-    new RegExp(`^app-gateway-${LABEL}\\.api\\.${LABEL}\\.vertesia\\.io$`),
-];
+const REGION = `(?:${LABEL}\\.)?`;
 
 export function isLoopbackHostname(hostname: string): boolean {
     if (hostname === 'localhost' || hostname.endsWith('.localhost')) {

package/src/session/index.ts

@@ -8,7 +8,7 @@ export {
     redirectToCentralAuth,
 } from './auth/domainRouting';
 export * from './auth/firebase';
-export { isAppOAuthLoginPending, startAppOAuthLogin } from './auth/oauth';
+export { isAppOAuthLoginPending, revokeAppOAuthSession, startAppOAuthLogin } from './auth/oauth';
 export * from './auth/useAuthState';
 export * from './auth/useCurrentTenant';
 export * from './DevSessionProvider';

package/src/session/scopeSelection.ts

@@ -6,6 +6,7 @@
  * another tab's next token refresh. `localStorage` holds the last selection made in any tab, and
  * only seeds a tab that has no scope of its own yet (a new tab, or the app after a restart).
  */
+import { Env } from '@vertesia/ui/env';
 import { LastSelectedAccountId_KEY, LastSelectedProjectId_KEY } from './constants';
 
 const TabAccountId_KEY = 'composableai.tabAccountId';
@@ -52,6 +53,18 @@ export function readScopeSelection(accountId?: string): ScopeSelection {
     return { accountId: account, projectId: projectId || undefined };
 }
 
+export function resolveAuthSelection(currentUrl: URL): { accountId?: string; projectId?: string } {
+    // A URL selection owns the whole pair: never attach an unrelated configured account/project.
+    const hasUrlScope = currentUrl.searchParams.has('a') || currentUrl.searchParams.has('p');
+    const defaults = hasUrlScope ? undefined : Env.defaultAuthSelection;
+    const urlAccount = currentUrl.searchParams.get('a') ?? defaults?.accountId;
+    const urlProject = currentUrl.searchParams.get('p') ?? defaults?.projectId;
+    // A project alone identifies its account, so the stored selection only fills in a missing project.
+    const stored = urlProject === undefined ? readScopeSelection(urlAccount) : undefined;
+
+    return { accountId: urlAccount ?? stored?.accountId, projectId: urlProject ?? stored?.projectId };
+}
+
 /** Make this the tab's scope and the default for new tabs. */
 export function rememberScopeSelection(accountId: string, projectId?: string): void {
     sessionSet(TabAccountId_KEY, accountId);

package/src/shell/VertesiaShell.tsx

@@ -28,8 +28,13 @@ export interface VertesiaShellProps {
     suppressSignInErrorPrefixes?: string | string[];
     /** Use an already-issued Vertesia token instead of starting the normal sign-in flow. */
     authToken?: string;
-    /** Force a default language. If omitted, falls back to localStorage then navigator.language then 'en'. */
+    /** Language used only when there is neither a saved choice nor a browser language. */
     defaultLanguage?: SupportedLanguage;
+    /**
+     * Pin the language the shell renders in, whatever the saved choice or browser language.
+     * Embedded apps still receive the user's own language (`useLanguage().preferredLanguage`).
+     */
+    language?: SupportedLanguage;
 }
 export function VertesiaShell({
     children,
@@ -41,6 +46,7 @@ export function VertesiaShell({
     suppressSignInErrorPrefixes,
     authToken,
     defaultLanguage,
+    language,
     authScreens,
     branding,
 }: VertesiaShellProps) {
@@ -48,7 +54,7 @@ export function VertesiaShell({
     const brandedContent = (
         <TypeRegistryProvider>
             <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
-                <LanguageProvider defaultLanguage={defaultLanguage}>
+                <LanguageProvider defaultLanguage={defaultLanguage} language={language}>
                     <LanguageBoundI18nProvider>
                         <AppBrandingBoundary branding={branding}>
                             <IframeAppContextSync />

package/src/shell/login/InviteAcceptModal.tsx

@@ -2,7 +2,12 @@ import type { UserInviteToken } from '@vertesia/common';
 import { Button, Modal, ModalBody, ModalTitle } from '@vertesia/ui/core';
 import { useUITranslation } from '@vertesia/ui/i18n';
 import { useUserSession } from '@vertesia/ui/session';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+
+// Legacy invites have no account data and cannot be shown or accepted here.
+function withAccount(invites: UserInviteToken[]) {
+    return invites.filter((i) => i.data.account);
+}
 
 export function InviteAcceptModal() {
     const session = useUserSession();
@@ -10,95 +15,137 @@ export function InviteAcceptModal() {
     const { t } = useUITranslation();
     const [showModal, setShowModal] = useState(false);
     const [invites, setInvites] = useState<UserInviteToken[]>([]);
+    const [pendingId, setPendingId] = useState<string>();
+    const [error, setError] = useState<string>();
+    const [acceptedAccountIds, setAcceptedAccountIds] = useState<string[]>([]);
+    const isOpen = showModal && invites.length > 0;
+
+    const loadInvites = useCallback(async () => {
+        const valid = withAccount(await client.account.listInvites());
+        setInvites(valid);
+        return valid;
+    }, [client]);
 
     useEffect(() => {
-        client.account
-            .listInvites()
-            .then((invites) => {
-                if (invites.length > 0) {
-                    // Filter out legacy invites that do not have account data
-                    const notLegacyInvites = invites.filter((i) => i.data.account);
-                    if (notLegacyInvites.length === 0) {
-                        console.log('No valid invites found, closing modal');
-                        return;
-                    }
-                    // If we have valid invites, show the modal
-                    console.log('Found valid invites', notLegacyInvites.length);
+        loadInvites()
+            .then((valid) => {
+                if (valid.length > 0) {
+                    console.log('Found valid invites', valid.length);
                     setShowModal(true);
-                    setInvites(notLegacyInvites);
-                } else {
-                    console.log('No invites found, closing modal');
-                    setShowModal(false);
                 }
             })
             .catch((err) => {
                 console.error('Error fetching invites', err);
             });
-    }, [client.account.listInvites]);
+    }, [loadInvites]);
 
     const closeModal = () => setShowModal(false);
 
-    const accept = async (invite: UserInviteToken) => {
-        await client.account.acceptInvite(invite.id);
-        await session.authCallback;
-        await session.fetchAccounts();
-        await session.fetchProjects(invite.data.account.id);
-        const remainingInvites = invites.filter((i) => i.id !== invite.id);
+    // Refreshing the session re-renders the app around the modal, so it waits until the modal has closed and
+    // then picks up every accepted invite at once.
+    useEffect(() => {
+        if (isOpen || acceptedAccountIds.length === 0) return;
+        setAcceptedAccountIds([]);
+        void (async () => {
+            try {
+                // The current token predates the new memberships and does not list the new accounts, so the
+                // server rejects reads of them until a fresh token is minted.
+                await session.refreshAuthToken();
+                await session.fetchAccounts();
+            } catch (err) {
+                console.error('Failed to refresh the session after accepting invites', err);
+                return;
+            }
+            // Each account loads on its own, so one failure does not hide the others.
+            for (const accountId of new Set(acceptedAccountIds)) {
+                await session.fetchProjects(accountId).catch((err) => {
+                    console.error('Failed to load projects for an accepted invite', err);
+                });
+            }
+        })();
+    }, [isOpen, acceptedAccountIds, session]);
 
-        const notLegacyInvites = remainingInvites.filter((i) => i.data.account);
-        if (notLegacyInvites.length > 0) {
-            setInvites(notLegacyInvites);
-        } else {
-            closeModal();
-        }
+    const removeInvite = (inviteId: string) => setInvites((current) => current.filter((i) => i.id !== inviteId));
+
+    // An accept or reject can fail because the invite was already used, e.g. from another tab: show the server's list.
+    const recoverFromFailure = async (action: string, err: unknown) => {
+        console.error(`Failed to ${action} invite`, err);
+        setError(t('login.inviteActionFailed'));
+        return loadInvites().catch((reloadErr) => {
+            console.error('Error fetching invites', reloadErr);
+            return undefined;
+        });
     };
 
-    const reject = async (invite: UserInviteToken) => {
-        await client.account.rejectInvite(invite.id);
-        const remainingInvites = invites.filter((i) => i.id !== invite.id);
-        setInvites(remainingInvites);
-        if (remainingInvites.length === 0) {
-            closeModal();
+    const accept = async (invite: UserInviteToken) => {
+        setPendingId(invite.id);
+        setError(undefined);
+        try {
+            await client.account.acceptInvite(invite.id);
+            removeInvite(invite.id);
+            setAcceptedAccountIds((current) => [...current, invite.data.account.id]);
+        } catch (err) {
+            const remaining = await recoverFromFailure('accept', err);
+            // A gone invite was most likely accepted after all (e.g. the response was lost), so its account
+            // still needs loading. If it was rejected elsewhere instead, that load fails harmlessly.
+            if (remaining && !remaining.some((i) => i.id === invite.id)) {
+                setAcceptedAccountIds((current) => [...current, invite.data.account.id]);
+            }
+        } finally {
+            setPendingId(undefined);
         }
     };
 
-    const inviteList = invites.map((invite) => {
-        if (!invite.data.account) {
-            console.warn('Invite has no account data', invite);
-            return null; // Skip rendering this invite
+    const reject = async (invite: UserInviteToken) => {
+        setPendingId(invite.id);
+        setError(undefined);
+        try {
+            await client.account.rejectInvite(invite.id);
+            removeInvite(invite.id);
+        } catch (err) {
+            await recoverFromFailure('reject', err);
+        } finally {
+            setPendingId(undefined);
         }
+    };
 
-        return (
-            <div key={invite.id} className="flex flex-row w-full justify-between border rounded-sm px-2 py-2 ">
-                <div className="flex flex-col">
-                    <div className="w-full font-semibold">{invite.data.account.name ?? invite.data.account}</div>
-                    {invite.data.project && <div className="w-full text-base">- {invite.data.project.name}</div>}
-                    <div className="text-xs">Role: {invite.data.role}</div>
-                    {invite.data.invited_by && (
-                        <div className="text-xs">by {invite.data.invited_by.name ?? invite.data.invited_by}</div>
-                    )}
-                </div>
-                <div className="flex flex-col gap-4">
-                    <Button size={'xs'} onClick={() => accept(invite)}>
-                        {t('login.accept')}
-                    </Button>{' '}
-                    <Button size={'xs'} variant="secondary" onClick={() => reject(invite)}>
-                        {t('login.reject')}
-                    </Button>
-                </div>
+    const inviteList = invites.map((invite) => (
+        <div key={invite.id} className="flex flex-row w-full justify-between border rounded-sm px-2 py-2 ">
+            <div className="flex flex-col">
+                <div className="w-full font-semibold">{invite.data.account.name}</div>
+                {invite.data.project && <div className="w-full text-base">- {invite.data.project.name}</div>}
+                <div className="text-xs">{t('login.inviteRole', { role: invite.data.role })}</div>
+                {invite.data.invited_by && (
+                    <div className="text-xs">{t('login.invitedBy', { name: invite.data.invited_by.name })}</div>
+                )}
             </div>
-        );
-    });
+            <div className="flex flex-col gap-4">
+                <Button
+                    size={'xs'}
+                    isDisabled={!!pendingId}
+                    isLoading={pendingId === invite.id}
+                    onClick={() => void accept(invite)}
+                >
+                    {t('login.accept')}
+                </Button>{' '}
+                <Button size={'xs'} variant="secondary" isDisabled={!!pendingId} onClick={() => void reject(invite)}>
+                    {t('login.reject')}
+                </Button>
+            </div>
+        </div>
+    ));
 
     return (
         <div>
-            <Modal isOpen={showModal} onClose={closeModal}>
+            <Modal isOpen={isOpen} onClose={closeModal}>
                 <ModalTitle>{t('login.reviewInvites')}</ModalTitle>
                 <ModalBody>
-                    <div className="text-sm pb-4">
-                        You have received the following invites to join other accounts. Please review and accept or
-                        declined them.
-                    </div>
+                    <div className="text-sm pb-4">{t('login.invitesIntro')}</div>
+                    {error && (
+                        <div role="alert" className="text-sm text-destructive pb-4">
+                            {error}
+                        </div>
+                    )}
                     {inviteList}
                 </ModalBody>
             </Modal>