src/login/pages/Login.useScript.tsx (1)

58-75: Align guard comment with actual condition (optional)

The comment says “Only insert script if enableWebAuthnConditionalUI is true”, but the guard actually checks for presence of WebAuthn challenge data (challenge, userVerification, rpId, createTimeout). To avoid confusion, you can update the comment to reflect what’s really gating:

-        // Only insert script if enableWebAuthnConditionalUI is true
+        // Only insert script once WebAuthn challenge data is present

This keeps behavior as‑is while making the intent clearer (same applies to the LoginPassword hook).

src/login/pages/LoginPassword.tsx (1)

10-33: WebAuthn UI integration is consistent; tiny optional tweak on authenticator check

The useScript wiring and conditional WebAuthn block mirror the Login/WebauthnAuthenticate patterns and look correct: hidden webauth + authn_select forms and a dedicated button with the expected authButtonId.

Minor nit: the authn_select guard

authenticators !== undefined && Object.keys(authenticators).length !== 0

is effectively equivalent to just checking authenticators, since the object will always have at least the authenticators key. If you actually want to gate on having at least one credential, consider:

authenticators?.authenticators.length

Not required for correctness, but a bit clearer.

Also applies to: 110-139

src/login/pages/Login.tsx (1)

10-33: Login WebAuthn wiring matches other flows; consider small cleanup on authenticator guard

The useScript integration and conditional WebAuthn section align with the LoginPassword/WebauthnAuthenticate implementations and should work as expected with the new KC context fields.

As in LoginPassword.tsx, the condition

authenticators !== undefined && Object.keys(authenticators).length !== 0

doesn’t really filter out the “no authenticators” case—Object.keys will still be ["authenticators"] even when the inner array is empty. If you want to require at least one credential, you can simplify/clarify to:

authenticators?.authenticators.length

Also, the WebAuthn JSX block is now duplicated between Login and LoginPassword; extracting a tiny shared fragment (e.g. WebauthnConditionalBlock) would reduce duplication, but that’s optional.

Also applies to: 204-233

src/login/KcContext/KcContext.ts (1)

175-218: KcContext WebAuthn extensions are consistent; optional type tightening

The added WebAuthn fields on Login, LoginUsername, LoginPassword, and LoginPasskeysConditionalAuthenticate line up with how the new hooks and mocks consume them, and keep existing pages backward‑compatible via optional properties where needed.

If you want stricter typing, you could consider reusing the same userVerification union (UserVerificationRequirement | "not specified") used on WebauthnAuthenticate/LoginUsername for Login, LoginPassword, and LoginPasskeysConditionalAuthenticate instead of plain string, but that’s purely a type‑safety nicety.

Also applies to: 329-359, 361-385, 611-635

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

src/login/pages/LoginPassword.useScript.tsx (1)

63-81: Add missing dependencies to useEffect array.

The effect uses authButtonId (line 75) and insertScriptTags (line 78) but doesn't list them in the dependency array (line 80). While authButtonId is a constant and insertScriptTags should be stable from useCallback, React expects all dependencies to be declared.

-    }, [isFetchingTranslations, challenge, userVerification, rpId, createTimeout]);
+    }, [isFetchingTranslations, challenge, userVerification, rpId, createTimeout, authButtonId, insertScriptTags]);

This satisfies the exhaustive-deps rule and makes dependencies explicit.

src/login/pages/Login.useScript.tsx (1)

64-82: Add missing dependencies to useEffect array.

Same issue as in LoginPassword.useScript.tsx: the effect uses authButtonId (line 76) and insertScriptTags (line 79) but they're not in the dependency array (line 81).

-    }, [isFetchingTranslations, challenge, userVerification, rpId, createTimeout]);
+    }, [isFetchingTranslations, challenge, userVerification, rpId, createTimeout, authButtonId, insertScriptTags]);

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

src/login/pages/LoginPassword.tsx (1)

114-143: Consider extracting shared WebAuthn UI block.

The WebAuthn UI block (lines 114–143) is nearly identical to the one in Login.tsx (lines 208–237). Extracting this into a shared component would eliminate ~30 lines of duplication and ensure consistency.

Example structure:

// src/login/components/WebAuthnAuthenticator.tsx
export function WebAuthnAuthenticator(props: {
    webAuthnButtonId: string;
    url: { loginAction: string };
    authenticators?: { authenticators: Array<...> };
    kcClsx: KcClsx;
    msgStr: (key: string) => string;
}) {
    const { webAuthnButtonId, url, authenticators, kcClsx, msgStr } = props;
    return (
        <>
            <form id="webauth" action={url.loginAction} method="post">
                {/* hidden inputs */}
            </form>
            {/* authenticators form */}
            <input id={webAuthnButtonId} ... />
        </>
    );
}

Then use <WebAuthnAuthenticator ... /> in both Login.tsx and LoginPassword.tsx.

src/login/pages/Login.useScript.tsx (1)

1-71: Consider extracting shared useScript logic.

Login.useScript.tsx and LoginPassword.useScript.tsx are nearly identical (~70 lines of duplication). The only difference is the componentOrHookName parameter passed to useInsertScriptTags. Consider extracting the shared logic into a common hook:

// src/login/pages/shared/useWebAuthnScript.tsx
export function useWebAuthnScript(params: { 
    webAuthnButtonId: string; 
    kcContext: KcContextLike; 
    i18n: I18nLike;
    componentOrHookName: string;
}) {
    // ... current implementation
}

// Login.useScript.tsx
export function useScript(params: { webAuthnButtonId: string; kcContext: KcContextLike; i18n: I18nLike }) {
    return useWebAuthnScript({ ...params, componentOrHookName: "Login" });
}

// LoginPassword.useScript.tsx
export function useScript(params: { webAuthnButtonId: string; kcContext: KcContextLike; i18n: I18nLike }) {
    return useWebAuthnScript({ ...params, componentOrHookName: "LoginPassword" });
}

Note: This was previously discussed; awaiting maintainer decision.

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro