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

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

## <a id="logging-out"></a>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](https://vaadin.com/docs/v24/building-apps/security/add-login/hilla.md) guide.

You typically call `logout()` from a **button** or **menu item** click listener. Here’s how to add a logout button to a view:

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

## <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("/login", "/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/hilla.md#try-it) 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`:

frontend/views/@layout.tsx

```tsx
import {useAuth} from "Frontend/security/auth";
...
```

Add Logout Button

Add a logout button to the main layout:

frontend/views/@layout.tsx

```tsx
// ...

export default function MainLayout() {
// tag::snippet[]
    const { logout } = useAuth();
// end::snippet[]
    return (
        <AppLayout primarySection="drawer">
            <Header />
            <Scroller slot="drawer">
                <MainMenu />
            </Scroller>
{/* tag::snippet[] */}
            <Button slot="drawer" theme="tertiary" onClick={logout}>
                <Icon icon="vaadin:power-off" slot="prefix"/>
                Logout
            </Button>
{/* end::snippet[] */}
            <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](https://vaadin.com/docs/v24/building-apps/security/protect-views.md) guide.