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

package/src/shell/login/SignInRecoveryStep.tsx

@@ -0,0 +1,177 @@
+import { useUITranslation } from '@vertesia/ui/i18n';
+import { AlertTriangle } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import {
+    SignInAccountRow,
+    SignInIconBadge,
+    SignInInitialsBadge,
+    SignInStepButton,
+    SignInStepHeader,
+    SignInStepLayout,
+} from './SignInPrimitives';
+import { emailInitial, firstNameFromEmail } from './signInUtils';
+
+export type SignInRecoveryKind = 'scopeProject' | 'scopeAccount' | 'noAccessibleAccount' | 'credential' | 'service';
+
+export interface SignInRecoveryDetails {
+    accountId?: string;
+    errorCode?: string;
+    message: string;
+    projectId?: string;
+    status?: number;
+}
+
+export interface SignInRecoveryIdentity {
+    email: string;
+    name?: string;
+}
+
+interface SignInRecoveryStepProps {
+    details?: SignInRecoveryDetails;
+    identity?: SignInRecoveryIdentity;
+    kind: SignInRecoveryKind;
+    onContinue?: () => void;
+    onUseDifferentAccount: () => void;
+}
+
+export default function SignInRecoveryStep({
+    details,
+    identity,
+    kind,
+    onContinue,
+    onUseDifferentAccount,
+}: SignInRecoveryStepProps) {
+    const { t } = useUITranslation();
+    const [submitting, setSubmitting] = useState(false);
+    const initialButtonRef = useRef<HTMLButtonElement>(null);
+
+    useEffect(() => {
+        initialButtonRef.current?.focus();
+    }, []);
+
+    const isScopeFailure = kind === 'scopeProject' || kind === 'scopeAccount';
+    let copy: { eyebrow: string; title: string; body: string };
+    if (kind === 'scopeProject') {
+        copy = {
+            eyebrow: t('auth.recovery.scopeProject.eyebrow'),
+            title: t('auth.recovery.scopeProject.title'),
+            body: t('auth.recovery.scopeProject.body'),
+        };
+    } else if (kind === 'scopeAccount') {
+        copy = {
+            eyebrow: t('auth.recovery.scopeAccount.eyebrow'),
+            title: t('auth.recovery.scopeAccount.title'),
+            body: t('auth.recovery.scopeAccount.body'),
+        };
+    } else if (kind === 'noAccessibleAccount') {
+        copy = {
+            eyebrow: t('auth.recovery.noAccessibleAccount.eyebrow'),
+            title: t('auth.recovery.noAccessibleAccount.title'),
+            body: t('auth.recovery.noAccessibleAccount.body'),
+        };
+    } else if (kind === 'credential') {
+        copy = {
+            eyebrow: t('auth.recovery.credential.eyebrow'),
+            title: t('auth.recovery.credential.title'),
+            body: t('auth.recovery.credential.body'),
+        };
+    } else {
+        copy = {
+            eyebrow: t('auth.recovery.service.eyebrow'),
+            title: t('auth.recovery.service.title'),
+            body: t('auth.recovery.service.body'),
+        };
+    }
+
+    const runAction = (action: () => void) => {
+        if (submitting) return;
+        setSubmitting(true);
+        action();
+    };
+
+    return (
+        <SignInStepLayout>
+            <div role="alert" aria-live="assertive">
+                <SignInIconBadge>
+                    <AlertTriangle className="size-7 text-attention" aria-hidden="true" />
+                </SignInIconBadge>
+                <SignInStepHeader eyebrow={copy.eyebrow} title={copy.title} body={copy.body} />
+            </div>
+
+            {identity && (
+                <SignInAccountRow
+                    badge={<SignInInitialsBadge initials={emailInitial(identity.email)} />}
+                    title={identity.name || firstNameFromEmail(identity.email)}
+                    subtitle={identity.email}
+                    actionLabel={t('auth.returning.notYou')}
+                    onAction={onUseDifferentAccount}
+                />
+            )}
+
+            <div className="flex flex-col gap-2">
+                {onContinue && (
+                    <SignInStepButton
+                        ref={initialButtonRef}
+                        className="w-full"
+                        disabled={submitting}
+                        onClick={() => runAction(onContinue)}
+                    >
+                        {isScopeFailure ? t('auth.recovery.continue') : t('auth.recovery.tryAgain')}
+                    </SignInStepButton>
+                )}
+                <SignInStepButton
+                    ref={onContinue ? undefined : initialButtonRef}
+                    variant={onContinue ? 'ghost' : 'primary'}
+                    disabled={submitting}
+                    onClick={() => runAction(onUseDifferentAccount)}
+                >
+                    {t('auth.recovery.useDifferentAccount')}
+                </SignInStepButton>
+                {(kind === 'noAccessibleAccount' || kind === 'service') && (
+                    <p className="text-center text-xs text-muted">
+                        {t('auth.recovery.supportPrefix')}{' '}
+                        <a className="text-info" href="mailto:support@vertesiahq.com">
+                            support@vertesiahq.com
+                        </a>
+                    </p>
+                )}
+            </div>
+
+            {details && (
+                <details className="rounded-lg border border-mixer-muted/30 bg-mixer-muted/10 px-4 py-3 text-sm">
+                    <summary className="cursor-pointer font-medium text-muted marker:text-muted focus-visible:outline-2 focus-visible:outline-offset-2">
+                        {t('auth.recovery.technicalDetails')}
+                    </summary>
+                    <dl className="mt-3 grid grid-cols-[max-content_minmax(0,1fr)] gap-x-3 gap-y-2 text-xs">
+                        {details.errorCode && (
+                            <>
+                                <dt className="text-muted">{t('auth.recovery.errorCode')}</dt>
+                                <dd className="wrap-break-word font-mono">{details.errorCode}</dd>
+                            </>
+                        )}
+                        {details.status && (
+                            <>
+                                <dt className="text-muted">{t('auth.recovery.httpStatus')}</dt>
+                                <dd className="font-mono">{details.status}</dd>
+                            </>
+                        )}
+                        {details.accountId && (
+                            <>
+                                <dt className="text-muted">{t('auth.recovery.requestedAccount')}</dt>
+                                <dd className="wrap-break-word font-mono">{details.accountId}</dd>
+                            </>
+                        )}
+                        {details.projectId && (
+                            <>
+                                <dt className="text-muted">{t('auth.recovery.requestedProject')}</dt>
+                                <dd className="wrap-break-word font-mono">{details.projectId}</dd>
+                            </>
+                        )}
+                        <dt className="text-muted">{t('auth.recovery.errorMessage')}</dt>
+                        <dd className="wrap-break-word font-mono">{details.message}</dd>
+                    </dl>
+                </details>
+            )}
+        </SignInStepLayout>
+    );
+}

package/src/shell/login/SigninScreen.tsx

@@ -1,12 +1,22 @@
-import type { SignupData, SignupPayload } from '@vertesia/common';
+import { REQUESTED_SCOPE_UNAVAILABLE_ERROR_CODE, type SignupData, type SignupPayload } from '@vertesia/common';
 import { Env } from '@vertesia/ui/env';
 import { useUITranslation } from '@vertesia/ui/i18n';
 import { RegionTag } from '@vertesia/ui/layout';
-import { RestrictedEnvironmentError, UserNotFoundError, useUserSession, useUXTracking } from '@vertesia/ui/session';
+import {
+    AuthenticationServiceError,
+    CredentialError,
+    NoAccessibleAccountError,
+    RequestedScopeUnavailableError,
+    RestrictedEnvironmentError,
+    UserNotFoundError,
+    useUserSession,
+    useUXTracking,
+} from '@vertesia/ui/session';
 import { useCallback, useEffect, useState } from 'react';
 import SignInAuthPending from './SignInAuthPending';
 import SignInEmailStep, { type TenantInfo } from './SignInEmailStep';
 import SignInProvidersStep from './SignInProvidersStep';
+import SignInRecoveryStep, { type SignInRecoveryKind } from './SignInRecoveryStep';
 import SignInRestrictedEnvStep from './SignInRestrictedEnvStep';
 import SignInReturningStep from './SignInReturningStep';
 import SignInTenantBlockedStep from './SignInTenantBlockedStep';
@@ -65,7 +75,30 @@ function matchesPathPrefix(pathname: string, prefix?: string | string[]) {
     });
 }
 
-type Mode = 'email' | 'providers' | 'tenant' | 'blocked' | 'returning' | 'pending' | 'signup' | 'restricted';
+type Mode =
+    | 'email'
+    | 'providers'
+    | 'tenant'
+    | 'blocked'
+    | 'returning'
+    | 'pending'
+    | 'signup'
+    | 'restricted'
+    | 'scopeUnavailable'
+    | 'noAccessibleAccount'
+    | 'credentialFailure'
+    | 'serviceFailure';
+
+function isDedicatedAuthError(error: Error): boolean {
+    return (
+        error instanceof UserNotFoundError ||
+        error instanceof RestrictedEnvironmentError ||
+        error instanceof RequestedScopeUnavailableError ||
+        error instanceof NoAccessibleAccountError ||
+        error instanceof CredentialError ||
+        error instanceof AuthenticationServiceError
+    );
+}
 
 function SigninScreenImpl({
     isNested = false,
@@ -87,8 +120,20 @@ function SigninScreenImpl({
     const [tenant, setTenant] = useState<TenantInfo | undefined>(undefined);
     const [pendingProvider, setPendingProvider] = useState<ProviderId | null>(null);
 
+    const recoveryIdentity =
+        authError instanceof RequestedScopeUnavailableError || authError instanceof NoAccessibleAccountError
+            ? authError.identity
+            : undefined;
+    const matchingStoredIdentity =
+        recoveryIdentity && storedSession?.email.toLowerCase() === recoveryIdentity.email.toLowerCase()
+            ? storedSession
+            : undefined;
+    const displayedRecoveryIdentity = recoveryIdentity
+        ? { email: recoveryIdentity.email, name: recoveryIdentity.name ?? matchingStoredIdentity?.name }
+        : undefined;
+
     useEffect(() => {
-        if (!preservePath) {
+        if (!preservePath && !isLoading && !authError) {
             // Reset to the app's mount root, not the bare origin. A gateway-mounted app carries a
             // served `<base href>` deep mount; collapsing to '/' drops the app off that mount (the
             // bare origin serves no app) and the address bar can no longer be reloaded. This effect
@@ -99,7 +144,7 @@ function SigninScreenImpl({
             const mountRoot = new URL(document.baseURI).pathname || '/';
             history.replaceState({}, '', mountRoot);
         }
-    }, [preservePath]);
+    }, [authError, isLoading, preservePath]);
 
     // Route based on authError surfaced by the session.
     useEffect(() => {
@@ -108,6 +153,14 @@ function SigninScreenImpl({
             setMode('signup');
         } else if (authError instanceof RestrictedEnvironmentError) {
             setMode('restricted');
+        } else if (authError instanceof RequestedScopeUnavailableError) {
+            setMode('scopeUnavailable');
+        } else if (authError instanceof NoAccessibleAccountError) {
+            setMode('noAccessibleAccount');
+        } else if (authError instanceof CredentialError) {
+            setMode('credentialFailure');
+        } else if (authError instanceof AuthenticationServiceError) {
+            setMode('serviceFailure');
         } else if (isInviteRequiredError(authError)) {
             const pending = readPendingSignin();
             if (pending) setEmail(pending.email);
@@ -176,6 +229,37 @@ function SigninScreenImpl({
         void resetSignInState();
     }, []);
 
+    const useDifferentAccount = useCallback(() => {
+        Env.logger.info('Authentication recovery action selected', {
+            vertesia: { recovery_action: 'use_different_account' },
+        });
+        setStoredSession(null);
+        setEmail('');
+        setTenant(undefined);
+        setMode('email');
+        void resetSignInState().finally(() => signOut());
+    }, [signOut]);
+
+    const continueWithSanitizedScope = useCallback(() => {
+        if (!(authError instanceof RequestedScopeUnavailableError)) return;
+        Env.logger.info('Authentication recovery action selected', {
+            vertesia: {
+                error_code: REQUESTED_SCOPE_UNAVAILABLE_ERROR_CODE,
+                selector_source: authError.selectorSource,
+                requested_scope: authError.requestedScope,
+                recovery_action: 'continue_sanitized',
+            },
+        });
+        window.location.replace(authError.recoveryUrl ?? window.location.href);
+    }, [authError]);
+
+    const retryAuthentication = useCallback(() => {
+        Env.logger.info('Authentication recovery action selected', {
+            vertesia: { recovery_action: 'retry' },
+        });
+        window.location.reload();
+    }, []);
+
     // Submits the signup form to /auth/signup, then redirects into the app.
     const onSignup = (data: SignupData, fbToken: string) => {
         const payload: SignupPayload = { signupData: data, firebaseToken: fbToken };
@@ -190,10 +274,7 @@ function SigninScreenImpl({
     };
 
     const shouldHideTransientAuthError =
-        suppressAuthError &&
-        authError !== undefined &&
-        !(authError instanceof UserNotFoundError) &&
-        !(authError instanceof RestrictedEnvironmentError);
+        suppressAuthError && authError !== undefined && !isDedicatedAuthError(authError);
 
     if (isLoading || user || shouldHideTransientAuthError) return null;
 
@@ -210,6 +291,49 @@ function SigninScreenImpl({
         );
     } else if (mode === 'restricted') {
         content = <SignInRestrictedEnvStep onUseDifferentEmail={startOver} />;
+    } else if (mode === 'scopeUnavailable' && authError instanceof RequestedScopeUnavailableError) {
+        const kind: SignInRecoveryKind = authError.requestedScope === 'project' ? 'scopeProject' : 'scopeAccount';
+        content = (
+            <SignInRecoveryStep
+                details={{
+                    accountId: authError.accountId,
+                    errorCode: authError.errorCode,
+                    message: authError.message,
+                    projectId: authError.projectId,
+                    status: authError.status,
+                }}
+                identity={displayedRecoveryIdentity}
+                kind={kind}
+                onContinue={continueWithSanitizedScope}
+                onUseDifferentAccount={useDifferentAccount}
+            />
+        );
+    } else if (mode === 'noAccessibleAccount' && authError instanceof NoAccessibleAccountError) {
+        content = (
+            <SignInRecoveryStep
+                details={{ errorCode: authError.errorCode, message: authError.message, status: authError.status }}
+                identity={displayedRecoveryIdentity}
+                kind="noAccessibleAccount"
+                onUseDifferentAccount={useDifferentAccount}
+            />
+        );
+    } else if (mode === 'credentialFailure' && authError instanceof CredentialError) {
+        content = (
+            <SignInRecoveryStep
+                details={{ errorCode: authError.errorCode, message: authError.message, status: authError.status }}
+                kind="credential"
+                onUseDifferentAccount={useDifferentAccount}
+            />
+        );
+    } else if (mode === 'serviceFailure' && authError instanceof AuthenticationServiceError) {
+        content = (
+            <SignInRecoveryStep
+                details={{ errorCode: authError.errorCode, message: authError.message, status: authError.status }}
+                kind="service"
+                onContinue={retryAuthentication}
+                onUseDifferentAccount={useDifferentAccount}
+            />
+        );
     } else if (mode === 'signup' && !localStorage.getItem('tenantName')) {
         content = <SignupForm onSignup={onSignup} goBack={startOver} />;
     } else if (mode === 'tenant' && tenant) {
@@ -247,25 +371,19 @@ function SigninScreenImpl({
 
                     {content}
 
-                    {authError &&
-                        !(authError instanceof UserNotFoundError) &&
-                        !(authError instanceof RestrictedEnvironmentError) &&
-                        !isInviteRequiredError(authError) && (
-                            <div className="mt-6 max-w-[420px] text-center text-sm text-muted">
-                                <div>
-                                    {t('auth.signInError')}
-                                    <br />
-                                    {t('auth.signInErrorContact')}
-                                    <a className="text-info mx-1" href="mailto:support@vertesiahq.com">
-                                        support@vertesiahq.com
-                                    </a>
-                                    {t('auth.signInErrorPersists')}
-                                    <pre className="mt-2 text-xs">
-                                        {t('auth.error', { message: authError.message })}
-                                    </pre>
-                                </div>
+                    {authError && !isDedicatedAuthError(authError) && !isInviteRequiredError(authError) && (
+                        <div className="mt-6 max-w-[420px] text-center text-sm text-muted">
+                            <div>
+                                {t('auth.signInError')}
+                                <br />
+                                {t('auth.signInErrorContact')}
+                                <a className="text-info mx-1" href="mailto:support@vertesiahq.com">
+                                    support@vertesiahq.com
+                                </a>
+                                {t('auth.signInErrorPersists')}
                             </div>
-                        )}
+                        </div>
+                    )}
 
                     <div className="flex items-center gap-5 mt-10 text-xs text-muted-foreground">
                         <a href="https://vertesiahq.com/privacy" className="hover:text-foreground transition">