Login
- Usage
- Styling
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.
new tab
{/* no-autofocus is used to prevent the example from stealing focus when browsing the
documentation */}
<LoginForm no-autofocus />
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.
new tab
const i18n = {
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.',
username: 'Käyttäjätunnus vaaditaan',
password: 'Salasana vaaditaan',
},
};
function Example() {
return (
<>
{/* no-autofocus is used to prevent the example from stealing focus when browsing the documentation */}
<LoginForm i18n={i18n} no-autofocus />
</>
);
}
The basic Login component can be used to create log-in pages featuring rich content.
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.
|
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).
new tab
<Button
theme="primary"
onClick={() => {
setLoginOpened(true);
}}
>
Log in
</Button>
<LoginOverlay
opened={loginOpened}
onLogin={() => {
setLoginOpened(false);
}}
/>
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.
new tab
<LoginOverlay title="TaskMob" description="Built with ♥ by Vaadin" opened autofocus />
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 name
attribute to ensure the custom field value
is submitted with the form.
new tab
<LoginOverlay opened>
<IntegerField slot="custom-form-area" name="code" label="One-time code" />
</LoginOverlay>
Footer
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.
new tab
<LoginOverlay>
<p slot="footer" className="text-center">
Never tell your password to anyone
</p>
</LoginOverlay>
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.
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.
new tab
const loginRef = useRef<LoginOverlayElement>(null);
useEffect(() => {
if (loginRef.current) {
loginRef.current.i18n = {
...loginRef.current.i18n,
additionalInformation: `Contact admin@company.com if you're experiencing issues logging into your account`,
};
}
}, []);
return <LoginOverlay ref={loginRef} opened />;
Internationalization (i18n)
Login’s titles, descriptions, labels, and messages are all customizable using internationalization.
new tab
const i18n = {
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.',
username: 'Käyttäjätunnus vaaditaan',
password: 'Salasana vaaditaan',
},
additionalInformation: 'Jos tarvitset lisätietoja käyttäjälle.',
};
return (
<>
{/* no-autofocus is used to prevent the example from stealing focus when browsing the documentation */}
<LoginOverlay i18n={i18n} opened no-autofocus />
</>
);
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" |
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.