Login custom area text field XHR event interferes with login process

[apryamostanov]

Description of the bug

In Vaadin 24.2, Custom Form area was added into Login component (https://vaadin.com/docs/latest/components/login#custom-form-area). If I put text area inside it (e.g. OTP field), when I press Login button - focus is changed and sync event is fired resulting in XHR. At same time Login form submit is processed. XHR interferes with login process and cancels resource fetch from service worker. This is not visible locally/on fast connections as XHR is processed fast. But on slower connections it results in failure to login. You can simulate this by enabling throttling in Chrome.

Expected behavior

Login form with TextField in Custom Area should work consistently and there should not be cancelled requests.

Minimal reproducible example

TBD

Versions

• Vaadin / Flow version: 24.2
• Java version: 17
• OS version: Mac OS 14.1.2
• Browser version (if applicable): Chrome 122.0.6261.94 (Official Build) (arm64)
• Application Server (if applicable): Spring Boot
• IDE (if applicable): N/A

[apryamostanov]

I spent 3 days debugging this issue, and in the end I am eliminating usage of Login View custom area. It is anyway incomplete and not useful in its current implementation - not compatible with Spring Security.

[mcollovati]

I noticed the same issue yesterday by testing an application created with Vaadin CLI (npx @vaadin/cli init login-form --auth). To reproduce, start the application and try to log in with the wrong credentials: you'll see two requests (POST + UIDL) before being redirected to login view with error parameter.

This is the UIDL request sent in parallel with the login POST request

{
    "csrfToken": "fdfa01a3-7cf3-4bcf-b8d9-a1f906bcb6c0",
    "rpc": [
        {
            "type": "mSync",
            "node": 4,
            "feature": 1,
            "property": "disabled",
            "value": true
        },
        {
            "type": "event",
            "node": 4,
            "event": "login",
            "data": {
                "event.detail.username": "xxxxx",
                "event.detail.password": "xxxxx"
            }
        }
    ],
    "syncId": 2,
    "clientId": 2
}

[web-padawan]

This is the UIDL request sent in parallel with the login POST request

This request comes from the vaadin-login-overlay web component and it contains notification about disabled property set to true and then the subsequent login event. So in this regard the web component works as expected.

I couldn't reproduce the original issue with a cancelled request. An example project would be appreciated.

[apryamostanov]

Hi @web-padawan , reg. original issue - let me rephrase it fully. The root cause is that fields in Custom Login Area are not in same Login Form, so events are needed to sync them with backend. These events interfere with POST. My suggestion - it needs to be documented in the Component documentation.

[web-padawan]

Thank you, now I understand the problem. Yes, this definitely needs to be documented. I will create a PR to docs.

[apryamostanov]

Thank you @web-padawan . I still feel there is an issue as described by @mcollovati : https://github.com/vaadin/flow-components/issues/6098#issuecomment-1980190986 Basically UIDL interferes with form post. Can it be avoided?

[mcollovati]

My concern is about having the UIDL request even if the form "action" attribute is set. But perhaps this is by design

[mcollovati]

An update on a similar issue: https://github.com/vaadin/flow/issues/12640#issuecomment-2348525521