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
SecurityConfig.java
@EnableWebSecurity
@Configuration
@Import(VaadinAwareSecurityContextHolderStrategyConfiguration.class)
class SecurityConfig {

    @Bean
    SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        // Configure Vaadin's security using VaadinSecurityConfigurer
        http.with(VaadinSecurityConfigurer.vaadin(), configurer -> {
            configurer.loginView("/login", "/logged-out.html"); 1
        });
        return http.build();
    }
    ...
}

  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:

Source code
frontend/views/@layout.tsx
import {useAuth} from "Frontend/security/auth";
...
Add Logout Button

Add a logout button to the main layout:

Source code
frontend/views/@layout.tsx
// ...

export default function MainLayout() {
    const { logout } = useAuth();
    return (
        <AppLayout primarySection="drawer">
            <Header />
            <Scroller slot="drawer">
                <MainMenu />
            </Scroller>
            <Button slot="drawer" theme="tertiary" onClick={logout}>
                <Icon icon="vaadin:power-off" slot="prefix"/>
                Logout
            </Button>
            <Suspense fallback={<ProgressBar indeterminate={true} className="m-0" />}>
            <Outlet />
        </Suspense>
        </AppLayout>
    );
}
Test the Application

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

Log in if you haven’t already.

Click the Logout button. 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.