Add Logout
In this guide, you’ll learn how to implement logout functionality in a Vaadin Flow application. A hands-on mini-tutorial at the end will walk you through adding logout functionality to a real Vaadin application.
Logging Out
Vaadin provides the class AuthenticationContext
, which includes a logout()
method. Calling this method logs out the user and redirects them to a preconfigured logout success URL.
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
Java
import com.vaadin.flow.spring.security.AuthenticationContext;
import jakarta.annotation.security.PermitAll;
@Route("logout")
@PermitAll 1
public class LogoutView extends Main {
public LogoutView(AuthenticationContext authenticationContext) { 2
add(new Button("Logout", event -> authenticationContext.logout()));
}
}
-
Grants access to authenticated users — otherwise, users wouldn’t be able to log out.
-
Injects
AuthenticationContext
, which is a Spring Bean.
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
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(LoginView.class, "/logged-out.html"); 1
});
return http.build();
}
...
}
-
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://
orhttp://
(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.
Inject AutheticationContext
Inject the AuthenticationContext
into the MainLayout
class:
Source code
MainLayout.java
import com.vaadin.flow.spring.security.AuthenticationContext;
@Layout
@PermitAll
public final class MainLayout extends AppLayout {
private final AuthenticationContext authenticationContext; 1
public MainLayout(AuthenticationContext authenticationContext) { 2
this.authenticationContext = authenticationContext;
setPrimarySection(Section.DRAWER);
addToDrawer(createHeader(), new Scroller(createSideNav()));
}
...
}
-
Declares a field for
AuthenticationContext
, as you’ll need it later. -
Injects
AuthenticationContext
into the constructor.
Add Logout Button
Add a logout button to the MainLayout
class:
Source code
MainLayout.java
@Layout
@PermitAll
public final class MainLayout extends AppLayout {
private final AuthenticationContext authenticationContext;
MainLayout(AuthenticationContext authenticationContext) {
this.authenticationContext = authenticationContext;
setPrimarySection(Section.DRAWER);
addToDrawer(createHeader(), new Scroller(createSideNav()),
createLogout());
}
private Button createLogout() {
var logout = new Button("Logout", VaadinIcon.POWER_OFF.create());
logout.addThemeVariants(ButtonVariant.LUMO_TERTIARY);
logout.addClickListener(e -> authenticationContext.logout()); 1
return logout;
}
...
}
-
Calls
authenticationContext.logout()
when the Logout button is clicked.
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.