> Markdown version of [Flow](https://vaadin.com/docs/v24/building-apps/security/add-logout/flow). Section index: [llms.txt](https://vaadin.com/docs/v24/building-apps/llms.txt)

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

## <a id="logging-out"></a>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:

```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()));
    }
}
```

1. Grants access to *authenticated users* — otherwise, users wouldn’t be able to log out.

2. Injects `AuthenticationContext`, which is a Spring Bean.

## <a id="configuring-the-logout-success-url"></a>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:

`SecurityConfig.java`

```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 -> {
// tag::snippet[]
            configurer.loginView(LoginView.class, "/logged-out.html"); // (1)
// end::snippet[]
        });
        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.

### <a id="absolute-vs-relative-urls"></a>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`.

## <a id="try-it"></a>Try It

In this mini-tutorial, you’ll add logout functionality to a real Vaadin application. It uses the project from the [Add Login](https://vaadin.com/docs/v24/building-apps/security/add-login/flow.md#try-it) guide. If you haven’t completed that tutorial yet, do it now before proceeding.

Inject AutheticationContext

Inject the `AuthenticationContext` into the `MainLayout` class:

MainLayout.java

```java
import com.vaadin.flow.spring.security.AuthenticationContext;

@Layout
@PermitAll
public final class MainLayout extends AppLayout {

// tag::snippet[]
    private final AuthenticationContext authenticationContext; // (1)

    public MainLayout(AuthenticationContext authenticationContext) { // (2)
        this.authenticationContext = authenticationContext;
// end::snippet[]
        setPrimarySection(Section.DRAWER);
        addToDrawer(createHeader(), new Scroller(createSideNav()));
    }
    ...
}
```

1. Declares a field for `AuthenticationContext`, as you’ll need it later.

2. Injects `AuthenticationContext` into the constructor.

Add Logout Button

Add a logout button to the `MainLayout` class:

MainLayout.java

```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()),
// tag::snippet[]
            createLogout());
// end::snippet[]
    }

// tag::snippet[]
    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;
    }
// end::snippet[]
    ...
}
```

1. 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](https://vaadin.com/docs/v24/building-apps/security/protect-views.md) guide.