# Hooks (/themes/sdk/reference/customer/hooks)

```ts
import { … } from '@poltura/theme-sdk/customer';
```

## `useCustomer` [#usecustomer]

The signed-in shopper and the way out.

```ts
useCustomer(): CustomerState
```

Signing out clears the shopper's session, cart and account data.

**Returns:** The customer, or null for a guest; the status; and the sign-out action.

**Example**

```tsx
import { useCustomer } from '@poltura/theme-sdk/customer';

export function Greeting() {
  const { customer, signOut } = useCustomer();
  if (customer === null) return null;
  return <button onClick={() => void signOut()}>Sign out {customer.displayName}</button>;
}
```

## `useAccount` [#useaccount]

The account area's shell: the shopper and the account navigation, including installed apps' and store features' pages.

```ts
useAccount(): AccountView
```

Reads the account template, so it works inside the account section only.

**Returns:** The shopper, the navigation in order and whether the shopper is signed in.

**Example**

```tsx
import { AccountNav, useAccount } from '@poltura/theme-sdk/customer';

export function AccountLinks() {
  const { navigation } = useAccount();
  return <AccountNav items={navigation} />;
}
```

## `useOrders` [#useorders]

One page of the signed-in shopper's order history, newest first.

```ts
useOrders(request?: OrdersRequest): QueryResult<OrderPage>
```

The status filter keeps the matching orders among the requested page's, so a filtered page can hold fewer than `limit` orders.

**Parameters**

- `request?: OrdersRequest`: The page, its size and a status filter; the first page of every order by default.

**Returns:** The page once it loads, the read's status and a refetch.

**Example**

```tsx
import { OrderCard, useOrders } from '@poltura/theme-sdk/customer';

export function OrderHistory() {
  const { data } = useOrders({ limit: 5 });
  return <div>{data?.items.map((order) => <OrderCard key={order.id} order={order} />)}</div>;
}
```

## `useAddresses` [#useaddresses]

The signed-in shopper's address book with the actions that change it.

```ts
useAddresses(): AddressBookState
```

**Returns:** The addresses, their status and the actions that add, change, delete and pick defaults.

**Example**

```tsx
import { useAddresses } from '@poltura/theme-sdk/customer';

export function AddressCount() {
  const { addresses } = useAddresses();
  return <span>{addresses.length}</span>;
}
```

## `useOrder` [#useorder]

One of the signed-in shopper's orders.

```ts
useOrder(by: {
    readonly id: string;
}): OrderState
```

**Parameters**

- `by: { readonly id: string; }`: The order's id.

**Returns:** The order once it loads, or null when the shopper has no such order.

**Example**

```tsx
import { useOrder } from '@poltura/theme-sdk/customer';

export function OrderNumber({ id }: { id: string }) {
  const { order } = useOrder({ id });
  return <span>{order?.number ?? ''}</span>;
}
```

## `useAuthForm` [#useauthform]

The state of a sign-in, registration or password form, for a theme that draws the form itself.

```ts
useAuthForm(mode: AuthMode): AuthFormState
```

The host runs the captcha, the session and the redirect; signing in and registering emit the login and sign-up events. Registering sends the shopper on to the sign-in page with the company details [`BusinessSignUpFields`](/themes/sdk/reference/customer/parts-3#businesssignupfields) collected, the `magicLink` mode emails a one-time sign-in link, and a new password shows a confirmation and moves on to the sign-in page.

**Parameters**

- `mode: AuthMode`: Which form it drives; resetting a password reads its token from the address.

**Returns:** The fields, values, errors and submit.

**Example**

```tsx
import { useAuthForm } from '@poltura/theme-sdk/customer';

export function ForgotPassword() {
  const form = useAuthForm('forgotPassword');
  if (form.status === 'done') return <p>Check your inbox.</p>;
  return (
    <form onSubmit={(event) => { event.preventDefault(); void form.submit(); }}>
      <input value={form.values.email} onChange={(event) => form.setValue('email', event.target.value)} />
      {form.error === null ? null : <p>{form.error}</p>}
      <button disabled={form.status === 'submitting'}>Send</button>
    </form>
  );
}
```

## `useEmailCodeStep` [#useemailcodestep]

The state of the verify page, for a theme that draws the step of an emailed code itself.

```ts
useEmailCodeStep(): EmailCodeStepState
```

Works inside the verify page's main section only. The host keeps the step and the code in this browser's cookie, never in the page; a sign-up asks for its password here, and a password reset moves on to the new-password page.

**Returns:** The phase, the values, the error and submit.

**Example**

```tsx
import { useEmailCodeStep } from '@poltura/theme-sdk/customer';

export function VerifyCode() {
  const step = useEmailCodeStep();
  if (step.phase === 'expired') return <p>This link no longer works.</p>;
  return (
    <form onSubmit={(event) => { event.preventDefault(); void step.submit(); }}>
      {step.phase === 'code' ? (
        <input value={step.values.code} onChange={(event) => step.setValue('code', event.target.value)} />
      ) : null}
      {step.error === null ? null : <p>{step.error}</p>}
      <button disabled={step.busy}>Continue</button>
    </form>
  );
}
```