# Account settings (https://docs.salla.dev/twilight/react/routes/account-settings)



<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 manages their notification and account preferences here, inside the [account layout](https://docs.salla.dev/twilight/react/routes/account). Customise it to add your own block next to the widget.

## URL [#url]

| URL                    | Notes                  |
| ---------------------- | ---------------------- |
| `/account/settings`    | default language       |
| `/ar/account/settings` | with a language prefix |

The only param is the optional `locale`.

## Route file [#route-file]

```tsx title="app/routes/account.settings.tsx"
// @auto-generated
import { createFileRoute } from '@tanstack/react-router';
import { Settings } from '@salla.sa/twilight-theme-engine/routes/account';
import type { SettingsPageProps } from '@salla.sa/twilight-theme-engine/routes/account';
import { CustomerPageSkeleton } from '@salla.sa/twilight-theme-engine/skeleton';
import { withHead } from '@salla.sa/twilight-theme-engine/tanstack';

export const Route = createFileRoute('/{-$locale}/account/settings')({
  loader: ({ params }): Promise<SettingsPageProps> => Settings.loader({ locale: params.locale }),
  head: withHead(Settings),
  pendingComponent: () => <CustomerPageSkeleton />,
  component: SettingsComponent,
});

function SettingsComponent() {
  const data: SettingsPageProps = Route.useLoaderData();
  return <Settings.Component {...data} />;
}
```

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

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

Add your own block after the engine's widget. Only the component changes:

```tsx title="app/routes/account.settings.tsx"
function SettingsComponent() {
  const data: SettingsPageProps = Route.useLoaderData();
  return (
    <>
      <Settings.Component {...data} />
      <p className="mt-6 text-sm">Need help? Contact the store.</p>
    </>
  );
}
```

A plugin can also add content without forking, through the `customer:settings.start` and `customer:settings.end` [hook slots](https://docs.salla.dev/twilight/react/hooks/hook-slot).

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

`SettingsPageProps` is `{ page: { title, slug } }`. The loader makes no API call: it checks for a token and returns the translated title. The widget loads and saves preferences in the browser. The head sets the title, description and language alternates.

## Edge cases [#edge-cases]

* **Signed out.** With no token the loader throws `unauthorized()`, and the customer is sent to the home page to sign in, exactly as on [Profile](https://docs.salla.dev/twilight/react/routes/account-profile).
* **Expired token.** The page still renders; the widget's own requests then fail.

## See also [#see-also]

* [Account wishlist](https://docs.salla.dev/twilight/react/routes/account-wishlist), the next account page
* [Account layout](https://docs.salla.dev/twilight/react/routes/account)
* [Authentication and scope](https://docs.salla.dev/twilight/react/api/authentication-and-scope)