Login-box: passkey button hover/focus colour is indistinguishable from disabled, and sticks after a tap on touch devices

[airowe]

The "Sign in with passkey" button's hover/focus state is visually indistinguishable from a disabled button, and on touch devices it sticks after a tap. A user who taps the button and then cancels the native passkey sheet is left looking at a button that appears dead.

Environment: @frontegg/react-native 1.2.21 · FronteggSwift 1.3.14 · frontegg-android 1.3.36 · embedded mode · hosted-login build e42e9ff · admin-box 7.119.0

Confirmed on iOS WebKit, Android Chromium, and desktop Chromium.

Cause

The classic theme defaults themeV2.loginBox.passkeysButtonTheme to:

hover/focus: { background: "#E9ECF3" }

On a black button with white text, that renders as light grey with near-invisible text — the standard visual language for "disabled".

Touch browsers apply :hover on tap and keep it applied until the next in-page touch. The passkey cancel happens in native UI, so the page never receives another touch, and the hover state persists indefinitely. A successful ceremony navigates away, which is why only the cancel / no-credential path surfaces it.

Reproduction (no device or WebAuthn needed)

1. Open the login box in a desktop browser.
2. Hover the "Sign in with passkey" button — no click.
3. It turns light grey with faded text, identical to disabled.
4. Move the pointer away / click another field → returns to black.

On a touch device: tap the button, dismiss the native sheet, and the grey persists. Tapping the email field restores it. The button is still functional throughout — a second tap re-fires the ceremony — it just doesn't look it.

For contrast, the "Continue" button's hover sensibly darkens (rgb(46,116,199) → rgb(39,98,169)). The passkey button's hover goes black → near-white.

Related findings

While attempting a theme-level workaround:

• palette.secondary.hover appears to be ignored for this button (setting it to black still produced the grey).
• Generic components.MuiButton.styleOverrides under loginBox isn't consumed either.
• The emitted CSS covers containedSecondary:hover and :focus — the :focus half is why the state survives a tap so stubbornly, since the tapped button keeps focus until something else takes it.

Suggested fix

Either or both:

1. Default the passkey button's hover to a colour that darkens rather than lightens, matching the "Continue" button's behaviour, so it never reads as disabled.
2. Gate hover styling behind @media (hover: hover) so touch devices never apply it at all.

Honouring palette.secondary.hover for this button would also give integrators a way to fix it themselves.

Note

This was included as context in frontegg-ios-swift#288. The SDK-side escaping bug in that report was fixed and shipped in 1.3.14 (thank you), but this login-box half wasn't addressed and the issue was closed. Refiling here since it's login-box CSS rather than iOS SDK code, and it reproduces on Android too — happy to move it if there's a better repo for login-box reports.