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

getAuthToken

functionAdvancedserverbrowserlive demo

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.

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

In plain words

When a shopper signs in, Salla gives the browser a token: a secret string that proves who they are on each request. getAuthToken() returns it, or null for a guest.

Use it as a yes/no question: is someone signed in, so is it worth asking for their orders? Never show it or send it anywhere yourself; the API client already attaches it.

Signature

function getAuthToken(): string | null
// getTwilightContext().authToken
//   ?? on the server:  the `token` request cookie
//   ?? in the browser: the `token` cookie, then Salla.storage.get('token'), then Salla.api.token

Try it live

Whether a customer token exists, as the API client sees it, next to what the provider holds. The playground is a guest.Try this: getAuthToken() is a plain function: nothing re-renders when it changes, so re-read it with the button.
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 { order } from '@salla.sa/twilight-theme-engine/api/order';

export function OrdersCount() {
  const { data } = useQuery({
    ...order.queries.list(),
    enabled: Boolean(getAuthToken()), // skip the request for guests
  });
  return <span>{data?.data.length ?? 0}</span>;
}

Example

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

export function UnreadBadge() {
  const { data } = useQuery({
    ...notification.queries.list(),
    enabled: Boolean(getAuthToken()), // a guest would get HTTP 400
  });
  const unread = data?.data.filter((item) => !item.is_read).length ?? 0;

  return unread > 0 ? <span className="badge">{unread}</span> : null;
}

How it behaves

  • It exists because getTwilightContext().authToken is often null for a signed-in customer: the per-request store does not reach every scope on the server, and the API client can load as a second module instance. The fallback reads the cookie directly (see the comment in client.ts).

  • Built with createIsomorphicFn: the server branch reads the cookie through TanStack Start and is stripped from the browser bundle.

  • loyalty.queries.points() uses it for enabled, and the api client uses the same chain for the Authorization header.

Gotchas

  • It is a plain function, not a hook: nothing re-renders when the customer signs in or out. It is read again on the next render, so compute enabled during render.

  • useUser() checks getTwilightContext().authToken instead, so useUser().isLoggedIn can be false while getAuthToken() finds the cookie. packages/theme-engine/docs/dual-auth-token-sources.md tracks the split.

  • The server and the browser read it from different places. Branch on it for enabled or in an effect, not to render different markup, which risks a hydration mismatch.

Related

user

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

loyalty

Reads the store's loyalty program (ways to earn points, prizes) and the signed-in customer's points balance.

useTwilight

Reads everything TwilightProvider knows: store, theme, settings, language, direction, current page, login token and the Salla SDK.

useUser

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

Source and docs