Docs

Docs

Add Logout

In this guide, you’ll learn how to implement logout functionality in a Vaadin application with Hilla views. A hands-on mini-tutorial at the end will walk you through adding logout functionality to a real Vaadin application.

Logging Out

Vaadin provides a React hook useAuth, which includes a logout() function. Calling this function logs out the user and redirects them to a preconfigured logout success URL.

Note
 You configured the useAuth hook in the Add Login guide.

You typically call logout() from a button or menu item click listener. Here’s how to add a logout button to a view:

Source code
tsx
import { Button } from '@vaadin/react-components';
import { useAuth } from "Frontend/security/auth";

export default function LogoutView() {
    const { logout } = useAuth();
    return (
        <main>
            <Button onClick={logout}>Logout</Button>
        </main>
    );
}

Configuring the Logout Success URL

By default, users are redirected to the root URL (/) after logging out. To change this, specify a custom logout success URL in your security configuration:

Source code
Java
@EnableWebSecurity
@Configuration
class SecurityConfig extends VaadinWebSecurity {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        super.configure(http);
        setLoginView(http, "/login", "/logged-out.html"); 1
    }
    ...
}

  1. Sets /logged-out.html as the logout success URL.

If your application runs at https://example.com, users will be redirected to https://example.com/logged-out.html after logging out.

Absolute vs. Relative URLs

The logout success URL can be either absolute or relative.

  • Absolute URLs — Start with https:// or http:// (e.g., https://example.com/logged-out).

  • Relative URLs — Start with / (e.g., /logged-out.html).

Important
Relative logout URLs must include the context path
If your application is deployed at https://example.com/app, the logout URL should be /app/logged-out.html.

Try It

In this mini-tutorial, you’ll add logout functionality to a real Vaadin application. It uses the project from the Add Login guide. If you haven’t completed that tutorial yet, do it now before proceeding.

Important
 This tutorial applies to skeletons generated for Vaadin 24.7. Skeletons generated for Vaadin 24.8 and newer already have a security configuration.
Import useAuth

Import useAuth into src/main/frontend/views/@layout.tsx:

Source code
frontend/views/@layout.tsx
import {useAuth} from "Frontend/security/auth";
...
Implement Logout in the User Menu

The user menu in @layout.tsx already contains a logout item, but it does nothing. Modify it to call logout() when clicked:

Source code
frontend/views/@layout.tsx
...
function UserMenu() {
    // TODO Replace with real user information and actions
    const { logout } = useAuth();
    const items = [
        {
            component: (
                <>
                    <Avatar theme="xsmall" name="John Smith" colorIndex={5} className="mr-s"/> John Smith
                </>
            ),
            children: [
                {text: 'View Profile', action: () => console.log("View Profile")},
                {text: 'Manage Settings', action: () => console.log("Manage Settings")},
                {text: 'Logout', action: () => (async () => await logout())()},
            ],
        },
    ];
    const onItemSelected = (event: MenuBarItemSelectedEvent) => {
        const action = ((event.detail.value as any)).action;
        if (action) {
            action();
        }
    }
    return <MenuBar theme="tertiary-inline"
                    items={items}
                    onItemSelected={onItemSelected}
                    className="m-m"
                    slot="drawer"/>;
}
...
Test the Application

Restart the application. Navigate to: http://localhost:8080

Log in if you haven’t already.

Click the user menu (lower-left corner) and select Logout. You should be redirected to the login screen.

Final Thoughts

You have now a Vaadin application that supports both login and logout. Next, learn how to control access to specific views in your application by reading the Protect Views guide.