Add Logout

Logging Out
Configuring the Logout Success URL
- Absolute vs. Relative URLs
Try It

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:

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:

@EnableWebSecurity
@Configuration
class SecurityConfig extends VaadinWebSecurity {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        super.configure(http);
        setLoginView(http, "/login", "/logged-out.html"); 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.

Import useAuth

Import useAuth into src/main/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:

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

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.

Docs