@wildo-ai/saas-frontend-lib 1.0.1 → 1.1.1

package/dist/esm/components/auth/Auth_Invitation.js

@@ -1,56 +1,298 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Navigate, useLocation, useNavigate } from 'react-router-dom';
 import { useFormContext } from 'react-hook-form';
-import { CorePresetNames, FrontendComponentType, UserInvitationLabel, } from '@wildo-ai/presets-components-models';
-import { AuthUtils, UserInvitationFormDtoSchema, } from '@wildo-ai/saas-models';
+import { CorePresetNames, FrontendComponentType, UserAuthLabel, UserInvitationLabel } from '@wildo-ai/presets-components-models';
+import { AuthMethod, AuthUtils, InvitationManagementMode, UserInvitationFormDtoSchema, } from '@wildo-ai/saas-models';
 import { ValidationMode } from '@wildo-ai/zod-decorators';
+import { startRegistration } from '@simplewebauthn/browser';
 import { Button, ButtonVariants_Variant } from '../../components/actions/button.js';
 import { AutomatedForm } from '../../components/form/automated/AutomatedForm.js';
 import { Alert, AlertDescription } from '../../components/overlays/containers/alert.js';
 import { PasswordStrengthIndicator, DEFAULT_PASSWORD_POLICY } from '../../components/auth/utils/PasswordStrengthIndicator.js';
+import { CredentialUsernameAutofillField } from '../../components/auth/utils/CredentialUsernameAutofillField.js';
+import { LabeledDivider } from '../../components/auth/utils/LabeledDivider.js';
 import { FormField } from '../../components/form/automated/FormField.js';
 import { FormLayout } from '../../components/resources/skeleton/FormLayout.js';
 import { SubmitButton } from '../../components/resources/skeleton/SubmitButton.js';
+import { LoadingSpinner } from '../../components/feedback/loading-spinner.js';
 import { Heading } from '../../components/typography/heading.js';
 import { Link } from '../../components/typography/link.js';
 import { Text } from '../../components/typography/text.js';
 import { CommonRoutePaths } from '../../core/runtime/routes.frontend.definitions.js';
 import { useI18n } from '../../core/i18n/useI18n.js';
+import { makeComponentLabelResolver } from '../../core/i18n/component-label-resolution.utils.js';
 import { getManualCallsHttpClient } from '../../core/requests/wildo-http-client-manual-calls.frontend.service.js';
 import { useAuthSession } from '../../core/security/useAuthSession.js';
+import { useError } from '../../core/errors/useError.js';
 import { useResolvedAuthConfig } from '../../core/security/useResolvedAuthConfig.js';
+import { resolvePostAuthRedirect } from '../../core/security/auth-redirect.frontend.utils.js';
 import { resolvePasswordViolationsToLabels, } from '../../components/auth/utils/resolvePasswordViolationsToLabels.js';
+import { AUTH_METHOD_COMPONENTS, sortMethodsByDisplayOrder, } from '../../components/auth/methods/auth-method-components.js';
 import { createComponentResolver } from '../../core/components-registry/component-resolver.frontend.helper.js';
-const InvitationFormTemplate = () => {
-    const resolvedAuth = useResolvedAuthConfig();
+/**
+ * First-factor methods the PUBLIC invitation-accept chooser knows how to render.
+ *
+ * The invitation-info endpoint returns whatever the org allows for a joining member,
+ * but the chooser can only surface methods that are usable BEFORE the invitee has an
+ * account/session:
+ *  - `PASSWORD` / `MAGIC_LINK` / `PASSKEY` → invitation-specific accept sub-forms that drive
+ *    `acceptInvitation` (set a password / email a link / enroll a passkey). NOT the login
+ *    method components — those authenticate an EXISTING account, which an invitee lacks. In
+ *    particular the login magic-link (`magicLinkSend`) is ACTIVE-only and never accepts the
+ *    invite; the passkey login component authenticates an already-enrolled credential.
+ *  - `ORG_SAML` / `ORG_OPENID_CONNECT` / `EXTERNAL_OAUTH2` → the shared login method
+ *    components, which are account-agnostic (full-page redirect) and consume the `INVITED`
+ *    membership via enterprise-SSO JIT / OAuth JIT (email match on the live membership, no token).
+ *
+ * Session-bound MFA methods (`SMS_OTP` / `EMAIL_OTP` / `TOTP`) are intentionally
+ * excluded — they need a session the invitee does not have.
+ */
+const INVITATION_RENDERABLE_METHODS = new Set([
+    AuthMethod.PASSWORD,
+    AuthMethod.ORG_SAML,
+    AuthMethod.ORG_OPENID_CONNECT,
+    AuthMethod.EXTERNAL_OAUTH2,
+    AuthMethod.MAGIC_LINK,
+    AuthMethod.PASSKEY,
+]);
+/**
+ * Method → display label for the alternative-method switcher buttons. Mirrors the
+ * login chooser (`Auth_Main`); these labels live in the `USER_AUTH` namespace and are
+ * resolved via `tAuth`. SAML and OIDC share the generic "org SSO" label.
+ */
+const METHOD_LABEL_MAP = {
+    [AuthMethod.PASSWORD]: UserAuthLabel.METHOD_PASSWORD,
+    [AuthMethod.MAGIC_LINK]: UserAuthLabel.METHOD_MAGIC_LINK,
+    [AuthMethod.PASSKEY]: UserAuthLabel.METHOD_PASSKEY,
+    [AuthMethod.ORG_SAML]: UserAuthLabel.METHOD_ORG_SSO,
+    [AuthMethod.ORG_OPENID_CONNECT]: UserAuthLabel.METHOD_ORG_SSO,
+    [AuthMethod.EXTERNAL_OAUTH2]: UserAuthLabel.METHOD_EXTERNAL_OAUTH2,
+};
+/**
+ * Password-method accept form body — first/last name + optional password with the
+ * strength indicator + a hidden username field for password-manager autofill.
+ *
+ * Rendered only when `PASSWORD` is the active chooser method. Password is OPTIONAL
+ * here (a passwordless accept creates the account and the user adds a credential
+ * later); the enclosing chooser owns the method-choice hint, so this template no
+ * longer renders a standalone "password is optional" aside.
+ */
+const InvitationFormTemplate = ({ invitationEmail, passwordPolicy, }) => {
     const { formState } = useFormContext();
-    const { tComponent } = useI18n({
+    const { tComponent, isReady } = useI18n({
         component: FrontendComponentType.PUBLIC_LAYOUTS_USER_INVITATION,
     });
     const t = (key) => tComponent(FrontendComponentType.PUBLIC_LAYOUTS_USER_INVITATION, key);
-    const passwordPolicy = resolvedAuth.passwordPolicy ?? DEFAULT_PASSWORD_POLICY;
-    return (_jsxs(FormLayout, { children: [_jsx(FormField, { name: "firstName" }), _jsx(FormField, { name: "lastName" }), _jsx(FormField, { name: "password" }), _jsx(FormField, { name: "confirmPassword" }), _jsx(Text, { className: "text-sm text-muted-foreground mb-element", children: t(UserInvitationLabel.PASSWORD_OPTIONAL_HINT) }), _jsx(PasswordStrengthIndicator, { fieldName: "password", policy: passwordPolicy, t: t }), formState.errors.root && (_jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: formState.errors.root.message }) })), _jsx(SubmitButton, { label: t(UserInvitationLabel.ACCEPT_INVITATION), submittingLabel: t(UserInvitationLabel.ACCEPTING_INVITATION), fullWidth: true })] }));
+    if (!isReady)
+        return null;
+    return (_jsxs(FormLayout, { children: [_jsx(CredentialUsernameAutofillField, { email: invitationEmail }), _jsx(FormField, { name: "firstName" }), _jsx(FormField, { name: "lastName" }), _jsx(FormField, { name: "password" }), _jsx(FormField, { name: "confirmPassword" }), _jsx(PasswordStrengthIndicator, { fieldName: "password", policy: passwordPolicy, t: t }), formState.errors.root && (_jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: formState.errors.root.message }) })), _jsx(SubmitButton, { label: t(UserInvitationLabel.ACCEPT_INVITATION), submittingLabel: t(UserInvitationLabel.ACCEPTING_INVITATION), fullWidth: true })] }));
+};
+/**
+ * Body of the magic-link accept sub-form (first/last name + send button). Split out so it
+ * can read `formState.errors.root` via `useFormContext` inside the `AutomatedForm` provider.
+ */
+const InvitationMagicLinkTemplate = ({ invitationEmail, t, tAuth }) => {
+    const { formState } = useFormContext();
+    return (_jsxs(FormLayout, { children: [invitationEmail && (_jsx(Text, { className: "text-sm text-muted-foreground text-center", children: invitationEmail })), _jsx(FormField, { name: "firstName" }), _jsx(FormField, { name: "lastName" }), formState.errors.root && (_jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: formState.errors.root.message }) })), _jsx(SubmitButton, { label: tAuth(UserAuthLabel.MAGIC_LINK_SEND), submittingLabel: tAuth(UserAuthLabel.MAGIC_LINK_SEND), fullWidth: true })] }));
+};
+/**
+ * Magic-link ACCEPT sub-form — the invitation-aware counterpart of the login
+ * `MagicLinkAuthMethod`.
+ *
+ * The login component sends a *login* magic link via `magicLinkSend`, which never accepts
+ * the invitation: `sendMagicLink` resolves users ACTIVE-only, so a not-yet-activated
+ * (`PENDING_INVITATION`) invitee gets no email, and `verifyMagicLink` rejects any non-ACTIVE
+ * user and never flips the INVITED membership. So it is NOT reused here.
+ *
+ * Instead this drives the purpose-built `acceptInvitation({ credentialMethod: MAGIC_LINK })`
+ * endpoint, which ACTIVATES the invitee + flips the membership FIRST and only THEN mints +
+ * emails the link — so the eventual `verifyMagicLink` click (now ACTIVE) establishes the
+ * session. First/last name are collected because the accept DTO requires them (the invitee's
+ * profile is seeded at acceptance). No session is issued (the parent switches to a terminal
+ * "check your email" state); the session lands when the invitee clicks the emailed link.
+ */
+const InvitationMagicLinkForm = ({ invitationEmail, disabled, onSubmit, t, tAuth }) => {
+    const formMethodsRef = useRef(null);
+    // Only the name fields — reuse the accept form schema's first/last (with their autocomplete
+    // decorators); the credential is the emailed link, not a password.
+    const schema = useMemo(() => UserInvitationFormDtoSchema.pick({ firstName: true, lastName: true }), []);
+    // On success the PARENT switches to the terminal "check your email" state — the accept consumed
+    // the token + accepted the invite, so there is NO in-place "sent" / "try another method" state
+    // (that would dead-end on the now-consumed token). Only errors are surfaced here.
+    const handleSubmit = useCallback(async (data) => {
+        formMethodsRef.current?.clearErrors('root');
+        try {
+            await onSubmit(data.firstName?.trim() || undefined, data.lastName?.trim() || undefined);
+        }
+        catch (e) {
+            formMethodsRef.current?.setError('root', {
+                type: 'server',
+                message: e?.message || t(UserInvitationLabel.UNEXPECTED_ERROR),
+            });
+        }
+    }, [onSubmit, t]);
+    return (_jsx(AutomatedForm, { schema: schema, defaultValues: { firstName: '', lastName: '' }, onSubmit: handleSubmit, validationMode: ValidationMode.ON_BLUR, disabled: disabled, onFormReady: (formMethods) => { formMethodsRef.current = formMethods; }, labels: {
+            fields: {
+                firstName: t(UserInvitationLabel.FIRST_NAME),
+                lastName: t(UserInvitationLabel.LAST_NAME),
+            },
+        }, layoutTemplate: () => (_jsx(InvitationMagicLinkTemplate, { invitationEmail: invitationEmail, t: t, tAuth: tAuth })) }));
+};
+/**
+ * Body of the passkey accept sub-form. The ceremony error is owned by the parent (the WebAuthn
+ * flow runs outside the form), so it is passed in rather than read from `formState`.
+ */
+const InvitationPasskeyTemplate = ({ invitationEmail, error, t }) => (_jsxs(FormLayout, { children: [invitationEmail && (_jsx(Text, { className: "text-sm text-muted-foreground text-center", children: invitationEmail })), _jsx(Text, { className: "text-sm text-muted-foreground text-center", children: t(UserInvitationLabel.PASSKEY_DESCRIPTION) }), _jsx(FormField, { name: "firstName" }), _jsx(FormField, { name: "lastName" }), error && (_jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: error }) })), _jsx(SubmitButton, { label: t(UserInvitationLabel.PASSKEY_CREATE), submittingLabel: t(UserInvitationLabel.PASSKEY_CREATING), fullWidth: true })] }));
+/**
+ * Passkey ENROLL-at-accept sub-form (Phase 3). Collects the invitee's name (the accept DTO
+ * requires it; the profile is seeded at acceptance), then hands off to the parent's `onSubmit`,
+ * which drives `acceptInvitation({credentialMethod: PASSKEY})` — the invitation token bootstraps
+ * the session and the response carries a WebAuthn registration challenge — runs the browser
+ * ceremony (`startRegistration`), and completes it against the authenticated
+ * `/auth/passkey/register/verify` route. Passkey enrollment is the GO-FORWARD credential, not
+ * this session's authenticator, so a cancelled/failed ceremony is non-fatal (the invitee is
+ * already signed in and can add a passkey later). Falls back to an informational message when the
+ * browser has no WebAuthn support.
+ */
+const InvitationPasskeyForm = ({ invitationEmail, disabled, error, onSubmit, t }) => {
+    const isSupported = typeof window !== 'undefined' && !!window.PublicKeyCredential;
+    const schema = useMemo(() => UserInvitationFormDtoSchema.pick({ firstName: true, lastName: true }), []);
+    if (!isSupported) {
+        return (_jsx(Alert, { children: _jsx(AlertDescription, { children: t(UserInvitationLabel.PASSKEY_UNAVAILABLE_HINT) }) }));
+    }
+    return (_jsx(AutomatedForm, { schema: schema, defaultValues: { firstName: '', lastName: '' }, onSubmit: (data) => onSubmit(data.firstName?.trim() || undefined, data.lastName?.trim() || undefined), validationMode: ValidationMode.ON_BLUR, disabled: disabled, labels: {
+            fields: {
+                firstName: t(UserInvitationLabel.FIRST_NAME),
+                lastName: t(UserInvitationLabel.LAST_NAME),
+            },
+        }, layoutTemplate: () => (_jsx(InvitationPasskeyTemplate, { invitationEmail: invitationEmail, error: error, t: t })) }));
 };
 export const PublicLayoutPreset_UserInvitation_Default = ({ token, email, }) => {
     const { auth, acceptInvitation } = useAuthSession();
+    // Central error handler — the password/passkey paths reach it via `acceptInvitation` (the context
+    // calls `handleError` in its catch); the magic-link path calls the HTTP client directly, so it wires
+    // `handleError` itself (below) to keep central logging + frontend-action execution symmetric.
+    const { handleError } = useError();
     const resolvedAuth = useResolvedAuthConfig();
-    const { tComponent, isReady } = useI18n({
-        component: FrontendComponentType.PUBLIC_LAYOUTS_USER_INVITATION,
-    });
+    // Load BOTH label namespaces: the invitation chrome (`USER_INVITATION`) plus the
+    // login method components' namespace (`USER_AUTH`) — the reused SAML/OIDC/OAuth2/
+    // magic-link components label themselves from `UserAuthLabel.*`, and we hand them
+    // `tAuth`. The array is memoized so `useI18n` doesn't re-request keys every render.
+    const i18nComponents = useMemo(() => [
+        FrontendComponentType.PUBLIC_LAYOUTS_USER_INVITATION,
+        FrontendComponentType.PUBLIC_LAYOUTS_USER_AUTH,
+    ], []);
+    const { tComponent, isReady } = useI18n({ component: i18nComponents });
     const navigate = useNavigate();
+    const location = useLocation();
     const formMethodsRef = useRef(null);
     const [isDeclining, setIsDeclining] = useState(false);
     const [declined, setDeclined] = useState(false);
-    const [acceptCompleted, setAcceptCompleted] = useState(false);
-    const t = (key) => tComponent(FrontendComponentType.PUBLIC_LAYOUTS_USER_INVITATION, key);
+    const [declineError, setDeclineError] = useState(null);
+    // Passkey enroll-at-accept runs a WebAuthn ceremony AFTER the session is issued. While it runs,
+    // the `auth.accessToken` guard below is suppressed so the component isn't unmounted mid-ceremony.
+    const [passkeyCeremonyInProgress, setPasskeyCeremonyInProgress] = useState(false);
+    const [passkeyError, setPasskeyError] = useState(null);
+    // Magic-link accept issues NO session — it emails a link + accepts the invite (consuming the
+    // token). On success we switch to a TERMINAL "check your email" state rather than leaving the
+    // chooser visible (whose other methods + decline would now dead-end on the consumed token).
+    const [magicLinkSent, setMagicLinkSent] = useState(false);
+    // In-flight flag for the magic-link accept (which bypasses the context's `auth.isLoading`), used
+    // to gate the decline / alternative-method buttons so a click can't race the single-use token.
+    const [magicLinkSubmitting, setMagicLinkSubmitting] = useState(false);
+    // Invitation-info discovery (SSO/SCIM-aware method set) keyed by the token.
+    const [invitationInfo, setInvitationInfo] = useState(null);
+    const [infoLoading, setInfoLoading] = useState(true);
+    const [infoError, setInfoError] = useState(null);
+    // User-selected active method; `null` → fall back to the display-ordered default.
+    const [activeMethod, setActiveMethod] = useState(null);
+    // Memoized on `tComponent` so `t`/`tAuth` keep a STABLE identity across renders — the schema
+    // (`invitationFormSchema`) and submit callbacks depend on them, and an unstable `t` would defeat
+    // those memos and churn the sub-form props (risking focus loss on a mid-entry parent re-render).
+    const t = useCallback((key) => tComponent(FrontendComponentType.PUBLIC_LAYOUTS_USER_INVITATION, key), [tComponent]);
+    // `tAuth` keeps `tComponent`'s key-path-on-miss behaviour, because THIS component
+    // renders its result directly at five sites with no fallback (the magic-link
+    // button, the "link sent" heading and body, the methods divider, the per-method
+    // label). Normalizing it to `''` would turn a missing label into an invisible
+    // button and an empty heading — strictly worse than a visible key path.
+    const tAuth = useCallback((key) => tComponent(FrontendComponentType.PUBLIC_LAYOUTS_USER_AUTH, key), [tComponent]);
+    // SEPARATE, miss-normalized resolver for the auth-method prop contract, which
+    // guarantees `''` on a miss so those components' `|| fallback` is live. Same
+    // split as `Auth_MfaChallenge`. Do NOT collapse the two: `tAuth` has six uses and
+    // only this one wants a normalized miss.
+    const tAuthForMethodComponent = useMemo(() => makeComponentLabelResolver(tComponent, FrontendComponentType.PUBLIC_LAYOUTS_USER_AUTH), [tComponent]);
     const loginPath = CommonRoutePaths.login;
-    const continuePath = auth.accessToken ? CommonRoutePaths.home : CommonRoutePaths.login;
-    const passwordPolicy = useMemo(() => resolvedAuth.passwordPolicy ?? DEFAULT_PASSWORD_POLICY, [resolvedAuth.passwordPolicy]);
+    // Where an already-authenticated invitee is forwarded — including one returning from
+    // an SSO/OAuth JIT round-trip. Mirrors `Auth_Main`: the SSO/OAuth method returns to
+    // this (auth) page, `Auth_AuthCallback` lands here after the code exchange, and this
+    // resolves the post-auth destination (a `redirect` param if present, else app home).
+    const postAuthRedirect = useMemo(() => resolvePostAuthRedirect(location.search), [location.search]);
+    // The invitation-info response is authoritative for the invitee email; fall back to
+    // the URL `email` param until it resolves.
+    const inviteeEmail = invitationInfo?.inviteeEmail ?? email;
+    // Prefer the org-merged policy the endpoint resolved (the SAME one the backend accept
+    // validates against) so the strength indicator + client pre-check match the org's real
+    // requirements; fall back to the app-level policy until invitation-info resolves / when
+    // the endpoint couldn't resolve it.
+    const passwordPolicy = useMemo(() => invitationInfo?.passwordPolicy ?? resolvedAuth.passwordPolicy ?? DEFAULT_PASSWORD_POLICY, [invitationInfo?.passwordPolicy, resolvedAuth.passwordPolicy]);
     const invitationFormSchema = useMemo(() => UserInvitationFormDtoSchema.refine((data) => !data.password || data.password === data.confirmPassword, { message: t(UserInvitationLabel.PASSWORD_MISMATCH), path: ['confirmPassword'] }), [t]);
     const handleFormReady = useCallback((formMethods) => {
         formMethodsRef.current = formMethods;
     }, []);
+    // Fetch invitation-info once per token. The endpoint reads the token WITHOUT
+    // consuming it, so a consumed/expired/invalid token surfaces as an error state.
+    useEffect(() => {
+        // Only an UNauthenticated invitee needs method discovery. If already authenticated
+        // (e.g. returning from an SSO/OAuth JIT round-trip that consumed the token), skip
+        // the fetch — the `accessToken` guard below forwards to the app, and hitting the
+        // now-consumed token would only 4xx.
+        if (!token || auth.accessToken) {
+            setInfoLoading(false);
+            return;
+        }
+        let cancelled = false;
+        setInfoLoading(true);
+        setInfoError(null);
+        getManualCallsHttpClient()
+            .getInvitationInfo(token)
+            .then((info) => {
+            if (!cancelled)
+                setInvitationInfo(info);
+        })
+            .catch((e) => {
+            if (!cancelled)
+                setInfoError(e?.message || t(UserInvitationLabel.UNEXPECTED_ERROR));
+        })
+            .finally(() => {
+            if (!cancelled)
+                setInfoLoading(false);
+        });
+        return () => { cancelled = true; };
+        // `t` is intentionally omitted from deps. It is memoized on the i18n component bundle (stable
+        // across ordinary renders), so omitting it does NOT capture a per-render-stale closure; it is
+        // omitted so a later i18n-bundle reload cannot re-trigger this one-shot discovery fetch. A rejected
+        // fetch therefore labels the error with the `t` bound when the effect first ran — an acceptable
+        // fallback in the narrow window before i18n is ready.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [token, auth.accessToken]);
+    // Renderable, display-ordered first-factor methods from the org's policy.
+    const availableMethods = useMemo(() => {
+        const methods = invitationInfo?.availableFirstFactorMethods ?? [];
+        return sortMethodsByDisplayOrder(methods.filter((m) => INVITATION_RENDERABLE_METHODS.has(m.method)));
+    }, [invitationInfo]);
+    // Every renderable method is actionable (PASSKEY now enrolls at accept — Phase 3). The empty
+    // state (route to sign-in) is reserved for an org exposing NO renderable first-factor method
+    // (e.g. an SSO-only org whose per-connection lookup did not resolve).
+    const hasActionableMethod = availableMethods.length > 0;
+    // Any accept in flight — gates the decline / alternative-method buttons so a click can't race the
+    // single-use token. Password sets `auth.isLoading` via the context; magic-link + passkey run
+    // outside it (`magicLinkSubmitting` / `passkeyCeremonyInProgress`).
+    const methodSubmitInFlight = auth.isLoading || magicLinkSubmitting || passkeyCeremonyInProgress;
+    // Default to the first renderable method in display order.
+    const defaultMethod = useMemo(() => availableMethods[0]?.method ?? null, [availableMethods]);
+    const currentActiveMethod = activeMethod ?? defaultMethod;
+    const alternativeMethods = availableMethods.filter((m) => m.method !== currentActiveMethod);
     useEffect(() => {
         if (!auth.mfaRequired || !auth.mfaSessionId)
             return;
@@ -58,14 +300,9 @@ export const PublicLayoutPreset_UserInvitation_Default = ({ token, email, }) =>
             navigate(CommonRoutePaths.enrollmentRequired, { replace: true });
             return;
         }
-        const invitationEmail = email || '';
+        const invitationEmail = inviteeEmail || '';
         navigate(`${CommonRoutePaths.mfaChallenge}?sessionId=${auth.mfaSessionId}&email=${encodeURIComponent(invitationEmail)}`, { replace: true });
-    }, [auth.mfaRequired, auth.mfaSessionId, auth.availableEnrollmentMethods, navigate, email]);
-    useEffect(() => {
-        if (!acceptCompleted || auth.isLoading || auth.mfaRequired)
-            return;
-        navigate(CommonRoutePaths.home, { replace: true });
-    }, [acceptCompleted, auth.isLoading, auth.mfaRequired, navigate]);
+    }, [auth.mfaRequired, auth.mfaSessionId, auth.availableEnrollmentMethods, navigate, inviteeEmail]);
     const handleInvitationSubmit = useCallback(async (data) => {
         formMethodsRef.current?.clearErrors('root');
         if (data.password) {
@@ -89,7 +326,8 @@ export const PublicLayoutPreset_UserInvitation_Default = ({ token, email, }) =>
                 lastName: normalizeText(data.lastName),
                 password: data.password || undefined,
             });
-            setAcceptCompleted(true);
+            // Session issued → the `auth.accessToken` guard forwards to the app (honoring
+            // `postAuthRedirect`); MFA-gated → the `mfaRequired` effect routes. Nothing to complete here.
         }
         catch (e) {
             formMethodsRef.current?.setError('root', {
@@ -98,13 +336,77 @@ export const PublicLayoutPreset_UserInvitation_Default = ({ token, email, }) =>
             });
         }
     }, [acceptInvitation, passwordPolicy, t, token]);
+    // Passkey enroll-at-accept: accept (bootstraps the session from the invitation token + returns a
+    // WebAuthn challenge) → run the browser ceremony → verify against the authenticated
+    // register-verify route. See `InvitationPasskeyForm`.
+    const handlePasskeySubmit = useCallback(async (firstName, lastName) => {
+        setPasskeyError(null);
+        setPasskeyCeremonyInProgress(true);
+        try {
+            const result = await acceptInvitation({
+                invitationToken: token,
+                firstName,
+                lastName,
+                credentialMethod: AuthMethod.PASSKEY,
+            });
+            const options = result?.passkeyRegistrationOptions;
+            if (options) {
+                // Session issued + a challenge. Enrollment failure is NON-FATAL — the invitation token
+                // already bootstrapped the session, so the invitee proceeds signed in and can add a
+                // passkey later in security settings.
+                try {
+                    const credential = await startRegistration({ optionsJSON: options });
+                    await getManualCallsHttpClient().passkeyRegisterVerify({ response: credential });
+                }
+                catch {
+                    // Swallow — the session is already issued, so a cancelled/failed ceremony (or the rare
+                    // cross-tab logout that clears the session mid-prompt and 401s the verify) is non-fatal:
+                    // releasing the flag hands control to the `accessToken` guard, which forwards when the
+                    // session survived and otherwise leaves the invitee on the accept screen (benign — they retry).
+                }
+            }
+            // Session path: releasing the flag (finally) → the `auth.accessToken` guard forwards to the
+            // app. MFA-gated path (no options): `acceptInvitation` set `mfaRequired` and the mfaRequired
+            // effect routes to enrollment (the invitee enrolls the passkey there via the existing route).
+        }
+        catch (e) {
+            setPasskeyError(e?.message || t(UserInvitationLabel.UNEXPECTED_ERROR));
+        }
+        finally {
+            setPasskeyCeremonyInProgress(false);
+        }
+    }, [acceptInvitation, token, t]);
+    // Magic-link accept: emails a link + accepts the invite (via the HTTP client directly — no
+    // session to manage, like the login magic-link). On success the render switches to the terminal
+    // "check your email" state; errors propagate to the sub-form's root error.
+    const handleMagicLinkSubmit = useCallback(async (firstName, lastName) => {
+        setMagicLinkSubmitting(true);
+        try {
+            await getManualCallsHttpClient().acceptInvitation({
+                invitationToken: token,
+                firstName,
+                lastName,
+                credentialMethod: AuthMethod.MAGIC_LINK,
+            });
+            setMagicLinkSent(true);
+        }
+        catch (e) {
+            // Route through the central error handler (logging + frontend-action execution, e.g. the global
+            // lockout UI) so a magic-link failure is handled identically to the password/passkey paths, which
+            // reach `handleError` via `acceptInvitation`. Then RE-THROW so the sub-form's own catch still
+            // renders the inline root error (the UX surface the user sees).
+            handleError(e, 'Invitation acceptance failed (magic link)', { credentialMethod: AuthMethod.MAGIC_LINK });
+            throw e;
+        }
+        finally {
+            // The flag just releases the gate; the inline root error is owned by the sub-form's catch.
+            setMagicLinkSubmitting(false);
+        }
+    }, [token, handleError]);
     const handleDecline = useCallback(async () => {
-        formMethodsRef.current?.clearErrors('root');
+        setDeclineError(null);
         if (!token) {
-            formMethodsRef.current?.setError('root', {
-                type: 'server',
-                message: t(UserInvitationLabel.INVALID_LINK),
-            });
+            setDeclineError(t(UserInvitationLabel.INVALID_LINK));
             return;
         }
         setIsDeclining(true);
@@ -113,24 +415,33 @@ export const PublicLayoutPreset_UserInvitation_Default = ({ token, email, }) =>
             setDeclined(true);
         }
         catch (e) {
-            formMethodsRef.current?.setError('root', {
-                type: 'server',
-                message: e?.message || t(UserInvitationLabel.UNEXPECTED_ERROR),
-            });
+            setDeclineError(e?.message || t(UserInvitationLabel.UNEXPECTED_ERROR));
         }
         finally {
             setIsDeclining(false);
         }
     }, [t, token]);
-    if (!isReady)
-        return null;
-    if (!token) {
-        return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "text-center space-y-item-xs mb-group", children: [_jsx(Heading, { children: t(UserInvitationLabel.ERROR_TITLE) }), _jsx(Text, { className: "max-w-sm mx-auto", children: t(UserInvitationLabel.INVALID_LINK) })] }), _jsx("div", { className: "text-center", children: _jsx(Link, { href: loginPath, children: t(UserInvitationLabel.LOGIN_LINK) }) })] }));
-    }
-    if (declined) {
-        return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "text-center space-y-item-xs mb-group", children: [_jsx(Heading, { children: t(UserInvitationLabel.DECLINE_SUCCESS_TITLE) }), _jsx(Text, { className: "max-w-sm mx-auto", children: t(UserInvitationLabel.DECLINE_SUCCESS_MESSAGE) })] }), _jsx("div", { className: "text-center", children: _jsx(Link, { href: continuePath, children: t(UserInvitationLabel.CONTINUE_LINK) }) })] }));
-    }
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "text-center space-y-item-xs mb-group", children: [_jsx(Heading, { children: t(UserInvitationLabel.TITLE) }), _jsx(Text, { className: "max-w-sm mx-auto", children: t(UserInvitationLabel.SUB_TITLE) }), email && (_jsx(Text, { className: "text-sm text-muted-foreground", children: email }))] }), _jsx(AutomatedForm, { schema: invitationFormSchema, defaultValues: {
+    // The reused method components self-handle their outcome (SSO/OAuth do a full-page
+    // redirect; magic-link shows its own "sent" state), so there is nothing to complete
+    // here. On the rare in-place success the `auth.accessToken` guard below lands the
+    // invitee in the app.
+    const handleMethodSuccess = useCallback((_response) => { }, []);
+    const handleMethodError = useCallback((_error) => { }, []);
+    /**
+     * Render the active first-factor method:
+     *  - `PASSWORD` / `MAGIC_LINK` / `PASSKEY` → invitation-specific accept sub-forms
+     *    (special-cased; never the login flow).
+     *  - `ORG_SAML` / `ORG_OPENID_CONNECT` / `EXTERNAL_OAUTH2` → the shared login method
+     *    component from the registry.
+     */
+    const renderActiveMethod = () => {
+        if (!currentActiveMethod)
+            return null;
+        const methodConfig = availableMethods.find((m) => m.method === currentActiveMethod);
+        if (!methodConfig)
+            return null;
+        if (currentActiveMethod === AuthMethod.PASSWORD) {
+            return (_jsx(AutomatedForm, { schema: invitationFormSchema, defaultValues: {
                     firstName: '',
                     lastName: '',
                     password: '',
@@ -142,10 +453,95 @@ export const PublicLayoutPreset_UserInvitation_Default = ({ token, email, }) =>
                         password: t(UserInvitationLabel.PASSWORD),
                         confirmPassword: t(UserInvitationLabel.CONFIRM_PASSWORD),
                     },
-                }, layoutTemplate: InvitationFormTemplate }), _jsxs("div", { className: "text-center mt-group space-y-item-sm", children: [_jsx(Button, { variant: ButtonVariants_Variant.OUTLINE, onClick: handleDecline, disabled: auth.isLoading || isDeclining, className: "w-full", children: isDeclining ? t(UserInvitationLabel.DECLINING_INVITATION) : t(UserInvitationLabel.DECLINE_INVITATION) }), _jsx(Link, { href: loginPath, children: t(UserInvitationLabel.LOGIN_LINK) })] })] }));
+                }, layoutTemplate: () => _jsx(InvitationFormTemplate, { invitationEmail: inviteeEmail, passwordPolicy: passwordPolicy }) }));
+        }
+        if (currentActiveMethod === AuthMethod.MAGIC_LINK) {
+            // NOT the reused login `MagicLinkAuthMethod` (which sends a LOGIN magic link that
+            // never accepts the invite and rejects a not-yet-ACTIVE invitee at verify). This
+            // drives `acceptInvitation({ credentialMethod: MAGIC_LINK })`, which activates + flips
+            // the membership before emailing the link. See `handleMagicLinkSubmit`.
+            return (_jsx(InvitationMagicLinkForm, { invitationEmail: inviteeEmail, disabled: auth.isLoading || isDeclining, onSubmit: handleMagicLinkSubmit, t: t, tAuth: tAuth }));
+        }
+        if (currentActiveMethod === AuthMethod.PASSKEY) {
+            // Passkey ENROLL-at-accept (Phase 3): the login `PasskeyAuthMethod` authenticates an
+            // EXISTING credential, so it is NOT reused. `InvitationPasskeyForm` drives
+            // `acceptInvitation({credentialMethod: PASSKEY})` (bootstraps the session + returns a
+            // WebAuthn challenge) then runs the ceremony + verify. See `handlePasskeySubmit`.
+            return (_jsx(InvitationPasskeyForm, { invitationEmail: inviteeEmail, disabled: auth.isLoading || isDeclining, error: passkeyError, onSubmit: handlePasskeySubmit, t: t }));
+        }
+        // ORG_SAML / ORG_OPENID_CONNECT / EXTERNAL_OAUTH2 — reuse the shared login method
+        // components. They are account-agnostic and self-wire their own hooks/redirects
+        // (full-page IdP redirect / OAuth JIT, which consume the INVITED membership); we only
+        // supply the invitee email + org method config. (PASSWORD, MAGIC_LINK, and PASSKEY are
+        // special-cased above — they need invitation-specific accept wiring, not login reuse.)
+        const MethodComponent = AUTH_METHOD_COMPONENTS[currentActiveMethod];
+        if (!MethodComponent)
+            return null;
+        const props = {
+            sessionId: '', // no session for a not-yet-activated invitee
+            email: inviteeEmail ?? '',
+            methodConfig,
+            onSuccess: handleMethodSuccess,
+            onError: handleMethodError,
+            factorLevel: 'first',
+            isLoading: auth.isLoading || isDeclining,
+            t: tAuthForMethodComponent,
+        };
+        return _jsx(MethodComponent, { ...props });
+    };
+    // Already authenticated — including returning from an SSO/OAuth JIT round-trip that
+    // consumed the invite — so forward the invitee into the app rather than re-showing the
+    // accept screen (mirrors `Auth_Main`). Guards against an already-signed-in user
+    // accepting a token minted for a different email.
+    // EXCEPTION: during passkey enroll-at-accept the token is issued BEFORE the WebAuthn ceremony
+    // runs, so suppress the forward until the ceremony finishes (else the component unmounts and
+    // the browser passkey prompt is cancelled); `handlePasskeySubmit` releases the flag when done.
+    // Ordered BEFORE the `!isReady` i18n gate (like `Auth_AuthCallback`): the `<Navigate>` renders no
+    // labels, so a slow/failed label load must not block forwarding an already-authenticated invitee.
+    if (auth.accessToken && !passkeyCeremonyInProgress) {
+        return _jsx(Navigate, { to: postAuthRedirect, replace: true });
+    }
+    if (!isReady)
+        return null;
+    if (!token) {
+        return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "text-center space-y-item-xs mb-group", children: [_jsx(Heading, { children: t(UserInvitationLabel.ERROR_TITLE) }), _jsx(Text, { className: "max-w-sm mx-auto", children: t(UserInvitationLabel.INVALID_LINK) })] }), _jsx("div", { className: "text-center", children: _jsx(Link, { href: loginPath, children: t(UserInvitationLabel.LOGIN_LINK) }) })] }));
+    }
+    if (declined) {
+        return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "text-center space-y-item-xs mb-group", children: [_jsx(Heading, { children: t(UserInvitationLabel.DECLINE_SUCCESS_TITLE) }), _jsx(Text, { className: "max-w-sm mx-auto", children: t(UserInvitationLabel.DECLINE_SUCCESS_MESSAGE) })] }), _jsx("div", { className: "text-center", children: _jsx(Link, { href: loginPath, children: t(UserInvitationLabel.CONTINUE_LINK) }) })] }));
+    }
+    // Magic-link accepted — the invite is consumed and a sign-in link was emailed. Terminal state:
+    // the invitee finishes by clicking the emailed link (no chooser/decline — the token is gone, so
+    // any other method would only 4xx).
+    if (magicLinkSent) {
+        return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "text-center space-y-item-xs mb-group", children: [_jsx(Heading, { children: tAuth(UserAuthLabel.MAGIC_LINK_SENT_TITLE) }), _jsx(Text, { className: "max-w-sm mx-auto", children: tAuth(UserAuthLabel.MAGIC_LINK_SENT_DESCRIPTION) }), inviteeEmail && (_jsx(Text, { className: "text-sm text-muted-foreground", children: inviteeEmail }))] }), _jsx("div", { className: "text-center", children: _jsx(Link, { href: loginPath, children: t(UserInvitationLabel.LOGIN_LINK) }) })] }));
+    }
+    if (infoLoading) {
+        return (_jsx("div", { className: "flex items-center justify-center py-group", children: _jsx(LoadingSpinner, { size: 40 }) }));
+    }
+    if (infoError || !invitationInfo) {
+        return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "text-center space-y-item-xs mb-group", children: [_jsx(Heading, { children: t(UserInvitationLabel.ERROR_TITLE) }), _jsx(Text, { className: "max-w-sm mx-auto", children: infoError || t(UserInvitationLabel.INVALID_LINK) })] }), _jsx("div", { className: "text-center", children: _jsx(Link, { href: loginPath, children: t(UserInvitationLabel.LOGIN_LINK) }) })] }));
+    }
+    // SCIM-managed org → informational only, NO password/method form (locked decision:
+    // the directory is the identity authority, so no local credential is set here).
+    if (invitationInfo.managementMode === InvitationManagementMode.SCIM) {
+        return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "text-center space-y-item-xs mb-group", children: [_jsx(Heading, { children: t(UserInvitationLabel.SCIM_MANAGED_TITLE) }), _jsx(Text, { className: "max-w-sm mx-auto", children: t(UserInvitationLabel.SCIM_MANAGED_MESSAGE) }), inviteeEmail && (_jsx(Text, { className: "text-sm text-muted-foreground", children: inviteeEmail }))] }), declineError && (_jsx(Alert, { variant: "destructive", className: "mb-group", children: _jsx(AlertDescription, { children: declineError }) })), _jsxs("div", { className: "text-center mt-group space-y-item-sm", children: [_jsx(Button, { variant: ButtonVariants_Variant.OUTLINE, onClick: handleDecline, disabled: isDeclining, className: "w-full", children: isDeclining ? t(UserInvitationLabel.DECLINING_INVITATION) : t(UserInvitationLabel.DECLINE_INVITATION) }), _jsx(Link, { href: loginPath, children: t(UserInvitationLabel.LOGIN_LINK) })] })] }));
+    }
+    // OPEN / SSO org → the method chooser.
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "text-center space-y-item-xs mb-group", children: [_jsx(Heading, { children: t(UserInvitationLabel.TITLE) }), _jsx(Text, { className: "max-w-sm mx-auto", children: t(UserInvitationLabel.SUB_TITLE) }), invitationInfo.organizationName && (_jsx(Text, { className: "text-sm text-muted-foreground", children: invitationInfo.organizationName })), inviteeEmail && (_jsx(Text, { className: "text-sm text-muted-foreground", children: inviteeEmail }))] }), hasActionableMethod ? (_jsxs(_Fragment, { children: [_jsx(Text, { className: "text-sm text-muted-foreground text-center mb-element", children: t(UserInvitationLabel.METHOD_CHOICE_HINT) }), renderActiveMethod(), alternativeMethods.length > 0 && (_jsxs(_Fragment, { children: [_jsx(LabeledDivider, { label: tAuth(UserAuthLabel.OTHER_METHODS_DIVIDER) }), _jsx("div", { className: "space-y-item", children: alternativeMethods.map((method) => {
+                                    const labelKey = METHOD_LABEL_MAP[method.method];
+                                    return (_jsx(Button, { variant: ButtonVariants_Variant.OUTLINE, className: "w-full", onClick: () => { setActiveMethod(method.method); setPasskeyError(null); }, disabled: methodSubmitInFlight || isDeclining, children: labelKey ? tAuth(labelKey) : method.method }, method.method));
+                                }) })] }))] })) : (
+            /*
+              No renderable first-factor method on this screen — a valid state, not an error. The
+              common case is an SSO-only org whose invitee arrives before directory provisioning: the
+              token-keyed endpoint omits ORG_SAML/ORG_OPENID_CONNECT when no per-connection lookup
+              resolved, yielding an empty set with mode OPEN. Route the invitee to the sign-in page,
+              where email→domain SSO resolution works and the enterprise / OAuth JIT consumes the invite.
+            */
+            _jsx(Alert, { children: _jsx(AlertDescription, { children: t(UserInvitationLabel.NO_METHOD_AVAILABLE_HINT) }) })), declineError && (_jsx(Alert, { variant: "destructive", className: "mt-group", children: _jsx(AlertDescription, { children: declineError }) })), _jsxs("div", { className: "text-center mt-group space-y-item-sm", children: [_jsx(Button, { variant: ButtonVariants_Variant.OUTLINE, onClick: handleDecline, disabled: methodSubmitInFlight || isDeclining, className: "w-full", children: isDeclining ? t(UserInvitationLabel.DECLINING_INVITATION) : t(UserInvitationLabel.DECLINE_INVITATION) }), _jsx(Link, { href: loginPath, children: t(UserInvitationLabel.LOGIN_LINK) })] })] }));
 };
 export function Auth_Invitation({ preset = CorePresetNames.DEFAULT, ...props }) {
     const Component = createComponentResolver(FrontendComponentType.PUBLIC_LAYOUTS_USER_INVITATION, 'Auth_Invitation')(preset);
     return _jsx(Component, { ...props });
 }
-//# sourceMappingURL=Auth_Invitation.js.map
+//# sourceMappingURL=Auth_Invitation.js.map