Docs

Docs

Add Logout

In this guide, you’ll learn how to implement logout functionality in a Vaadin application with Hilla views.

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.