Skip to content

fix: Fix for LoginUsername page for passkeys authentication#954

Merged
garronej merged 1 commit intokeycloakify:mainfrom
waynemorphic:chore-login-username-passkeys
Nov 11, 2025
Merged

fix: Fix for LoginUsername page for passkeys authentication#954
garronej merged 1 commit intokeycloakify:mainfrom
waynemorphic:chore-login-username-passkeys

Conversation

@waynemorphic
Copy link
Copy Markdown
Contributor

@waynemorphic waynemorphic commented Nov 10, 2025 •
edited by coderabbitai Bot
Loading

Replace <a> tag with input tag as used in Keycloak. Current implementation with href=# in <a> tag redirects nowhere. The browser (Firefox) also freezes after clicking the Sign in with Passkey button.

Keycloak impl

<input id="authenticateWebAuthnButton" 
           type="button" 
           autofocus="autofocus"
           value="${kcSanitize(msg("passkey-doAuthenticate"))}"
           class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}"
/>

Summary by CodeRabbit

  • Bug Fixes
    • Updated the passkey authentication control on the login page with enhanced button styling and improved interaction patterns.

@waynemorphic
fix: Fix for LoginUsername page for passkeys authentication. Replaced…
97f3abd 
… a tag with input as used in Keycloak. href=# in a tag redirects nowhere
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Nov 10, 2025 •
edited
Loading

Walkthrough

The authentication control in the LoginUsername component is refactored from an anchor element to an input button element. The button retains the same label and conditional placement while adopting button-specific attributes and styling classes.

Changes

Cohort / File(s) Summary
Passkey Authentication UI
src/login/pages/LoginUsername.tsx		 Replaced <a> element with href="#" with <input type="button"> element; updated label retrieval from msg() to msgStr(); added kcButton and styling classes (default, large, block)

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

  • Single file change with straightforward element type substitution
  • No logic modifications or architectural changes
  • Verify msgStr() function behaves identically to msg() for label retrieval
  • Confirm CSS classes (kcButton, default, large, block) render correctly

Poem

🐰 A button hops where a link once stood,
No more the anchor's wooden good!
With kcButton's fresh, stylish grace,
The passkey dances in its place! 🎯

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. You can run @coderabbitai generate docstrings to improve docstring coverage.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately describes the main change: replacing an anchor element with an input button for passkeys authentication on the LoginUsername page, which directly addresses the browser freeze issue.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 831d83b and 97f3abd.

📒 Files selected for processing (1)
  • src/login/pages/LoginUsername.tsx (1 hunks)
🔇 Additional comments (1)
src/login/pages/LoginUsername.tsx (1)

178-183: LGTM! Semantic fix aligns with Keycloak's implementation.

The change from <a href="#"> to <input type="button"> correctly addresses the Firefox freeze issue by using a proper button element for a non-navigational action. The preserved id ensures event handlers from useScript will attach correctly.

Note: Keycloak's implementation includes autofocus="autofocus", which is omitted here. This is likely intentional to avoid focus conflicts with the username input field (line 110), but please verify this aligns with your UX requirements.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@garronej
Copy link
Copy Markdown
Collaborator

garronej commented Nov 11, 2025

Thank you! That's somve very valuable fix!

If I may ask, could you also apply this change here? https://github.com/keycloakify/login-ui

Thanks in advance.

@allcontributors add @waynemorphic for code

@garronej garronej merged commit bfd23d4 into keycloakify:main Nov 11, 2025
3 checks passed
@allcontributors allcontributors Bot mentioned this pull request Nov 11, 2025
Merged
@allcontributors
Copy link
Copy Markdown
Contributor

allcontributors Bot commented Nov 11, 2025

@garronej

I've put up a pull request to add @waynemorphic! 🎉

@waynemorphic
Copy link
Copy Markdown
Contributor Author

waynemorphic commented Nov 11, 2025

@garronej sure thing 👍

@waynemorphic waynemorphic mentioned this pull request Nov 11, 2025
Merged
@coderabbitai coderabbitai Bot mentioned this pull request Nov 24, 2025
Merged
@coderabbitai coderabbitai Bot mentioned this pull request Jan 9, 2026
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@waynemorphic @garronej