Login component | Vaadin components

Docs
1

This topic is the discussion thread for the Vaadin documentation page Login component | Vaadin components.

Questions, feedback, and comments are welcome here.

2

How to set width LoginForm, please help me

3 
vaadin-login-form-wrapper {
  max-width: none;
  width: 500px;
}


4

Thanks Mr/Ms Jouni Koivuviita supported

5

Hi, Mr/Ms Jouni Koivuviita,

I have a question, how to change font-size for i18nHeader.setTitle. I want to size is smaller . Please instruction me change it

6

Is there a way to set the username and password with ts?

I know, it's a bad idea. But I like to use that for testing (drop box with several users under the login).

7

So, the new login component is really nice. But I have a question... How do I validate the "One Time Code" before login Action?


LoginOverlay loginOverlay = new LoginOverlay();

IntegerField code = new IntegerField("One-time code");

code.getElement().setAttribute("name", "code");

loginOverlay.getCustomFormArea().add(code);

loginOverlay.setAction("login");

8

That "One-time code" field is a custom input field in your application, and it is up to your application logic to handle such 2-factor-authentication (2FA) codes. There isn't anything built-in in Vaadin for that.

9

This blog post might be helpful: https://vaadin.com/blog/how-we-enabled-mfa-passkey-and-passwordless-using-the-webauthn-api

10

Thanks for the reply. I understand that its up to the application logic to validate. But the problem is where do i put the logic?

loginOverlay.setAction("login") is executed while checking only the username and password(Im not sure how this is done). So i want the same thing for my One-time-code.

11

how to add LDAP login in vaadin application?

12

Perhaps this tutorial is helpful: https://dzone.com/articles/spring-security-with-ldap-authentication

13

hello, who can tell me why always redirection to below URL when login successfully?

localhost:8081/line-awesome/svg/credit-card.svg?continue



14

It is Spring Security. https://stackoverflow.com/questions/75222930/spring-boot-3-0-2-adds-continue-query-parameter-to-request-url-after-login

15

There you go to get OTP value: authentication.getDetails().toString()

16

The most simple issue is not covered:

Where is the check if login-data is valid to be implemented ?

For example, there is an oracle database, where users and their passwords (encrypted or not is not relevant) for the application are managed.

17

Hi, the point

The basic Login component can be used to create log-in pages featuring rich content.

Does' nt work for me, i can't set a custom background :S

And I have seen these posts as well

  • https://stackoverflow.com/questions/75027079/having-trouble-setting-background-image-on-vaadin-login-form
  • https://stackoverflow.com/questions/75041999/adding-background-image-to-login-page-with-overlay
18

Here is a video showing how to implement login using Spring: https://youtu.be/dZuy1v9isXE?si=4tCHny7UYjGWQuMf

19

From above:

The log-in button is disabled when clicked, to prevent multiple submissions. To restore it, call component.setEnabled(true).

Using LoginOverlay I can't find a ref. to the login button anywhere, not from AbstractLogin.LoginEvent or anywhere else.

Any help would be appreciated.

Cheers.

20

As simple as setting component.setEnabled(true). component being the parent, so in my case LoginOverlay.