Custom Login Form?

Flow
1

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”…

2

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”…

3

What would you like to change in the LoginForm?

4

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

5
6

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

1 Like
7

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:

8

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

9

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.
10

how can i create the form that post to “/login”…i cant seen to find a way to do this in the docs. i tried using the element API but i am unable to create the HTML tag…it is mentioned in the docs that i can customize further with Lit Template. but that should not be necessary for such a simple task

11

It is mentioned here Login | Components | Vaadin Docs, but it is indeed not clear enough.

You can use the setAction method to define the path for the POST request

https://vaadin.com/api/platform/24.4.6/com/vaadin/flow/component/login/AbstractLogin.html#setAction(java.lang.String)

2 Likes
12

This uses the vaadin inbuilt LoginForm component…am talking about creating a completely custom component with two inputs fields(username/password) and submit button which Post data to a specific URL on the client side

13

You can find example of how to do custom form here

2 Likes