> Markdown version of [Login](https://vaadin.com/docs/v23/components/login). Section index: [llms.txt](https://vaadin.com/docs/v23/components/llms.txt)

# Login

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.

**TypeScript** — `login-basic.ts`

```typescript
<!-- no-autofocus is used to prevent the example from stealing focus when browsing the documentation -->
<vaadin-login-form no-autofocus></vaadin-login-form>
```

**Java** — `LoginBasic.java`

```java
LoginForm loginForm = new LoginForm();
add(loginForm);
```

## <a id="basic-login-componentform"></a>Basic Login Component/Form

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.

**TypeScript** — `login-internationalization.ts`

```typescript
private i18n: LoginI18n = {
  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.',
  },
};

protected override render() {
  return html`
    <!-- no-autofocus is used to prevent the example from stealing focus when browsing the documentation -->
    <vaadin-login-form .i18n="${this.i18n}" no-autofocus></vaadin-login-form>
  `;
}
```

**Java** — `LoginInternationalization.java`

```java
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.

**TypeScript** — `login-rich-content.ts`

```typescript
<!-- See login-rich-content.css -->
<!-- no-autofocus is used to prevent the example from stealing focus when browsing the documentation -->
<div class="login-rich-content">
  <vaadin-login-form theme="dark" no-autofocus></vaadin-login-form>
</div>
```

`login-rich-content.css`

```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;
}
```

**Java** — `LoginRichContent.java`

```java
// 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 \[[1](#_footnotedef_1)] shadow root. This isn’t an issue when using Login’s modal overlay.

## <a id="modal-overlay"></a>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, for example, by using a log-in button.

**TypeScript** — `login-overlay-basic.ts`

```typescript
<vaadin-button
  theme="primary"
  @click="${() => {
    this.loginOpened = true;
  }}"
>
  Log in
</vaadin-button>
<vaadin-login-overlay
  .opened="${this.loginOpened}"
  @login="${() => {
    this.loginOpened = false;
  }}"
></vaadin-login-overlay>
```

**Java** — `LoginOverlayBasic.java`

```java
LoginOverlay loginOverlay = new LoginOverlay();
add(loginOverlay);

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

### <a id="header"></a>Header

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.

`login-overlay-header-preview.ts`

```typescript
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';
import './login-overlay-mockup';

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

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

**TypeScript** — `login-overlay-header.ts`

```typescript
<!-- no-autofocus is used to prevent the example from stealing focus when browsing the documentation -->
<vaadin-login-overlay
  title="TaskMob"
  description="Built with ♥ by Vaadin"
  opened
  no-autofocus
></vaadin-login-overlay>
```

**Java** — `LoginOverlayHeader.java`

```java
LoginOverlay loginOverlay = new LoginOverlay();
loginOverlay.setTitle("TaskMob");
loginOverlay.setDescription("Built with ♥ by Vaadin");
```

## <a id="validation"></a>Validation

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

`login-validation-preview.ts`

```typescript
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';
import './login-overlay-mockup';

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

  protected override render() {
    return html`<login-overlay-mockup error></login-overlay-mockup>`;
  }
}
```

**TypeScript** — `login-validation.ts`

```typescript
<!-- no-autofocus is used to prevent the example from stealing focus when browsing the documentation -->
<vaadin-login-overlay opened error no-autofocus></vaadin-login-overlay>
```

**Java** — `LoginValidation.java`

```java
loginOverlay.setError(true);
```

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.

`login-additional-information-preview.ts`

```typescript
import { html, LitElement } from 'lit';
import { customElement, query } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';
import './login-overlay-mockup';
import type { LoginOverlayMockupElement } from './login-overlay-mockup';

@customElement('login-additional-information')
export class Example extends LitElement {
  protected override 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;

  protected override firstUpdated() {
    this.login.i18n = {
      ...this.login.i18n,
      additionalInformation: `Contact admin@company.com if you're experiencing issues logging into your account`,
    };
  }

  protected override render() {
    return html`<login-overlay-mockup></login-overlay-mockup>`;
  }
}
```

**TypeScript** — `login-additional-information.ts`

```typescript
@query('vaadin-login-overlay')
private login!: LoginOverlay;

protected override firstUpdated() {
  this.login.i18n = {
    ...this.login.i18n,
    additionalInformation: `Contact admin@company.com if you're experiencing issues logging into your account`,
  };
}

protected override render() {
  return html`<vaadin-login-overlay opened></vaadin-login-overlay>`;
}
```

**Java** — `LoginAdditionalInformation.java`

```java
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);
```

## <a id="internationalization-i18n"></a>Internationalization (i18n)

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

`login-overlay-internationalization-preview.ts`

```typescript
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import type { LoginI18n } from '@vaadin/login';
import { applyTheme } from 'Frontend/generated/theme';
import './login-overlay-mockup';

@customElement('login-overlay-internationalization-preview')
export class Example extends LitElement {
  protected override 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.',
  };

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

**TypeScript** — `login-overlay-internationalization.ts`

```typescript
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.',
};

protected override render() {
  return html`
    <!-- no-autofocus is used to prevent the example from stealing focus when browsing the documentation -->
    <vaadin-login-overlay .i18n="${this.i18n}" opened no-autofocus></vaadin-login-overlay>
  `;
}
```

**Java** — `LoginOverlayInternationalization.java`

```java
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);
```

### <a id="header-2"></a>Header

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

<!-- vale Vaadin.Terms-App = NO -->

| Property    | Default value               |
| ----------- | --------------------------- |
| Title       | *"App name"*                |
| Description | *"Application description"* |

<!-- vale Vaadin.Terms-App = YES -->

### <a id="form"></a>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"* |

### <a id="error-message"></a>Error Message

Login’s error message is shown when authentication fails. It consists of a title and message.

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

<!-- vale Vaadin.TooWordy = NO -->

### <a id="additional-information"></a>Additional Information

This property is hidden unless its value is explicitly set.

| Property               | Default value |
| ---------------------- | ------------- |
| Additional information | -             |

<!-- vale Vaadin.TooWordy = YES -->

## <a id="technical"></a>Technical

### <a id="handling-events"></a>Handling Events

#### <a id="login-event"></a>Login Event

You can add a listener to log-in events and/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)`.

#### <a id="forgotten-password"></a>Forgotten Password

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

#### <a id="cross-site-request-forgery-csrf-tokens"></a>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:

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

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

---

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