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

AUTH_TOKEN_COOKIE_NAME, extractTokenFromCookies, clearAuthTokenCookie

functionAdvancedserverbrowserlive demo

The customer's session cookie: its name, a reader that pulls one cookie out of a Cookie header, and a function that deletes it.

import { AUTH_TOKEN_COOKIE_NAME, extractTokenFromCookies, clearAuthTokenCookie } from '@salla.sa/twilight-theme-engine/utils';

In plain words

When a shopper signs in, the engine copies their login token (a secret string that proves who they are) into a cookie named token, so the server can render their account pages on the next full page load. AUTH_TOKEN_COOKIE_NAME is that name. extractTokenFromCookies(header, name) reads one cookie's value out of a Cookie header string, and clearAuthTokenCookie() deletes the cookie in the browser.

Treat the value as a secret: never show it, log it, or send it anywhere yourself.

Signature

const AUTH_TOKEN_COOKIE_NAME: 'token'

function extractTokenFromCookies(cookieHeader: string | null, cookieName: string): string | null
function clearAuthTokenCookie(): void   // browser only

Try it live

Reads one cookie out of a Cookie header string. The header here is a made-up sample, not your browser cookies.Try this: change the name to xtoken, then to salla_sid. Empty the token value (token=;): the result is null, not an empty string.
Storefront canvas · en · LTR
AUTH_TOKEN_COOKIE_NAME
"token"
extractTokenFromCookies(header, "token")
"abc 123"
Controls
What a theme writes
import { AUTH_TOKEN_COOKIE_NAME, extractTokenFromCookies } from '@salla.sa/twilight-theme-engine/utils';

/** Whether a request carries a cookie, for example in a server function. */
export function hasCookie(request: Request): boolean {
  const cookies = request.headers.get('cookie');
  return extractTokenFromCookies(cookies, AUTH_TOKEN_COOKIE_NAME) !== null;
}

Example

app/lib/session.ts
import {
  AUTH_TOKEN_COOKIE_NAME,
  clearAuthTokenCookie,
  extractTokenFromCookies,
} from '@salla.sa/twilight-theme-engine/utils';

/** On the server: does this request carry a customer session? */
export function hasSessionCookie(request: Request): boolean {
  return extractTokenFromCookies(request.headers.get('cookie'), AUTH_TOKEN_COOKIE_NAME) !== null;
}

/** In the browser, before your own sign-out flow asks the SDK to log out. */
export function forgetSessionCookie(): void {
  clearAuthTokenCookie();
}

How it behaves

  • twilightMiddleware() reads the token from each request with extractTokenFromCookies; its cookieName option defaults to this constant. The API client and the root route's beforeLoad fall back to the same cookie.

  • TwilightProvider writes the cookie when the SDK fetches a token (token=…; path=/; max-age=2592000; SameSite=Lax; Secure) and clears it itself on the SDK's logout and invalid-token events.

  • extractTokenFromCookies matches the name only at the start of the header or after ; or a space, so xtoken is not token. It URI-decodes the value, and keeps the raw value if decoding fails.

  • clearAuthTokenCookie() writes token=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/. On the server it does nothing.

Gotchas

  • clearAuthTokenCookie() only deletes the cookie: the SDK still considers the customer signed in. Call the SDK's logout as well, as theme-tania's account page does.

  • An empty value returns null, not '', so !== null means a non-empty value is present.

  • It deletes only the cookie at path=/ with no domain. A token cookie written with another path or a domain attribute stays.

Related

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.

useUser

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

Source and docs