@vertesia/ui 1.5.0-dev.20260804.124748Z → 1.5.0-dev.20260807.073259Z

package/src/session/auth/composable.ts

@@ -1,7 +1,12 @@
 /**
  * Handle client caching and refresh of auth token
  */
-import { type AuthTokenPayload, RESTRICTED_ENVIRONMENT_ERROR_CODE } from '@vertesia/common';
+import {
+    type AuthTokenPayload,
+    NO_ACCESSIBLE_ACCOUNT_ERROR_CODE,
+    REQUESTED_SCOPE_UNAVAILABLE_ERROR_CODE,
+    RESTRICTED_ENVIRONMENT_ERROR_CODE,
+} from '@vertesia/common';
 import { Env } from '@vertesia/ui/env';
 import { jwtDecode } from 'jwt-decode';
 import { LastSelectedAccountId_KEY, LastSelectedProjectId_KEY } from '../constants';
@@ -10,6 +15,27 @@ import { getFirebaseAuth, getFirebaseAuthToken } from './firebase';
 let AUTH_TOKEN_RAW: string | undefined;
 let AUTH_TOKEN: AuthTokenPayload | undefined;
 
+function clearRejectedPersistedScope(accountId?: string, projectId?: string) {
+    if (!accountId) return;
+
+    const projectKey = `${LastSelectedProjectId_KEY}-${accountId}`;
+    if (projectId) {
+        const persistedProjectMatches = localStorage.getItem(projectKey) === projectId;
+        if (persistedProjectMatches) {
+            localStorage.removeItem(projectKey);
+        }
+        if (persistedProjectMatches && localStorage.getItem(LastSelectedAccountId_KEY) === accountId) {
+            localStorage.removeItem(LastSelectedAccountId_KEY);
+        }
+        return;
+    }
+
+    if (localStorage.getItem(LastSelectedAccountId_KEY) === accountId) {
+        localStorage.removeItem(LastSelectedAccountId_KEY);
+        localStorage.removeItem(projectKey);
+    }
+}
+
 interface ComposableTokenResponse {
     rawToken: string;
     token: AuthTokenPayload;
@@ -17,6 +43,35 @@ interface ComposableTokenResponse {
     message?: string;
 }
 
+export interface AuthenticatedIdentity {
+    email: string;
+    name?: string;
+}
+
+function identityFromAcceptedToken(token: string): AuthenticatedIdentity | undefined {
+    try {
+        const payload = jwtDecode<{ email?: unknown; name?: unknown }>(token);
+        if (typeof payload.email !== 'string' || !payload.email) return undefined;
+        return {
+            email: payload.email,
+            name: typeof payload.name === 'string' && payload.name ? payload.name : undefined,
+        };
+    } catch {
+        return undefined;
+    }
+}
+
+export function resolveAuthSelection(currentUrl: URL): { accountId?: string; projectId?: string } {
+    const urlAccount = currentUrl.searchParams.get('a') ?? undefined;
+    const urlProject = currentUrl.searchParams.get('p') ?? undefined;
+    const accountId =
+        urlAccount ??
+        (urlProject === undefined ? (localStorage.getItem(LastSelectedAccountId_KEY) ?? undefined) : undefined);
+    const projectId = urlProject ?? localStorage.getItem(`${LastSelectedProjectId_KEY}-${accountId}`) ?? undefined;
+
+    return { accountId, projectId };
+}
+
 function normalizeIssuer(value: string | undefined): string | undefined {
     return value?.replace(/\/+$/, '');
 }
@@ -114,7 +169,9 @@ export async function fetchComposableToken(
                     error: error,
                 },
             });
-            throw new STSError('Failed to call STS endpoint', stsEndpoint);
+            throw new AuthenticationServiceError('The authentication service could not be reached', stsEndpoint, {
+                cause: error,
+            });
         });
 
         if (idToken && stsRes?.status === 404) {
@@ -211,15 +268,20 @@ export async function fetchComposableToken(
             throw new UserNotFoundError('User not found', idTokenDecoded.email);
         }
 
+        if (stsRes.status === 401) {
+            Env.logger.warn('STS rejected the identity credential', {
+                vertesia: { account_id: accountId, project_id: projectId, status: stsRes.status },
+            });
+            throw new CredentialError('Your sign-in credentials could not be verified', stsEndpoint, {
+                status: stsRes.status,
+            });
+        }
+
         if (stsRes.status === 403) {
-            // Distinguish the "restricted environment" rejection (preview/preprod gated to
-            // early-access users) from the account-access 403 handled below. The STS tags it
-            // with a machine-readable business error code. Peek a clone so the body stays
-            // readable for the fall-through path.
-            const body = await stsRes
-                .clone()
-                .json()
-                .catch(() => undefined);
+            const body = (await stsRes.json().catch(() => undefined)) as
+                | { errorCode?: string; message?: string }
+                | undefined;
+            const identity = identityFromAcceptedToken(idToken);
             if (body?.errorCode === RESTRICTED_ENVIRONMENT_ERROR_CODE) {
                 Env.logger.warn('403: User lacks early-access for this restricted environment', {
                     vertesia: {
@@ -232,44 +294,46 @@ export async function fetchComposableToken(
                 );
             }
 
-            // User doesn't have access to the requested account/project, or has no accounts
-            // This can happen with:
-            // 1. Stale localStorage from previous user
-            // 2. User invited to a new account (doesn't have access yet)
-            // 3. User exists but has no accounts at all
+            if (body?.errorCode === NO_ACCESSIBLE_ACCOUNT_ERROR_CODE) {
+                Env.logger.warn('STS identity has no accessible account', {
+                    vertesia: { error_code: body.errorCode, status: stsRes.status },
+                });
+                throw new NoAccessibleAccountError(stsEndpoint, body.message, identity);
+            }
 
-            if (retryCount > 0) {
-                // Already retried without account scope - this is a real authorization failure
-                console.error('403: Access denied even without account scope - user may have no accounts');
-                Env.logger.error('403: Access denied after retry - authorization failure', {
+            // During rolling deployment an older STS may return an uncoded user-token 403.
+            // Treat it as a requested-scope rejection; all calls in this function issue user tokens.
+            if (!body?.errorCode || body.errorCode === REQUESTED_SCOPE_UNAVAILABLE_ERROR_CODE) {
+                Env.logger.warn('STS rejected the requested account or project', {
                     vertesia: {
                         account_id: accountId,
                         project_id: projectId,
                         status: stsRes.status,
-                        retry_count: retryCount,
+                        error_code: body?.errorCode ?? REQUESTED_SCOPE_UNAVAILABLE_ERROR_CODE,
                     },
                 });
-                throw new Error('Access denied - user may not have access to any accounts');
+                throw new RequestedScopeUnavailableError(
+                    stsEndpoint,
+                    accountId,
+                    projectId,
+                    body?.errorCode ? body.message : undefined,
+                    identity,
+                );
             }
 
-            console.log('403: Access denied - clearing cached account and retrying without account scope');
-            Env.logger.warn('403: Access denied - clearing cached account and retrying', {
+            Env.logger.error('STS returned an unrecognized forbidden response', {
                 vertesia: {
                     account_id: accountId,
                     project_id: projectId,
                     status: stsRes.status,
-                    retry_count: retryCount,
+                    error_code: body.errorCode,
                 },
             });
-
-            // Clear any stale account/project from localStorage
-            localStorage.removeItem(LastSelectedAccountId_KEY);
-            if (accountId) {
-                localStorage.removeItem(`${LastSelectedProjectId_KEY}-${accountId}`);
-            }
-
-            // Retry without account/project scope - let user log in to their default account
-            return fetchComposableToken(getIdToken, undefined, undefined, ttl, retryCount + 1);
+            throw new AuthenticationServiceError('The authentication service rejected the request', stsEndpoint, {
+                status: stsRes.status,
+                errorCode: body.errorCode,
+                cause: body,
+            });
         }
 
         if (!stsRes.ok) {
@@ -283,7 +347,10 @@ export async function fetchComposableToken(
                     project_id: projectId,
                 },
             });
-            throw new Error(`Failed to get token from STS: ${stsRes.status}`);
+            throw new AuthenticationServiceError('The authentication service could not complete sign-in', stsEndpoint, {
+                status: stsRes.status,
+                cause: errorText,
+            });
         }
 
         const { token } = await stsRes.json();
@@ -300,11 +367,7 @@ export async function fetchComposableToken(
             throw error;
         }
 
-        // Clear any stale account/project from localStorage on error
-        localStorage.removeItem(LastSelectedAccountId_KEY);
-        if (accountId) {
-            localStorage.removeItem(`${LastSelectedProjectId_KEY}-${accountId}`);
-        }
+        if (error instanceof Error && error.message === 'Customer-domain user requires an invite to join') throw error;
         console.error('Failed to get composable token from STS', error);
         Env.logger.error('Failed to get composable token from STS', {
             vertesia: {
@@ -313,7 +376,9 @@ export async function fetchComposableToken(
                 error: error,
             },
         });
-        throw new Error('Failed to get composable token', { cause: error });
+        throw new AuthenticationServiceError('The authentication service could not complete sign-in', stsEndpoint, {
+            cause: error,
+        });
     }
 }
 
@@ -354,14 +419,26 @@ export async function getComposableToken(
     forceRefresh = false,
     useInternalAuth = false,
 ): Promise<ComposableTokenResponse> {
-    const selectedAccount = accountId ?? localStorage.getItem(LastSelectedAccountId_KEY) ?? undefined;
+    const selectedAccount =
+        accountId ??
+        (projectId === undefined ? (localStorage.getItem(LastSelectedAccountId_KEY) ?? undefined) : undefined);
     const selectedProject =
         projectId ?? localStorage.getItem(`${LastSelectedProjectId_KEY}-${selectedAccount}`) ?? undefined;
     const devAuthToken = Env.isLocalDev ? Env.devAuthToken : undefined;
     const suppliedToken = devAuthToken ?? initToken ?? AUTH_TOKEN_RAW;
 
-    //token is still valid for more than 5 minutes
-    if (!forceRefresh && AUTH_TOKEN_RAW && AUTH_TOKEN && AUTH_TOKEN.exp > Date.now() / 1000 + 300) {
+    const cachedTokenMatchesScope =
+        (!selectedAccount || AUTH_TOKEN?.account?.id === selectedAccount) &&
+        (!selectedProject || AUTH_TOKEN?.project?.id === selectedProject);
+
+    // Token is still valid for more than 5 minutes and belongs to the requested scope.
+    if (
+        !forceRefresh &&
+        AUTH_TOKEN_RAW &&
+        AUTH_TOKEN &&
+        cachedTokenMatchesScope &&
+        AUTH_TOKEN.exp > Date.now() / 1000 + 300
+    ) {
         return { rawToken: AUTH_TOKEN_RAW, token: AUTH_TOKEN, error: false };
     }
 
@@ -378,19 +455,34 @@ export async function getComposableToken(
         return { rawToken: AUTH_TOKEN_RAW, token: AUTH_TOKEN, error: false };
     }
 
-    //token is close to expire, refresh it
-    if (!devAuthToken && !useInternalAuth && getFirebaseAuth().currentUser) {
-        //we have a firebase user, get the token from there
-        AUTH_TOKEN_RAW = await fetchComposableTokenFromFirebaseToken(selectedAccount, selectedProject);
-    } else if (!devAuthToken && (initToken || AUTH_TOKEN_RAW)) {
-        // we have a token already and no firebase user, refresh it
-        AUTH_TOKEN_RAW = await fetchComposableToken(
-            () => Promise.resolve(initToken ?? AUTH_TOKEN_RAW),
-            selectedAccount,
-            selectedProject,
-        );
-    } else if (devAuthToken) {
-        AUTH_TOKEN_RAW = devAuthToken;
+    try {
+        //token is close to expire, refresh it
+        if (!devAuthToken && !useInternalAuth && getFirebaseAuth().currentUser) {
+            //we have a firebase user, get the token from there
+            AUTH_TOKEN_RAW = await fetchComposableTokenFromFirebaseToken(selectedAccount, selectedProject);
+        } else if (!devAuthToken && (initToken || AUTH_TOKEN_RAW)) {
+            // we have a token already and no firebase user, refresh it
+            AUTH_TOKEN_RAW = await fetchComposableToken(
+                () => Promise.resolve(initToken ?? AUTH_TOKEN_RAW),
+                selectedAccount,
+                selectedProject,
+            );
+        } else if (devAuthToken) {
+            AUTH_TOKEN_RAW = devAuthToken;
+        }
+    } catch (error: unknown) {
+        if (
+            error instanceof RequestedScopeUnavailableError ||
+            error instanceof NoAccessibleAccountError ||
+            error instanceof CredentialError
+        ) {
+            AUTH_TOKEN_RAW = undefined;
+            AUTH_TOKEN = undefined;
+            if (error instanceof RequestedScopeUnavailableError) {
+                clearRejectedPersistedScope(selectedAccount, selectedProject);
+            }
+        }
+        throw error;
     }
 
     if (!AUTH_TOKEN_RAW) {
@@ -430,13 +522,90 @@ export class UserNotFoundError extends Error {
 
 export class STSError extends Error {
     stsURL: string;
-    constructor(message: string, stsURL: string) {
-        super(message);
+    readonly status?: number;
+    readonly errorCode?: string;
+    constructor(message: string, stsURL: string, options?: ErrorOptions & { status?: number; errorCode?: string }) {
+        super(message, options);
         this.name = 'STSError';
         this.stsURL = stsURL;
+        this.status = options?.status;
+        this.errorCode = options?.errorCode;
+    }
+}
+
+export type RequestedScopeKind = 'account' | 'project';
+export type AuthSelectorSource = 'url' | 'persisted';
+
+export class RequestedScopeUnavailableError extends STSError {
+    requestedScope: RequestedScopeKind;
+    selectorSource?: AuthSelectorSource;
+    recoveryUrl?: string;
+
+    constructor(
+        stsURL: string,
+        public readonly accountId?: string,
+        public readonly projectId?: string,
+        responseMessage?: string,
+        public readonly identity?: AuthenticatedIdentity,
+    ) {
+        super(responseMessage ?? 'The requested account or project is not available.', stsURL, {
+            status: 403,
+            errorCode: REQUESTED_SCOPE_UNAVAILABLE_ERROR_CODE,
+        });
+        this.name = 'RequestedScopeUnavailableError';
+        this.requestedScope = projectId ? 'project' : 'account';
+    }
+}
+
+/** @deprecated Use RequestedScopeUnavailableError. */
+export const TokenAuthorizationError = RequestedScopeUnavailableError;
+/** @deprecated Use RequestedScopeUnavailableError. */
+export type TokenAuthorizationError = RequestedScopeUnavailableError;
+
+export class NoAccessibleAccountError extends STSError {
+    constructor(
+        stsURL: string,
+        responseMessage?: string,
+        public readonly identity?: AuthenticatedIdentity,
+    ) {
+        super(responseMessage ?? 'No accessible account is available for this user.', stsURL, {
+            status: 403,
+            errorCode: NO_ACCESSIBLE_ACCOUNT_ERROR_CODE,
+        });
+        this.name = 'NoAccessibleAccountError';
     }
 }
 
+export class CredentialError extends STSError {
+    constructor(message: string, stsURL: string, options?: ErrorOptions & { status?: number; errorCode?: string }) {
+        super(message, stsURL, options);
+        this.name = 'CredentialError';
+    }
+}
+
+export class AuthenticationServiceError extends STSError {
+    constructor(message: string, stsURL: string, options?: ErrorOptions & { status?: number; errorCode?: string }) {
+        super(message, stsURL, options);
+        this.name = 'AuthenticationServiceError';
+    }
+}
+
+export function isRequestedScopeUnavailableError(error: unknown): error is RequestedScopeUnavailableError {
+    return error instanceof RequestedScopeUnavailableError;
+}
+
+export function isNoAccessibleAccountError(error: unknown): error is NoAccessibleAccountError {
+    return error instanceof NoAccessibleAccountError;
+}
+
+export function isCredentialError(error: unknown): error is CredentialError {
+    return error instanceof CredentialError;
+}
+
+export function isAuthenticationServiceError(error: unknown): error is AuthenticationServiceError {
+    return error instanceof AuthenticationServiceError;
+}
+
 /**
  * Thrown when the STS rejects sign-in because the current environment (preview/preprod) is
  * restricted to early-access users and this user lacks the `early-access` annotation. The

package/src/shell/login/SignInPrimitives.tsx

@@ -65,6 +65,7 @@ const SIGNIN_STEP_BUTTON_VARIANTS = {
 
 interface SignInStepButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: keyof typeof SIGNIN_STEP_BUTTON_VARIANTS;
+    ref?: Ref<HTMLButtonElement>;
 }
 
 /** Button used across the sign-in steps. */

package/src/shell/login/SignInRecoveryStep.test.tsx

@@ -0,0 +1,112 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import SignInRecoveryStep from './SignInRecoveryStep';
+
+const translations: Record<string, string> = {
+    'auth.recovery.scopeProject.eyebrow': 'Link Unavailable',
+    'auth.recovery.scopeProject.title': 'Project not available',
+    'auth.recovery.scopeProject.body':
+        'You’re signed in, but the project in this link isn’t available. The link may be outdated, or you may not have access.',
+    'auth.recovery.scopeAccount.eyebrow': 'Link Unavailable',
+    'auth.recovery.scopeAccount.title': 'Account not available',
+    'auth.recovery.scopeAccount.body': 'Account unavailable body',
+    'auth.recovery.noAccessibleAccount.eyebrow': 'Account Required',
+    'auth.recovery.noAccessibleAccount.title': 'No account is available',
+    'auth.recovery.noAccessibleAccount.body': 'No accessible account body',
+    'auth.recovery.credential.eyebrow': 'Sign-In Required',
+    'auth.recovery.credential.title': 'Your sign-in could not be verified',
+    'auth.recovery.credential.body': 'Credential body',
+    'auth.recovery.service.eyebrow': 'Service Unavailable',
+    'auth.recovery.service.title': "We couldn't complete sign-in",
+    'auth.recovery.service.body': 'Service body',
+    'auth.recovery.continue': 'Continue to Vertesia',
+    'auth.recovery.tryAgain': 'Try again',
+    'auth.recovery.useDifferentAccount': 'Use a different account',
+    'auth.recovery.supportPrefix': 'If you need help, contact',
+    'auth.recovery.technicalDetails': 'Technical details',
+    'auth.recovery.errorCode': 'Error code',
+    'auth.recovery.httpStatus': 'HTTP status',
+    'auth.recovery.requestedAccount': 'Requested account',
+    'auth.recovery.requestedProject': 'Requested project',
+    'auth.recovery.errorMessage': 'Error message',
+    'auth.returning.notYou': 'Not you?',
+};
+
+vi.mock('@vertesia/ui/i18n', () => ({
+    useUITranslation: () => ({ t: (key: string) => translations[key] ?? key }),
+}));
+
+describe('SignInRecoveryStep', () => {
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+
+    it('shows project-safe copy, focuses the primary action, and prevents duplicate submissions', () => {
+        const onContinue = vi.fn();
+        render(<SignInRecoveryStep kind="scopeProject" onContinue={onContinue} onUseDifferentAccount={vi.fn()} />);
+
+        expect(screen.getByText('Project not available')).toBeTruthy();
+        expect(screen.getByText(/project in this link isn’t available/)).toBeTruthy();
+        const continueButton = screen.getByRole('button', { name: 'Continue to Vertesia' });
+        expect(document.activeElement).toBe(continueButton);
+
+        fireEvent.click(continueButton);
+        fireEvent.click(continueButton);
+
+        expect(onContinue).toHaveBeenCalledOnce();
+        expect((continueButton as HTMLButtonElement).disabled).toBe(true);
+    });
+
+    it('omits continue for an identity with no accessible account and includes support guidance', () => {
+        const onUseDifferentAccount = vi.fn();
+        render(<SignInRecoveryStep kind="noAccessibleAccount" onUseDifferentAccount={onUseDifferentAccount} />);
+
+        expect(screen.queryByRole('button', { name: 'Continue to Vertesia' })).toBeNull();
+        expect(screen.getByText('No account is available')).toBeTruthy();
+        expect(screen.getByRole('link', { name: 'support@vertesiahq.com' }).getAttribute('href')).toBe(
+            'mailto:support@vertesiahq.com',
+        );
+        expect(document.activeElement).toBe(screen.getByRole('button', { name: 'Use a different account' }));
+    });
+
+    it('shows submitted selectors and the normalized server error in collapsed technical details', () => {
+        render(
+            <SignInRecoveryStep
+                details={{
+                    accountId: 'apple',
+                    errorCode: 'requested_scope_unavailable',
+                    message: 'The requested account or project is not available.',
+                    projectId: 'banana',
+                    status: 403,
+                }}
+                kind="scopeProject"
+                onContinue={vi.fn()}
+                onUseDifferentAccount={vi.fn()}
+            />,
+        );
+
+        const disclosure = screen.getByText('Technical details').closest('details');
+        expect(disclosure?.hasAttribute('open')).toBe(false);
+        expect(screen.getByText('requested_scope_unavailable')).toBeTruthy();
+        expect(screen.getByText('apple')).toBeTruthy();
+        expect(screen.getByText('banana')).toBeTruthy();
+        expect(screen.getByText('The requested account or project is not available.')).toBeTruthy();
+    });
+
+    it('reuses the returning-user identity row for the authenticated credential', () => {
+        const onUseDifferentAccount = vi.fn();
+        render(
+            <SignInRecoveryStep
+                identity={{ email: 'leon@example.com', name: 'Leon Ruggiero' }}
+                kind="scopeProject"
+                onContinue={vi.fn()}
+                onUseDifferentAccount={onUseDifferentAccount}
+            />,
+        );
+
+        expect(screen.getByText('Leon Ruggiero')).toBeTruthy();
+        expect(screen.getByText('leon@example.com')).toBeTruthy();
+        fireEvent.click(screen.getByRole('button', { name: 'Not you?' }));
+        expect(onUseDifferentAccount).toHaveBeenCalledOnce();
+    });
+});