# Logout (https://docs.salla.dev/twilight/react/routes/logout)



<Callout title="Framework: TanStack Start">
  This page is written for TanStack Start, the default and currently supported framework. [See what depends on the framework](https://docs.salla.dev/twilight/react/start/frameworks).
</Callout>

The customer never sees this page for more than a moment. When they sign out, the Salla SDK (`Salla.auth.logout()`) sends the browser to `/logout`, which clears the theme's `token` cookie and goes to the store home. Customise it only to show a short "signing out" message.

## URL [#url]

| URL                   | Goes to                                                 |
| --------------------- | ------------------------------------------------------- |
| `/logout?from=...`    | the same path without `/logout`, which is the home page |
| `/ar/logout?from=...` | `/ar`                                                   |

The only param is the optional locale. The `from` query is ignored.

## Route file [#route-file]

```tsx title="app/routes/logout.tsx"
// @auto-generated
import { createFileRoute } from '@tanstack/react-router';
import { LogoutRedirect } from '@salla.sa/twilight-theme-engine/routes/seo-redirects';

export const Route = createFileRoute('/{-$locale}/logout')({
  component: LogoutRedirect,
});
```

To take the file over, delete the `// @auto-generated` line. See [Fork a built-in route](https://docs.salla.dev/twilight/react/recipes/fork-a-built-in-route).

### A customised version [#a-customised-version]

Show a message while the redirect runs. Keep `LogoutRedirect` mounted: it is what clears the cookie and navigates.

```tsx title="app/routes/logout.tsx"
import { createFileRoute } from '@tanstack/react-router';
import { LogoutRedirect } from '@salla.sa/twilight-theme-engine/routes/seo-redirects';

export const Route = createFileRoute('/{-$locale}/logout')({
  component: function LogoutRoute() {
    return (
      <>
        <p className="py-16 text-center">Signing you out...</p>
        <LogoutRedirect />
      </>
    );
  },
});
```

## What it loads [#what-it-loads]

Nothing. There is no loader and no head. `LogoutRedirect` renders nothing and does its work in the browser. It is a component, not a loader redirect, because a loader runs on the server, where the cookie cannot be cleared and the customer would stay signed in on the next request.

## Edge cases [#edge-cases]

* **The cookie.** `Salla.cookie.clearAll()` leaves the theme's `token` cookie behind, so this page deletes it. A custom sign-out that skips this looks signed out in the SDK but still sends a token to the API.
* **Visited while signed out.** It does the same thing and goes home.
* **Navigation.** It replaces the history entry with a full page load, and keeps the store path and language prefix in front of `/logout`.
* **JavaScript disabled.** The page stays blank, because nothing runs on the server.

## See also [#see-also]

* [SEO redirects](https://docs.salla.dev/twilight/react/routes/seo-redirects), the other redirect-only routes
* [Salla SDK and events](https://docs.salla.dev/twilight/react/guide/salla-sdk-and-events)
* [Authentication and scope](https://docs.salla.dev/twilight/react/api/authentication-and-scope)