Custom Login Form?

Hi all! I am new to Vaadin and I am currently trying to create my own login form. I’m using Java 17, Spring Boot 3 and Vaadin 24. I’m not happy with the default implementation of com.vaadin.flow.component.login.LoginForm. Question - is there an example of creating a custom login form with integration with Spring Security? I feel like I’ve searched all over the internet and still haven’t found anything useful. The lack of documentation and examples is very repulsive to use Vaadin, because “step left, step right” and Vaadin “turns into a pumpkin”…

Moreover, I found a lot of people who asked the same question. The best solution I’ve found is to “hack” the original LoginForm and modify it further. I sincerely believe that if this is a normal solution for such a simple task, then Vaadin is only suitable for children’s projects in the spirit of “Hello World”…

What would you like to change in the LoginForm?

I’m asking because you could either customize the from or create your own

I would like to change fields and buttons. For example, I’d like to add a “Register” button.

For example, I have now created a class like this:

`public class LoginForm extends FormLayout {

private final TextField phoneNumberField;
private final PasswordField passwordField;
private final Button loginButton;
private final Button registerButton;

public LoginForm() {
    phoneNumberField = new TextField("Phone number");
    passwordField = new PasswordField("Password");
    loginButton = new Button("Login");
    registerButton = new Button("Register");

    add(
            phoneNumberField,
            passwordField,
            loginButton,
            registerButton
    );
}

}
`
But I don’t know what to do next, and how to make this form work… More precisely, I know, but I don’t know how to do it specifically with Vaadin, and I didn’t find information on the Internet :frowning_with_open_mouth:

The point is that you have to create a from that posts to /login because this will be handled by Spring Security

You have multiple ways you archive your goal depending on your understanding of the different frameworks you are using.

  1. Use the default Login and customize it with Javascript
  2. Use Standard components and do your own security integration based on the underlying spring security classes
  3. Create a native form component and inputs with the element API that posts to /login as Simon said
  4. Create your own lit or Javascript based frontend component.
    And probably many more.