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
Java
@EnableWebSecurity
@Configuration
class SecurityConfig extends VaadinWebSecurity {
@Override
protected void configure(HttpSecurity http) throws Exception {
super.configure(http);
setLoginView(http, LoginView.class, "/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://
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.
Important
| This tutorial applies to skeletons generated for Vaadin 24.7. Skeletons generated for Vaadin 24.8 and newer already have a security configuration. |
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()), createUserMenu());
}
...
}
-
Declares a field for
AuthenticationContext
, as you’ll need it later. -
Injects
AuthenticationContext
into the constructor.
Implement Logout in the User Menu
The user menu in MainLayout
already contains a logout item, but it does nothing. Modify it to call logout()
when clicked:
Source code
MainLayout.java
@Layout
@PermitAll
public final class MainLayout extends AppLayout {
...
private Component createUserMenu() {
// TODO Replace with real user information and actions
var avatar = new Avatar("John Smith");
avatar.addThemeVariants(AvatarVariant.LUMO_XSMALL);
avatar.addClassNames(Margin.Right.SMALL);
avatar.setColorIndex(5);
var userMenu = new MenuBar();
userMenu.addThemeVariants(MenuBarVariant.LUMO_TERTIARY_INLINE);
userMenu.addClassNames(Margin.MEDIUM);
var userMenuItem = userMenu.addItem(avatar);
userMenuItem.add("John Smith");
userMenuItem.getSubMenu().addItem("View Profile");
userMenuItem.getSubMenu().addItem("Manage Settings");
userMenuItem.getSubMenu().addItem("Logout",
event -> authenticationContext.logout()); 1
return userMenu;
}
}
-
Calls
authenticationContext.logout()
when the Logout menu item is clicked.
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.