Walkthrough

The changes introduce WebAuthn conditional UI support across multiple login pages by adding an enableWebAuthnConditionalUI feature flag, expanding internationalization keys, importing passkey authentication initialization, refactoring input serialization with JSON.stringify, and implementing one-time event listeners. Additionally, a login UI zip URL constant is updated to a new commit hash.

Changes

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• Add WebAuthn/Passkey support to Login and LoginPassword flows #960: Directly implements the same WebAuthn/passkey support features including KcContext field additions, internationalization key expansions, useScript wiring changes, and one-time event listener modifications.

Poem

🐰 Whiskers twitch with passkey glee,
WebAuthn hops from page to key,
One-time listeners, JSON dreams,
Conditional UI's gleaming schemes,
Safer logins, clever and bright,
No passwords needed—hopping right! 🔐✨

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

• 📝 Generate docstrings

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

67-79: enableWebAuthnConditionalUI is checked in the effect body but missing from the dependency array.

Since kcContext is server-provided and immutable during the component lifecycle, this won't cause a runtime bug. However, it's inconsistent with React's exhaustive-deps rule and could mislead future maintainers.

Proposed fix

-    }, [isFetchingTranslations]);
+    }, [isFetchingTranslations, kcContext.enableWebAuthnConditionalUI]);

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

34-65: The script injection logic is nearly identical across Login.useScript.tsx, LoginUsername.useScript.tsx, and LoginPassword.useScript.tsx.

All three files share the same input construction, authenticateByWebAuthn click handler, initAuthenticate call, and useEffect gating logic — differing only in componentOrHookName and the KcContext type assertion. Consider extracting a shared helper to reduce the maintenance surface.

• X
• Mastodon
• Reddit
• LinkedIn