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

user

objectBeginnerserverbrowserlive demo

Fetches the signed-in customer's profile; for a guest, or after any failure, it resolves to null instead of throwing.

import { user } from '@salla.sa/twilight-theme-engine/api/user';

In plain words

When a shopper signs in, the store knows who they are: name, email, preferences. user.get() asks for that profile. There is nothing to ask for a guest (a visitor who has not signed in), so it gives null.

Most components should use the useUser hook, which wraps this query and skips it for guests.

Signature

user.get(): Promise<User | null>   // GET auth/user → { ...data, type: 'user' }; null on any error
user.queries.current()             // key ['user', 'current']

interface User {
  type: 'guest' | 'user';
  id?: number;
  first_name?: string;
  last_name?: string;
  email?: string;
  mobile?: string;
  avatar?: string;
  preferences?: { currency_code: string; language_code: string; name_visible: boolean; notifications_enabled: boolean };
  // … country_code, gender, birthday, created_at, social_accounts
}

Try it live

Who is shopping, asked of the API directly. The playground never signs in, so you should see a guest.Try this: read status and fetchStatus: pending and idle means the query is waiting for a token and has sent nothing.
Storefront canvas · ar · RTL
Runs in the browser…
What a theme writes
import { useQuery } from '@tanstack/react-query';
import { getAuthToken } from '@salla.sa/twilight-theme-engine/api/client';
import { user } from '@salla.sa/twilight-theme-engine/api/user';

export function AccountGreeting() {
  const { data: customer } = useQuery({
    ...user.queries.current(),
    enabled: Boolean(getAuthToken()),
  });

  // null for a guest, and also for any failed request.
  if (!customer) return <a href="#login">Sign in</a>;
  return <span>Hello, {customer.first_name}</span>;
}

Example

app/components/layout/AccountLabel.tsx
import { useQuery } from '@tanstack/react-query';
import { getAuthToken } from '@salla.sa/twilight-theme-engine/api/client';
import { user } from '@salla.sa/twilight-theme-engine/api/user';

export function AccountLabel() {
  const { data: customer } = useQuery({
    ...user.queries.current(),
    enabled: Boolean(getAuthToken()), // no request for guests
  });

  return <span>{customer ? customer.first_name : 'Sign in'}</span>;
}

How it behaves

  • It needs a customer token. A guest request answers HTTP 400 with token_not_provided (demo store), which get turns into null with a console.debug.

  • useUser() spreads user.queries.current() with enabled: !!getTwilightContext().authToken and placeholderData: null, and adds isLoggedIn.

  • The key is fixed, so after a login, a logout or a profile change, invalidate user.queries.current().queryKey or write the new value with setQueryData.

Gotchas

  • A failed request looks exactly like a guest: a timeout, a 500 and an expired token all resolve to null. Check getAuthToken() to tell "not signed in" from "could not load".

  • docs/07-data-types.md lists name, language and can_access_wallet on User. The type has none of them; it has first_name, last_name, preferences and social_accounts.

Related

useUser

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

getAuthToken

Returns the customer's login token the way the API client finds it, or null for a guest; use it to switch customer-only queries on.

profile

Two writes on the signed-in customer's account: save one on/off preference, or delete the account.

Source and docs