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



<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 edits their name, contact details and verification here, inside the [account layout](https://docs.salla.dev/twilight/react/routes/account). Customise it to add your own text or blocks around the form, or to retitle the page.

## URL [#url]

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

The only param is the optional `locale`.

## Route file [#route-file]

The engine writes this file into `app/routes/` the first time it runs.

```tsx title="app/routes/account.profile.tsx"
// @auto-generated
import { createFileRoute } from '@tanstack/react-router';
import { Profile } from '@salla.sa/twilight-theme-engine/routes/account';
import type { ProfilePageProps } 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/profile')({
  loader: ({ params }): Promise<ProfilePageProps> => Profile.loader({ locale: params.locale }),
  head: withHead(Profile),
  pendingComponent: () => <CustomerPageSkeleton />,
  component: ProfileComponent,
});

function ProfileComponent() {
  const data: ProfilePageProps = Route.useLoaderData();
  return <Profile.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]

Keep the engine's loader and head, and add text above the form:

```tsx title="app/routes/account.profile.tsx"
import { createFileRoute } from '@tanstack/react-router';
import { Profile } from '@salla.sa/twilight-theme-engine/routes/account';
import type { ProfilePageProps } 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/profile')({
  loader: ({ params }): Promise<ProfilePageProps> => Profile.loader({ locale: params.locale }),
  head: withHead(Profile),
  pendingComponent: () => <CustomerPageSkeleton />,
  component: function ProfileRoute() {
    const data: ProfilePageProps = Route.useLoaderData();
    return (
      <section>
        <p className="mb-4">Keep your details up to date.</p>
        <Profile.Component {...data} />
      </section>
    );
  },
});
```

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

`ProfilePageProps` is `{ page: { title, slug } }`. The loader makes no API call. It checks that a token exists and returns the translated title. The form itself loads in the browser through `useUser()` and the Salla web components, so its content is not in the server HTML.

The head sets the title, description and language alternates.

## Edge cases [#edge-cases]

* **Signed out.** With no token the loader throws `unauthorized()`: the customer is sent to the home page with `?intended_to=` holding this page, the Salla SDK opens the sign-in form there, and they return here after signing in.
* **Expired token.** The loader makes no API call, so it passes this check; the form then fails when it calls the API.

## See also [#see-also]

* [Account settings](https://docs.salla.dev/twilight/react/routes/account-settings), 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)