Account profile
The signed-in customer's profile page with the profile form, verification and notification settings.
Framework: TanStack Start
This page is written for TanStack Start, the default and currently supported framework. See what depends on the framework.
The customer edits their name, contact details and verification here, inside the account layout. Customise it to add your own text or blocks around the form, or to retitle the page.
URL
| URL | Notes |
|---|---|
/account/profile | default language |
/ar/account/profile | with a language prefix |
The only param is the optional locale.
Route file
The engine writes this file into app/routes/ the first time it runs.
// @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.
A customised version
Keep the engine's loader and head, and add text above the form:
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
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
- 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
- Account settings, the next account page
- Account layout
- Authentication and scope