Login
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.
new tab
<!-- no-autofocus is used to prevent the example from stealing focus when browsing the documentation -->
<vaadin-login-form no-autofocus></vaadin-login-form>
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.
new tab
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.',
},
};
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>
`;
}
The basic Login component can be used to create login pages featuring rich content.
new tab
<!-- 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>
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.
|
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.
new tab
<vaadin-button @click="${() => (this.loginOpened = true)}" theme="primary">
Log in
</vaadin-button>
<vaadin-login-overlay
.opened="${this.loginOpened}"
@login="${() => (this.loginOpened = false)}"
></vaadin-login-overlay>
Header
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.
new tab
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 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>
`;
}
}
<!-- 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>
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.
new tab
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 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>`;
}
}
<!-- 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>
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.
new tab
import { html, LitElement } from 'lit';
import { customElement, query } from 'lit/decorators.js';
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>`;
}
}
@query('vaadin-login-overlay')
private login?: LoginOverlayElement;
firstUpdated() {
if (this.login && this.login.i18n) {
this.login.i18n = {
...this.login.i18n,
additionalInformation: `Please, contact admin@company.com if you're experiencing issues logging into your account`,
};
}
}
render() {
return html`<vaadin-login-overlay opened></vaadin-login-overlay>`;
}
Internationalization (i18n)
Login’s titles, descriptions, labels, and messages are all customizable using internationalization.
new tab
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
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>
`;
}
}
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`
<!-- 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>
`;
}
Header
The header is only shown for modal login 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" |
Technical
Handling Events
Login Event
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:
<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.