Login

Basic Login Component/Form
Modal Overlay
Validation
Internationalization (i18n)
Technical

Login is a component that contains a login form. You can use it for authenticating the user with a username and password. It is compatible with password managers, supports internationalization and works on all device sizes.

Open in a
new tab

Source code

LoginBasic.javapackage com.vaadin.demo.component.login;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.login.LoginForm;
import com.vaadin.flow.router.Route;

@Route("login-basic")
public class LoginBasic extends Div {

    public LoginBasic() {
        // Demo purposes only
        getStyle()
            .set("background-color", "var(--lumo-contrast-5pct)")
            .set("display", "flex")
            .set("justify-content", "center")
            .set("padding", "var(--lumo-space-l)");

        // tag::snippet[]
        LoginForm loginForm = new LoginForm();
        add(loginForm);
        // end::snippet[]
        // Prevent the example from stealing focus when browsing the documentation
        loginForm.getElement().setAttribute("no-autofocus", "");
    }
}

The basic Login component consists of a title (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

Source code

LoginInternationalization.javapackage com.vaadin.demo.component.login;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.login.LoginForm;
import com.vaadin.flow.component.login.LoginI18n;
import com.vaadin.flow.router.Route;

@Route("login-internationalization")
public class LoginInternationalization extends Div {

    public LoginInternationalization() {
        // Demo purposes only
        getStyle()
                .set("background-color", "var(--lumo-contrast-5pct)")
                .set("display", "flex")
                .set("justify-content", "center")
                .set("padding", "var(--lumo-space-l)");

        // tag::snippet[]
        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);
        // end::snippet[]
        add(loginForm);
        // Prevent the example from stealing focus when browsing the documentation
        loginForm.getElement().setAttribute("no-autofocus", "");
    }
}

The basic Login component can be used to create login pages featuring rich content.

Open in a
new tab

Source code

LoginRichContent.javapackage com.vaadin.demo.component.login;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.login.LoginForm;
import com.vaadin.flow.router.Route;

@Route("login-rich-content")
public class LoginRichContent extends Div {

    public LoginRichContent() {
        // tag::snippet[]
        // See login-rich-content.css
        addClassName("login-rich-content");

        LoginForm loginForm = new LoginForm();
        loginForm.getElement().getThemeList().add("dark");
        // end::snippet[]
        add(loginForm);
        // Prevent the example from stealing focus when browsing the documentation
        loginForm.getElement().setAttribute("no-autofocus", "");
    }
}
login-rich-content.css.login-rich-content {
  background-image: url("../../../src/main/resources/images/earth.jpg");
  background-position: center;
  background-size: cover;
  display: flex;
  height: 500px;
}
.login-rich-content vaadin-login-form {
  align-items: center;
  display: flex;
  max-width: 300px;
}
.login-rich-content vaadin-login-form-wrapper {
  background-image: none;
}
login-rich-content.css

Note	Password managers Login is incompatible with password managers if placed inside another component’s ^[1] shadow root. This is not an issue when using Login’s modal overlay.

Login features its own modal overlay. Use it to create simple login pages (that are full screen on mobile devices) or to handle authentication without a dedicated login 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, for example, by using a login button.

Open in a
new tab

Source code

LoginOverlayBasic.javapackage com.vaadin.demo.component.login;

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.login.LoginOverlay;
import com.vaadin.flow.router.Route;

@Route("login-overlay-basic")
public class LoginOverlayBasic extends Div {

    public LoginOverlayBasic() {
        // tag::snippet[]
        LoginOverlay loginOverlay = new LoginOverlay();
        add(loginOverlay);

        Button login = new Button("Log in");
        login.addClickListener(event -> loginOverlay.setOpened(true));
        // end::snippet[]
        login.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
        add(login);
    }
}

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

Open in a
new tab

Source code

login-overlay-header-preview.tsimport { html, LitElement, customElement } from 'lit-element';
import { applyTheme } from 'Frontend/generated/theme';
import './login-overlay-mockup';

@customElement('login-overlay-header')
export class Example extends LitElement {
    protected createRenderRoot() {
        const root = super.createRenderRoot();
        // Apply custom theme (only supported if your app uses one)
        applyTheme(root);
        return root;
    }

    render() {
        return html`
      <login-overlay-mockup
        headerTitle="TaskMob"
        description="Built with ♥ by Vaadin"
      ></login-overlay-mockup>
    `;
    }
}
login-overlay-header-preview.ts

Source code

LoginOverlayHeader.javapackage com.vaadin.demo.component.login;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.login.LoginOverlay;
import com.vaadin.flow.router.Route;

@Route("login-overlay-header")
public class LoginOverlayHeader extends Div {

    public LoginOverlayHeader() {
        LoginOverlay loginOverlay = new LoginOverlay();
        loginOverlay.setTitle("TaskMob");
        loginOverlay.setDescription("Built with ♥ by Vaadin");
        add(loginOverlay);
        loginOverlay.setOpened(true);
        // Prevent the example from stealing focus when browsing the documentation
        loginOverlay.getElement().setAttribute("no-autofocus", "");
    }
}

Validation

Login shows an error message when authentication fails. The error message consists of a title and a message. It is displayed directly underneath the form’s title.

Open in a
new tab

Source code

login-validation-preview.tsimport { html, LitElement, customElement } from 'lit-element';
import { applyTheme } from 'Frontend/generated/theme';
import './login-overlay-mockup';

@customElement('login-validation')
export class Example extends LitElement {
    protected createRenderRoot() {
        const root = super.createRenderRoot();
        // Apply custom theme (only supported if your app uses one)
        applyTheme(root);
        return root;
    }

    render() {
        return html`<login-overlay-mockup error></login-overlay-mockup>`;
    }
}
login-validation-preview.ts

Source code

LoginValidation.javapackage com.vaadin.demo.component.login;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.login.LoginOverlay;
import com.vaadin.flow.router.Route;

@Route("login-validation")
public class LoginValidation extends Div {

    public LoginValidation() {
        LoginOverlay loginOverlay = new LoginOverlay();
        loginOverlay.setError(true);
        add(loginOverlay);
        loginOverlay.setOpened(true);
        // Prevent the example from stealing focus when browsing the documentation
        loginOverlay.getElement().setAttribute("no-autofocus", "");
    }
}

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

More information can also 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

Source code

login-additional-information-preview.tsimport { customElement, html, LitElement, query } from 'lit-element';
import { applyTheme } from 'Frontend/generated/theme';
import './login-overlay-mockup';
import { LoginOverlayMockupElement } from './login-overlay-mockup';

@customElement('login-additional-information')
export class Example extends LitElement {
    protected createRenderRoot() {
        const root = super.createRenderRoot();
        // Apply custom theme (only supported if your app uses one)
        applyTheme(root);
        return root;
    }

    @query('login-overlay-mockup')
    private login?: LoginOverlayMockupElement;
    firstUpdated() {
        if (this.login && this.login.i18n) {
            this.login.i18n = {
                ...this.login.i18n,
                additionalInformation: `Please, contact admin@company.com if you're experiecing issues logging into your account`,
            };
        }
    }

    render() {
        return html`<login-overlay-mockup></login-overlay-mockup>`;
    }
}
login-additional-information-preview.ts

Source code

LoginAdditionalInformation.javapackage com.vaadin.demo.component.login;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.login.LoginI18n;
import com.vaadin.flow.component.login.LoginOverlay;
import com.vaadin.flow.router.Route;

@Route("login-additional-information")
public class LoginAdditionalInformation extends Div {

    public LoginAdditionalInformation() {
        LoginI18n i18n = LoginI18n.createDefault();
        i18n.setAdditionalInformation("Please, contact admin@company.com if you're experiencing issues logging into your account");

        LoginOverlay loginOverlay = new LoginOverlay();
        loginOverlay.setI18n(i18n);
        add(loginOverlay);
        loginOverlay.setOpened(true);
        // Prevent the example from stealing focus when browsing the documentation
        loginOverlay.getElement().setAttribute("no-autofocus", "");
    }
}

Internationalization (i18n)

Open in a
new tab

Source code

login-overlay-internationalization-preview.tsimport { html, LitElement, customElement } from 'lit-element';
import { LoginI18n } from '@vaadin/vaadin-login/vaadin-login-overlay';
import { applyTheme } from 'Frontend/generated/theme';
import './login-overlay-mockup';

@customElement('login-overlay-internationalization-preview')
export class Example extends LitElement {
    protected createRenderRoot() {
        const root = super.createRenderRoot();
        // Apply custom theme (only supported if your app uses one)
        applyTheme(root);
        return root;
    }

    private i18n: LoginI18n = {
        header: {
            title: 'Sovelluksen nimi',
            description: 'Sovelluksen kuvaus',
        },
        form: {
            title: 'Kirjaudu sisään',
            username: 'Käyttäjänimi',
            password: 'Salasana',
            submit: 'Kirjaudu sisään',
            forgotPassword: 'Unohtuiko salasana?',
        },
        errorMessage: {
            title: 'Väärä käyttäjätunnus tai salasana',
            message: 'Tarkista että käyttäjätunnus ja salasana ovat oikein ja yritä uudestaan.',
        },
        additionalInformation: 'Jos tarvitset lisätietoja käyttäjälle.',
    };

    render() {
        return html`
      <login-overlay-mockup
        .i18n="${this.i18n}"
        .headerTitle="${this.i18n.header?.title}"
        .description="${this.i18n.header?.description}"
      ></login-overlay-mockup>
    `;
    }
}
login-overlay-internationalization-preview.ts

Source code

LoginOverlayInternationalization.javapackage com.vaadin.demo.component.login;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.login.LoginI18n;
import com.vaadin.flow.component.login.LoginOverlay;
import com.vaadin.flow.router.Route;

@Route("login-overlay-internationalization")
public class LoginOverlayInternationalization extends Div {

    public LoginOverlayInternationalization() {
        LoginI18n i18n = LoginI18n.createDefault();

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

        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);
        add(loginOverlay);
        loginOverlay.setOpened(true);
        // Prevent the example from stealing focus when browsing the documentation
        loginOverlay.getElement().setAttribute("no-autofocus", "");
    }
}

Header

The header is only shown for modal login forms.

Property	Default value
Title	"App name"
Description	"Application description"

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"

Property

Default value

Title

"Log in"

Username

"Username"

Password

"Password"

Submit

"Log in"

Forgot password

"Forgot password"

Error Message

Property	Default value
Title	"Incorrect username or password"
Message	"Check that you have entered the correct username and password and try again."

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	-

Property

Default value

Additional information

Technical

Handling Events

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

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

Forgot Password

You can add an event listener so you can provide instructions for password recovery for your users.

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:

Source code

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

9CA8E14E-A01E-4C48-8D08-D4B1E6A3D287

1. When added to a web component that uses shadow root, password managers are unable to find the input fields and thus not work.

Docs

Docs

Login

Header

Validation

Internationalization (i18n)

Header

Form

Error Message

Additional Information

Technical

Handling Events

Forgot Password

Cross-Site Request Forgery (CSRF) Tokens

Docs

Basic Login Component/Form

Modal Overlay

Header

Validation

Internationalization (i18n)

Header

Form

Error Message

Additional Information

Technical

Handling Events

Login Event

Forgot Password

Cross-Site Request Forgery (CSRF) Tokens