Docs

Docs

Login

Source: TypeScript / Java
Login is a component that contains a log-in form. You can use it to authenticate the user with a username and password.

Login is a component that contains a log-in form. You can use it to authenticate the user with a username and password. It’s compatible with password managers, supports internationalization, and works on all device sizes.

Open in a
new tab
LoginForm loginForm = new LoginForm();
add(loginForm);

Basic Login Component

The basic Login component consists of a title (i.e., "Log In"), two input fields ("Username" and "Password"), and two buttons ("Log In" and "Forgot Password").

You can customize the form’s title and labels using internationalization.

Open in a
new tab
LoginI18n i18n = LoginI18n.createDefault();

LoginI18n.Form i18nForm = i18n.getForm();
i18nForm.setTitle("Kirjaudu sisään");
i18nForm.setUsername("Käyttäjänimi");
i18nForm.setPassword("Salasana");
i18nForm.setSubmit("Kirjaudu sisään");
i18nForm.setForgotPassword("Unohtuiko salasana?");
i18n.setForm(i18nForm);

LoginI18n.ErrorMessage i18nErrorMessage = i18n.getErrorMessage();
i18nErrorMessage.setTitle("Väärä käyttäjätunnus tai salasana");
i18nErrorMessage.setMessage(
        "Tarkista että käyttäjätunnus ja salasana ovat oikein ja yritä uudestaan.");
i18n.setErrorMessage(i18nErrorMessage);

LoginForm loginForm = new LoginForm();
loginForm.setI18n(i18n);

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

Open in a
new tab
// See login-rich-content.css
addClassName("login-rich-content");

LoginForm loginForm = new LoginForm();
loginForm.getElement().getThemeList().add("dark");
Note
Password Managers
Login is incompatible with password managers if placed inside another component’s shadow root. [1] This isn’t an issue, though, when using Login’s modal overlay.

Login features its own modal overlay. Use it to create simple log-in pages — which are full-screen on mobile devices — or to handle authentication without a dedicated log-in page. You can also use it to handle re-authentication when the user’s session has expired.

The overlay can be opened programmatically or through user interaction (e.g., by using a log-in button).

Open in a
new tab
LoginOverlay loginOverlay = new LoginOverlay();
add(loginOverlay);

Button login = new Button("Log in");
login.addClickListener(event -> loginOverlay.setOpened(true));

The overlay has a header and the log-in form. By default, the header contains placeholders for the application’s title and description. Both properties are configurable.

Open in a
new tab
LoginOverlay loginOverlay = new LoginOverlay();
loginOverlay.setTitle("TaskMob");
loginOverlay.setDescription("Built with ♥ by Vaadin");

Custom Form Area

The overlay provides a custom form area for adding fields in addition to username and password. This area is placed above the "Submit" button. Use the name attribute to ensure the custom field’s value is submitted with the form.

Open in a
new tab
LoginOverlay loginOverlay = new LoginOverlay();
IntegerField code = new IntegerField("One-time code");
code.getElement().setAttribute("name", "code");
loginOverlay.getCustomFormArea().add(code);

The footer area can be used for placing additional custom content, such as text, buttons, etc. Adding components after the overlay is opened is not supported.

Open in a
new tab
LoginOverlay loginOverlay = new LoginOverlay();
Paragraph text = new Paragraph("Never tell your password to anyone");
text.addClassName(LumoUtility.TextAlignment.CENTER);
loginOverlay.getFooter().add(text);

Validation

Login shows an error message when authentication fails. The error message includes a title in addition to the message. It’s displayed directly below the title of the form.

Open in a
new tab
loginOverlay.setError(true);

The error message is customizable using internationalization. It should contain instructions on how to resolve the problem.

More information can be provided to the user, for example, by linking to a page with helpful material or by displaying contact information.

Open in a
new tab
LoginI18n i18n = LoginI18n.createDefault();
i18n.setAdditionalInformation(
        "Contact admin@company.com if you're experiencing issues logging into your account");

LoginOverlay loginOverlay = new LoginOverlay();
loginOverlay.setI18n(i18n);

Internationalization (i18n)

Login’s titles, descriptions, labels, and messages are all customizable using internationalization.

Open in a
new tab
LoginI18n i18n = LoginI18n.createDefault();

LoginI18n.Header i18nHeader = new LoginI18n.Header();
i18nHeader.setTitle("Sovelluksen nimi");
i18nHeader.setDescription("Sovelluksen kuvaus");
i18n.setHeader(i18nHeader);

LoginI18n.Form i18nForm = i18n.getForm();
i18nForm.setTitle("Kirjaudu sisään");
i18nForm.setUsername("Käyttäjänimi");
i18nForm.setPassword("Salasana");
i18nForm.setSubmit("Kirjaudu sisään");
i18nForm.setForgotPassword("Unohtuiko salasana?");
i18n.setForm(i18nForm);

LoginI18n.ErrorMessage i18nErrorMessage = i18n.getErrorMessage();
i18nErrorMessage.setTitle("Väärä käyttäjätunnus tai salasana");
i18nErrorMessage.setMessage(
        "Tarkista että käyttäjätunnus ja salasana ovat oikein ja yritä uudestaan.");
i18n.setErrorMessage(i18nErrorMessage);

i18n.setAdditionalInformation("Jos tarvitset lisätietoja käyttäjälle.");

LoginOverlay loginOverlay = new LoginOverlay();
loginOverlay.setI18n(i18n);

Header

The header is only shown for modal log-in forms.

Property Default Value

Title

"App name"

Description

"Application description"

Form

Customize the form’s title, input field and button labels.

Property Default Value

Title

"Log in"

Username

"Username"

Password

"Password"

Submit

"Log in"

Forgot password

"Forgot password"

Error Message

Login’s error message is shown when authentication fails. It includes a title in addition to the message.

Property Default Value

Title

"Incorrect username or password"

Message

"Check that you have entered the correct username and password and try again."

Additional Information

This property is hidden unless its value is explicitly set.

Property Default Value

Additional information

-

Technical

Handling Events

Login Event

You can add a listener to log-in events or define an action for which a POST request is fired. From the event, you can prevent the POST request.

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

Forgotten Password

You can add an event listener, which gives you the opportunity to provide your users with instructions for password recovery.

Cross-Site Request Forgery (CSRF) Tokens

If the page contains the following meta tags with a CSRF token, the token is automatically included in a form POST request:

<meta name="_csrf_parameter" content="_csrf">
<meta name="_csrf" content="71dac59f-34ee-4b31-b478-2891cbd0c55d">

This token is submitted as _csrf=71dac59f-34ee-4b31-b478-2891cbd0c55d, that is, using the _csrf_parameter content as the variable name and the _csrf content as the value.

B6AA0496-4D82-4C93-B8FB-64148FF9C88C

1. When added to a web component that uses shadow root, password managers are unable to find the input fields and therefore won’t work.