Skip to content
Twilight React Playground
ثيم رائدaren

useUser

hookBeginnerserverbrowserlive demo

The logged-in customer as a TanStack Query result, plus an isLoggedIn flag; it never requests anything for guests.

import { useUser, UseUserReturn } from '@salla.sa/twilight-theme-engine/hooks/useUser';

In plain words

Tells you who is shopping. For a guest, isLoggedIn is false and data is null. For a logged-in customer, data becomes their profile (first name, email, avatar, preferences…) once it has loaded.

The result is a TanStack Query result, the library the engine uses to load and cache data, so it also carries isFetching, refetch and the other query fields.

Signature

function useUser(): UseUserReturn

type UseUserReturn = UseQueryResult<User | null> & {
  isLoggedIn: boolean;  // an auth token exists
};

Try it live

Who is shopping, as TanStack Query answers it. The playground never logs in, so you should see a guest.Try this: notice status and fetchStatus: with no auth token the query is disabled, so it never asks the API at all.
Storefront canvas · en · LTR

Hello, guest

useUser(): {…} 5 keys
isLoggedIn: false
status: "success"
fetchStatus: "idle"
isPlaceholderData: true
data: null
What a theme writes
import { useUser } from '@salla.sa/twilight-theme-engine/hooks/useUser';

export function Greeting() {
  const { data: user, isLoggedIn } = useUser();
  if (!isLoggedIn) return <p>Hello, guest</p>;
  if (!user) return <p>Loading your profile…</p>; // or an expired session: see Gotchas
  return <p>Welcome back, {user.first_name}</p>;
}

Example

app/components/header/Greeting.tsx
import { useUser } from '@salla.sa/twilight-theme-engine/hooks/useUser';

export function Greeting() {
  const { data: user, isLoggedIn, isFetching } = useUser();

  if (!isLoggedIn) return <span>Hello, guest</span>;
  if (!user) return <span>{isFetching ? 'Loading…' : 'Your session has expired'}</span>;
  return <span>Hello, {user.first_name}</span>;
}

How it behaves

  • It is useQuery({ ...user.queries.current(), enabled: !!token, placeholderData: null }), with the query key ['user', 'current'] and the endpoint auth/user. Invalidate that key after a login, logout or profile change.

  • The token comes from the engine's request context (getTwilightContext().authToken) while rendering, so it works inside the engine runtime a theme runs in, not in an isolated unit test without that context.

  • Every query field is passed through: status, fetchStatus, refetch, isPlaceholderData, dataUpdatedAt…

  • useGtm and the default Sift handler on body:start call it internally.

Gotchas

  • isLoggedIn only means a token exists. The request function catches every error and resolves null, so an expired or invalid token gives isLoggedIn: true, data: null and isError: false. Treat that combination as "logged out".

  • UseUserReturn is exported only from @salla.sa/twilight-theme-engine/hooks/useUser; the @salla.sa/twilight-theme-engine/hooks barrel exports just useUser.

Related

useGtm

Pushes ecommerce events (view, impressions, click, add to cart, checkout, purchase) to Google Tag Manager's dataLayer when the store has GTM.

useStore

Reads the current store (name, logo, settings, contacts…) and can refresh it from the Salla SDK.

Source and docs