@vertesia/ui 1.5.0 → 1.6.0-dev.20260918.061604Z

package/src/shell/login/SignInPrimitives.tsx

@@ -55,10 +55,11 @@ const SIGNIN_STEP_BUTTON_BASE = 'cursor-pointer inline-flex items-center justify
 const SIGNIN_STEP_BUTTON_VARIANTS = {
     // Filled CTA; greys out when disabled.
     primary:
-        'h-[42px] gap-2.5 rounded-md bg-foreground text-background hover:opacity-90 ' +
+        'h-[42px] gap-2.5 rounded-md bg-[var(--auth-button,var(--foreground))] text-[color:var(--auth-button-text,var(--background))] hover:opacity-90 ' +
         'disabled:opacity-50 disabled:cursor-not-allowed',
     // Non-interactive primary kept at full opacity (spinner reads as active).
-    loading: 'h-[42px] gap-2.5 rounded-md bg-foreground text-background opacity-90',
+    loading:
+        'h-[42px] gap-2.5 rounded-md bg-[var(--auth-button,var(--foreground))] text-[color:var(--auth-button-text,var(--background))] opacity-90',
     // Flat text link.
     ghost: 'h-9 text-muted hover:text-foreground',
 } as const;
@@ -135,7 +136,7 @@ interface SignInInitialsBadgeProps {
 export function SignInInitialsBadge({ initials, shape = 'circle' }: SignInInitialsBadgeProps) {
     return (
         <span
-            className={`bg-info text-info-foreground grid place-items-center font-semibold shrink-0 ${INITIALS_BADGE_SHAPES[shape]}`}
+            className={`bg-info text-info grid place-items-center font-semibold shrink-0 ${INITIALS_BADGE_SHAPES[shape]}`}
         >
             {initials}
         </span>
@@ -145,7 +146,7 @@ export function SignInInitialsBadge({ initials, shape = 'circle' }: SignInInitia
 /** Rounded tile framing a provider/status icon. */
 export function SignInIconBadge({ children }: { children: ReactNode }) {
     return (
-        <div className="inline-grid place-items-center size-14 rounded-xl bg-info-background border border-info/15 mb-3.5">
+        <div className="inline-grid place-items-center size-14 rounded-xl bg-info border border-info/15 mb-3.5">
             {children}
         </div>
     );
@@ -177,7 +178,7 @@ const ACCOUNT_CARD_VARIANTS = {
         topRow: 'flex items-center gap-2.5 px-3 py-2.5',
         title: 'text-[13.5px] font-semibold text-foreground leading-tight',
         subtitle: 'text-[11.5px] text-muted leading-tight mt-0.5',
-        bottomRow: 'flex items-center gap-2.5 px-3 py-1.5 border-t border-border bg-muted-background',
+        bottomRow: 'flex items-center gap-2.5 px-3 py-1.5 border-t border-border bg-muted',
         mailBox: 'size-[30px] grid place-items-center shrink-0',
         mailIcon: 'size-4 text-muted',
         email: 'text-sm text-foreground/80 flex-1 truncate',
@@ -187,7 +188,7 @@ const ACCOUNT_CARD_VARIANTS = {
         topRow: 'flex items-center gap-3 px-3.5 py-2.5',
         title: 'text-sm font-semibold text-foreground truncate',
         subtitle: 'text-xs text-foreground/80 truncate',
-        bottomRow: 'flex items-center gap-3 px-3.5 py-1 border-t border-border bg-muted-background',
+        bottomRow: 'flex items-center gap-3 px-3.5 py-1 border-t border-border bg-muted',
         mailBox: 'w-9 h-6 grid place-items-center shrink-0',
         mailIcon: 'size-3.5 text-muted',
         email: 'text-xs text-foreground/80 flex-1 truncate',
@@ -253,7 +254,7 @@ interface SignInAccountRowProps {
 /** Single-row identity card: badge + title/subtitle + a trailing action link. */
 export function SignInAccountRow({ badge, title, subtitle, actionLabel, onAction }: SignInAccountRowProps) {
     return (
-        <div className="flex items-center gap-3 px-3.5 py-2.5 rounded-md border border-border bg-muted-background">
+        <div className="flex items-center gap-3 px-3.5 py-2.5 rounded-md border border-border bg-muted">
             {badge}
             <SignInIdentityLines
                 title={title}
@@ -275,7 +276,7 @@ interface SignInEmailRowProps {
 /** Standalone bordered pill: mail icon + email + a trailing action link. */
 export function SignInEmailRow({ email, actionLabel, onAction }: SignInEmailRowProps) {
     return (
-        <div className="flex items-center gap-2 px-3 py-2 rounded-md border border-border bg-muted-background">
+        <div className="flex items-center gap-2 px-3 py-2 rounded-md border border-border bg-muted">
             <Mail className="size-4 text-muted shrink-0" />
             <span className="text-sm text-foreground/80 flex-1 truncate">{email}</span>
             <SignInInlineLinkButton onClick={onAction}>{actionLabel}</SignInInlineLinkButton>
@@ -307,7 +308,7 @@ export function SignInProviderButton({ provider, label, onClick, variant = 'outl
                 variant="unstyled"
                 size="none"
                 onClick={onClick}
-                className="cursor-pointer group h-[42px] w-full inline-flex items-center gap-3 ps-3.5 pe-3 rounded-md border border-border bg-background text-sm font-medium text-foreground transition hover:bg-muted-background"
+                className="cursor-pointer group h-[42px] w-full inline-flex items-center gap-3 ps-3.5 pe-3 rounded-md border border-border bg-background text-sm font-medium text-foreground transition hover:bg-muted"
             >
                 <Icon className="!size-[18px] shrink-0" />
                 <span className="flex-1 text-start">{label}</span>
@@ -317,7 +318,9 @@ export function SignInProviderButton({ provider, label, onClick, variant = 'outl
     }
 
     const variantClass =
-        variant === 'filled' ? '!bg-foreground text-background hover:!bg-foreground/90' : 'hover:shadow-sm';
+        variant === 'filled'
+            ? '!bg-[var(--auth-button,var(--foreground))] text-[color:var(--auth-button-text,var(--background))] hover:!bg-[var(--auth-button,var(--foreground))]/90'
+            : 'hover:shadow-sm';
     return (
         <Button
             variant="outline"
@@ -342,7 +345,7 @@ interface SignInCalloutProps {
 /** Destructive notice: icon + bold title over a muted meta line. */
 export function SignInCallout({ icon: Icon, title, meta }: SignInCalloutProps) {
     return (
-        <div className="flex items-center gap-2.5 px-3 py-2.5 rounded-md bg-destructive-background border border-destructive/20">
+        <div className="flex items-center gap-2.5 px-3 py-2.5 rounded-md bg-destructive border border-destructive/20">
             <Icon className="size-5 text-destructive shrink-0" />
             <div className="flex-1 min-w-0 text-sm">
                 <div className="font-semibold text-destructive">{title}</div>

package/src/shell/login/SignInRestrictedEnvStep.tsx

@@ -22,7 +22,6 @@ const AUTO_REDIRECT_SECONDS = 15;
  * docs/restrict-access-to-non-production-envs.md.
  */
 export default function SignInRestrictedEnvStep({ onUseDifferentEmail }: SignInRestrictedEnvStepProps) {
-    const { t } = useUITranslation();
     // Region-aware: send the user to their own region's production site, never another region's (an
     // EU user must not be redirected to the US site). Falls back to the canonical site when unknown.
     const productionUrl = getProductionAppUrl(Env.region);
@@ -52,6 +51,24 @@ export default function SignInRestrictedEnvStep({ onUseDifferentEmail }: SignInR
         };
     }, [productionUrl]);
 
+    return (
+        <SignInRestrictedEnvView
+            secondsLeft={secondsLeft}
+            onUseDifferentEmail={onUseDifferentEmail}
+            onRedirect={() => {
+                window.location.href = productionUrl;
+            }}
+        />
+    );
+}
+
+/** Shared presentation; the host owns session cleanup and automatic redirects. */
+export function SignInRestrictedEnvView({
+    secondsLeft = AUTO_REDIRECT_SECONDS,
+    onUseDifferentEmail,
+    onRedirect,
+}: SignInRestrictedEnvStepProps & { secondsLeft?: number; onRedirect: () => void }) {
+    const { t } = useUITranslation();
     return (
         <SignInStepLayout>
             <SignInStepHeader
@@ -67,12 +84,7 @@ export default function SignInRestrictedEnvStep({ onUseDifferentEmail }: SignInR
                     title={t('auth.restricted.calloutTitle')}
                     meta={t('auth.restricted.calloutMeta')}
                 />
-                <SignInStepButton
-                    className="w-full"
-                    onClick={() => {
-                        window.location.href = productionUrl;
-                    }}
-                >
+                <SignInStepButton className="w-full" onClick={onRedirect}>
                     {t('auth.restricted.redirect')}
                 </SignInStepButton>
                 <SignInStepButton variant="ghost" onClick={onUseDifferentEmail}>

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

@@ -0,0 +1,104 @@
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { Button } from '@vertesia/ui/core';
+import { Env } from '@vertesia/ui/env';
+import { CredentialError } from '@vertesia/ui/session';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { type SignInScreenViewProps, SigninScreen } from './SigninScreen';
+
+const session = {
+    isLoading: false,
+    user: undefined as { name: string } | undefined,
+    authError: undefined as Error | undefined,
+    signOut: vi.fn(),
+};
+vi.mock('@vertesia/ui/session', async (importOriginal) => ({
+    ...(await importOriginal<typeof import('@vertesia/ui/session')>()),
+    useUserSession: () => session,
+    useUXTracking: () => ({ trackEvent: vi.fn() }),
+}));
+vi.mock('./signInUtils', async (importOriginal) => ({
+    ...(await importOriginal<typeof import('./signInUtils')>()),
+    resetSignInState: vi.fn().mockResolvedValue(undefined),
+}));
+
+function CustomSignIn({ flow, onUseDifferentAccount, notice }: SignInScreenViewProps) {
+    return (
+        <main>
+            <h1>My application login</h1>
+            <p>Mode: {flow.mode}</p>
+            <Button onClick={() => flow.onProceedFromEmail('person@example.com')}>Continue with email</Button>
+            <Button onClick={onUseDifferentAccount}>Change identity</Button>
+            {notice}
+        </main>
+    );
+}
+
+describe('custom sign-in presentation', () => {
+    beforeEach(() => {
+        Env.init({
+            version: '1.0.0',
+            isLocalDev: true,
+            isDocker: false,
+            type: 'development',
+            name: 'Test application',
+            endpoints: {
+                studio: 'https://studio.example.test',
+                zeno: 'https://store.example.test',
+                sts: 'https://sts.example.test',
+            },
+        });
+        session.isLoading = false;
+        session.user = undefined;
+        session.authError = undefined;
+        session.signOut.mockClear();
+        localStorage.clear();
+        sessionStorage.clear();
+        history.replaceState({}, '', '/app/deep-link');
+    });
+    afterEach(cleanup);
+
+    it('replaces the complete page and drives the existing flow while preserving the return path', () => {
+        const view = render(<SigninScreen preservePath View={CustomSignIn} />);
+        expect(view.container.firstElementChild?.tagName).toBe('MAIN');
+        expect(screen.queryByText('Privacy Policy')).toBeNull();
+        expect(screen.getByText('Mode: email')).toBeTruthy();
+        fireEvent.click(screen.getByRole('button', { name: 'Continue with email' }));
+        expect(screen.getByText('Mode: providers')).toBeTruthy();
+        expect(window.location.pathname).toBe('/app/deep-link');
+    });
+
+    it('keeps session gating in shared code for custom views', () => {
+        session.isLoading = true;
+        const view = render(<SigninScreen preservePath View={CustomSignIn} />);
+        expect(screen.queryByText('My application login')).toBeNull();
+        session.isLoading = false;
+        view.rerender(<SigninScreen preservePath View={CustomSignIn} />);
+        expect(screen.getByText('My application login')).toBeTruthy();
+        session.user = { name: 'Signed-in user' };
+        view.rerender(<SigninScreen preservePath View={CustomSignIn} />);
+        expect(screen.queryByText('My application login')).toBeNull();
+    });
+
+    it('retains allowed-path and transient-error suppression for custom views', () => {
+        const view = render(<SigninScreen allowedPrefix="/app/" View={CustomSignIn} />);
+        expect(screen.queryByText('My application login')).toBeNull();
+        session.authError = new Error('Transient failure');
+        view.rerender(<SigninScreen suppressAuthErrorPrefix="/app/" View={CustomSignIn} />);
+        expect(screen.queryByText('My application login')).toBeNull();
+    });
+
+    it('exposes dedicated recovery modes and working identity reset even on a suppressed path', async () => {
+        session.authError = new CredentialError('Expired credential', 'https://sts.example.test');
+        render(<SigninScreen preservePath suppressAuthErrorPrefix="/app/" View={CustomSignIn} />);
+        expect(await screen.findByText('Mode: credentialFailure')).toBeTruthy();
+        fireEvent.click(screen.getByRole('button', { name: 'Change identity' }));
+        await waitFor(() => expect(session.signOut).toHaveBeenCalledOnce());
+        expect(screen.getByText('Mode: email')).toBeTruthy();
+    });
+
+    it('continues to render the default page when no override is supplied', () => {
+        render(<SigninScreen preservePath />);
+        expect(screen.queryByText('My application login')).toBeNull();
+        expect(screen.getByRole('link', { name: /privacy policy/i })).toBeTruthy();
+    });
+});

package/src/shell/login/SigninScreen.tsx

@@ -1,7 +1,6 @@
 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 {
     AuthenticationServiceError,
     CredentialError,
@@ -12,29 +11,33 @@ import {
     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 { type ComponentType, type ReactNode, useCallback, useEffect } from 'react';
+import { type SignInFlowController, SignInFlowSteps, useSignInFlow } from './SignInFlow';
+import { SignInPageShell } from './SignInPageShell';
 import SignInRecoveryStep, { type SignInRecoveryKind } from './SignInRecoveryStep';
 import SignInRestrictedEnvStep from './SignInRestrictedEnvStep';
-import SignInReturningStep from './SignInReturningStep';
 import SignInTenantBlockedStep from './SignInTenantBlockedStep';
-import SignInTenantStep from './SignInTenantStep';
 import SignupForm from './SignupForm';
-import {
-    clearLastSuccessfulLogin,
-    clearPendingSignin,
-    isInviteRequiredError,
-    type LastSuccessfulLogin,
-    type ProviderId,
-    readLastSuccessfulLogin,
-    readPendingSignin,
-    resetSignInState,
-    writeLastSuccessfulLogin,
-} from './signInUtils';
+import { isInviteRequiredError, readPendingSignin, resetSignInState } from './signInUtils';
 
-interface SigninScreenProps {
+/** Presentation only: the shared screen still owns session gating and recovery transitions. */
+export interface SignInScreenViewProps {
+    flow: SignInFlowController<SignInRecoveryMode>;
+    authError?: Error;
+    /** Retain these shared forms for tenant resolution and provider sign-in; flow alone does not initiate redirects. */
+    children: ReactNode;
+    notice: ReactNode;
+    isNested: boolean;
+    lightLogo?: string;
+    darkLogo?: string;
+    onUseDifferentAccount: () => void;
+    onContinueWithSanitizedScope: () => void;
+    onRetry: () => void;
+    onSignup: (data: SignupData, firebaseToken: string) => void;
+}
+
+export interface SigninScreenProps {
+    View?: ComponentType<SignInScreenViewProps>;
     isNested?: boolean;
     allowedPrefix?: string | string[];
     lightLogo?: string;
@@ -50,6 +53,7 @@ export function SigninScreen({
     darkLogo,
     preservePath,
     suppressAuthErrorPrefix,
+    View,
 }: SigninScreenProps) {
     const pathname = typeof window === 'undefined' ? '' : window.location.pathname;
     const allow = matchesPathPrefix(pathname, allowedPrefix);
@@ -61,6 +65,7 @@ export function SigninScreen({
             darkLogo={darkLogo}
             preservePath={preservePath}
             suppressAuthError={suppressAuthError}
+            View={View}
         />
     );
 }
@@ -75,13 +80,12 @@ function matchesPathPrefix(pathname: string, prefix?: string | string[]) {
     });
 }
 
-type Mode =
-    | 'email'
-    | 'providers'
-    | 'tenant'
+/**
+ * The modes this screen adds on top of {@link SignInCoreMode}: every one is entered from an
+ * `authError` the session surfaced, which is why they stay here rather than in the shared flow.
+ */
+export type SignInRecoveryMode =
     | 'blocked'
-    | 'returning'
-    | 'pending'
     | 'signup'
     | 'restricted'
     | 'scopeUnavailable'
@@ -106,19 +110,17 @@ function SigninScreenImpl({
     darkLogo,
     preservePath,
     suppressAuthError,
+    View,
 }: SigninScreenProps & { suppressAuthError?: boolean }) {
-    const { t } = useUITranslation();
     const { isLoading, user, authError, signOut } = useUserSession();
     const { trackEvent } = useUXTracking();
 
-    const [storedSession, setStoredSession] = useState<LastSuccessfulLogin | null>(() => readLastSuccessfulLogin());
-    const [mode, setMode] = useState<Mode>(() => {
-        const s = readLastSuccessfulLogin();
-        return s ? 'returning' : 'email';
+    const flow = useSignInFlow<SignInRecoveryMode>({
+        signOut,
+        trackEvent,
+        user,
     });
-    const [email, setEmail] = useState('');
-    const [tenant, setTenant] = useState<TenantInfo | undefined>(undefined);
-    const [pendingProvider, setPendingProvider] = useState<ProviderId | null>(null);
+    const { mode, setMode, email, setEmail, tenant, setTenant, storedSession, setStoredSession } = flow;
 
     const recoveryIdentity =
         authError instanceof RequestedScopeUnavailableError || authError instanceof NoAccessibleAccountError
@@ -166,68 +168,14 @@ function SigninScreenImpl({
             if (pending) setEmail(pending.email);
             setMode('blocked');
         }
-    }, [authError]);
-
-    // On successful login, finalize the last-successful-login entry with the user's name.
-    useEffect(() => {
-        if (!user) return;
-        const pending = readPendingSignin();
-        if (!pending) return;
-        writeLastSuccessfulLogin({
-            email: pending.email,
-            lastProvider: pending.provider,
-            tenantName: pending.tenantName,
-            name: user.name || undefined,
-        });
-        clearPendingSignin();
-    }, [user]);
-
-    const onProceedFromEmail = useCallback((e: string, t: TenantInfo | undefined) => {
-        setEmail(e);
-        setTenant(t);
-        setMode(t ? 'tenant' : 'providers');
-    }, []);
-
-    const onBack = useCallback(() => {
-        setMode('email');
-        setTenant(undefined);
-    }, []);
-
-    const onNotYou = useCallback(() => {
-        clearLastSuccessfulLogin();
-        clearPendingSignin();
-        setStoredSession(null);
-        setEmail('');
-        setTenant(undefined);
-        setMode('email');
-        void signOut();
-    }, [signOut]);
-
-    const onProviderClicked = useCallback(
-        (provider: ProviderId) => {
-            // Tenant context comes from a resolved tenant or stored tenantName, not the provider.
-            const hasTenant = !!tenant || !!storedSession?.tenantName;
-            // Only the pre-existing enterprise_signin event; non-tenant sign-ins emit nothing.
-            if (hasTenant) trackEvent('enterprise_signin', { provider });
-            setPendingProvider(provider);
-            setMode('pending');
-            // The redirect itself happens in the calling step's startSignIn(); this just shows the pending screen.
-        },
-        [trackEvent, storedSession?.tenantName, tenant],
-    );
+    }, [authError, setEmail, setMode]);
 
     // "Use a different email" out of the blocked/signup screen. The user reached it
     // as a valid Firebase user with no Vertesia account, so a partial reset isn't
     // enough: unless we also clear the persisted records and sign out of Firebase,
     // the leftover session re-runs the invite check on the next auth change or
     // reload and lands them back on blocked.
-    const startOver = useCallback(() => {
-        setStoredSession(null); // drop the in-memory mirror too — resetSignInState only clears storage
-        setEmail('');
-        setTenant(undefined);
-        setMode('email');
-        void resetSignInState();
-    }, []);
+    const { startOver } = flow;
 
     const useDifferentAccount = useCallback(() => {
         Env.logger.info('Authentication recovery action selected', {
@@ -238,7 +186,7 @@ function SigninScreenImpl({
         setTenant(undefined);
         setMode('email');
         void resetSignInState().finally(() => signOut());
-    }, [signOut]);
+    }, [setStoredSession, setEmail, setTenant, setMode, signOut]);
 
     const continueWithSanitizedScope = useCallback(() => {
         if (!(authError instanceof RequestedScopeUnavailableError)) return;
@@ -279,9 +227,7 @@ function SigninScreenImpl({
     if (isLoading || user || shouldHideTransientAuthError) return null;
 
     let content: React.ReactNode = null;
-    if (mode === 'pending' && pendingProvider) {
-        content = <SignInAuthPending provider={pendingProvider} />;
-    } else if (mode === 'blocked') {
+    if (mode === 'blocked') {
         content = (
             <SignInTenantBlockedStep
                 email={email || storedSession?.email || ''}
@@ -336,67 +282,91 @@ function SigninScreenImpl({
         );
     } else if (mode === 'signup' && !localStorage.getItem('tenantName')) {
         content = <SignupForm onSignup={onSignup} goBack={startOver} />;
-    } else if (mode === 'tenant' && tenant) {
-        content = (
-            <SignInTenantStep
-                email={email}
-                tenant={tenant}
-                onBack={onBack}
-                onProviderClicked={() => onProviderClicked((tenant.provider ?? 'oidc') as ProviderId)}
-            />
-        );
-    } else if (mode === 'providers') {
-        content = <SignInProvidersStep email={email} onBack={onBack} onProviderClicked={onProviderClicked} />;
-    } else if (mode === 'returning' && storedSession) {
-        content = (
-            <SignInReturningStep session={storedSession} onNotYou={onNotYou} onProviderClicked={onProviderClicked} />
-        );
     } else {
-        content = <SignInEmailStep initialEmail={email} onProceed={onProceedFromEmail} />;
+        // Every remaining mode is a core one; an unmatched recovery mode falls through to the
+        // email step, exactly as it did when this chain owned all twelve branches.
+        content = <SignInFlowSteps flow={flow} />;
+    }
+
+    const notice = authError && !isDedicatedAuthError(authError) && !isInviteRequiredError(authError) && (
+        <SignInErrorNotice />
+    );
+
+    if (View) {
+        return (
+            <View
+                flow={flow}
+                authError={authError}
+                notice={notice}
+                isNested={isNested}
+                lightLogo={lightLogo}
+                darkLogo={darkLogo}
+                onUseDifferentAccount={useDifferentAccount}
+                onContinueWithSanitizedScope={continueWithSanitizedScope}
+                onRetry={retryAuthentication}
+                onSignup={onSignup}
+            >
+                {content}
+            </View>
+        );
     }
 
+    return (
+        <DefaultSignInScreen isNested={isNested} lightLogo={lightLogo} darkLogo={darkLogo} notice={notice}>
+            {content}
+        </DefaultSignInScreen>
+    );
+}
+
+/** The shared Studio sign-in layout; branding only supplies its content and assets. */
+export function DefaultSignInScreen({
+    isNested,
+    lightLogo,
+    darkLogo,
+    notice,
+    children,
+    logoAlt,
+    footer,
+}: {
+    isNested?: boolean;
+    lightLogo?: string;
+    darkLogo?: string;
+    notice?: ReactNode;
+    children: ReactNode;
+    logoAlt?: string;
+    footer?: string;
+}) {
     return (
         <div
             style={{ zIndex: 999998 }}
             className={`${isNested ? 'absolute' : 'fixed'} inset-0 overflow-y-auto bg-background`}
         >
-            <div className="min-h-full flex flex-col items-center justify-center py-12 px-4">
-                <div className="flex flex-col items-center w-full">
-                    {(lightLogo || darkLogo) && (
-                        <div className="mb-7">
-                            {lightLogo && <img src={lightLogo} alt="Vertesia" className="h-10 block dark:hidden" />}
-                            {darkLogo && <img src={darkLogo} alt="Vertesia" className="h-10 hidden dark:block" />}
-                        </div>
-                    )}
-
-                    {content}
-
-                    {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>
-                    )}
+            <SignInPageShell
+                lightLogo={lightLogo}
+                darkLogo={darkLogo}
+                logoAlt={logoAlt}
+                footer={footer}
+                notice={notice}
+            >
+                {children}
+            </SignInPageShell>
+        </div>
+    );
+}
 
-                    <div className="flex items-center gap-5 mt-10 text-xs text-muted">
-                        <a href="https://vertesiahq.com/privacy" className="hover:text-foreground transition">
-                            {t('auth.privacyPolicy')}
-                        </a>
-                        <span className="text-border">·</span>
-                        <a href="https://vertesiahq.com/terms" className="hover:text-foreground transition">
-                            {t('auth.termsOfService')}
-                        </a>
-                        <span className="text-border">·</span>
-                        <RegionTag className="cursor-default" />
-                    </div>
-                </div>
+/** Shared generic authentication error notice. */
+export function SignInErrorNotice() {
+    const { t } = useUITranslation();
+    return (
+        <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>
     );

package/src/shell/login/SignupForm.tsx

@@ -11,18 +11,19 @@ interface CompanySizeOption {
 }
 
 interface SignupFormProps {
+    identity?: Pick<User, 'displayName' | 'email'>;
     onSignup: (data: SignupData, fbToken: string) => void;
     goBack: () => void;
 }
 
-export default function SignupForm({ onSignup, goBack }: SignupFormProps) {
+export default function SignupForm({ onSignup, goBack, identity }: SignupFormProps) {
     const { t } = useUITranslation();
     const [accountType, setAccountType] = useState<string | undefined>(undefined);
     const [companySize, setCompanySize] = useState<CompanySizeOption | undefined>(undefined);
     const [companyName, setCompanyName] = useState<string | undefined>(undefined);
     const [companyWebsite, setCompanyWebsite] = useState<string | undefined>(undefined);
     const [projectMaturity, setProjectMaturity] = useState<string | undefined>(undefined);
-    const [fbUser, setFbUser] = useState<User | undefined>(undefined);
+    const [fbUser, setFbUser] = useState<Pick<User, 'displayName' | 'email'> | undefined>(identity);
 
     const [error, setError] = useState<string | undefined>(undefined);
     const isCompany = accountType === 'company';
@@ -57,13 +58,17 @@ export default function SignupForm({ onSignup, goBack }: SignupFormProps) {
     ];
 
     useEffect(() => {
+        if (identity) {
+            setFbUser(identity);
+            return;
+        }
         const user = getFirebaseAuth().currentUser;
         if (!user) {
             console.error('No user found');
             return;
         }
         setFbUser(user);
-    }, []);
+    }, [identity]);
 
     const isValid = () => {
         if (!accountType) {