User data

Use this page when a component shows the customer's name, avatar or preferences, or must behave differently for guests and signed-in customers.

Read itCopy Anchor Link

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

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

  if (!isLoggedIn) return <a href="/login">Sign in</a>;
  if (!user) return <span>...</span>; // signed in, profile not loaded yet
  return <span>Hello, {user.first_name}</span>;
}

useUser has no props. It reads the customer's auth token from the engine and, when there is one, fetches the profile with the user API module (GET auth/user).

What useUser() returnsCopy Anchor Link

The result is a React Query result for User | null, plus isLoggedIn:

type UseUserReturn = UseQueryResult<User | null> & {
  isLoggedIn: boolean;
};

The result is a standard React Query result, so it is not generated from the engine types. The fields you use most:

The rest of the React Query result (status, error, isError, isPlaceholderData) is also there. error stays empty, because the API module turns every failure into null.

The User objectCopy Anchor Link

Example (illustrative values):

Every field except type is optional in the type. created_at is Unix seconds.

UserCopy Anchor Link

preferencesCopy Anchor Link

social_accountsCopy Anchor Link

GuestsCopy Anchor Link

A guest has no auth token, so:

• isLoggedIn is false, data is null, and no request is sent.
• A guest is null, never a User with type: "guest".
• Do not count on the profile being in the server HTML. Render the guest version first and let data fill in.

Common tasksCopy Anchor Link

Show the full name, with a fallback:

const { data: user } = useUser();
const name = [user?.first_name, user?.last_name].filter(Boolean).join(' ') || 'Guest';

Pick the customer's saved language, when there is one:

const { data: user } = useUser();
const language = user?.preferences?.language_code;

Reload the profile after the customer edits it:

const { refetch } = useUser();
await refetch();

Reset the cached profile when the customer signs in or out, see the user API module.

GotchasCopy Anchor Link

• Do not use data to decide whether the customer is signed in. Use isLoggedIn for "is there a session" and data for "do I have the profile".
• created_at is seconds, not milliseconds. Use new Date(user.created_at * 1000).
• Don't log the profile or put it in a page that is cached for other visitors; it is personal data.

NextCopy Anchor Link

• user API module for the request behind useUser.
• Authentication and scope for how the token reaches API calls.
• Cart data and the Data overview.