Cuentas de cliente

Las cuentas son opcionales para navegar y comprar como invitado. Para login, perfil, direcciones y pedidos necesitas Better Auth y el proxy same-origin.

1. Servidor de autenticación

lib/auth.ts

import { createStorefrontAuth } from "@ecomiq/storefront";

export const auth = createStorefrontAuth();

Expón su handler:

pages/api/auth.$.ts

import { auth } from "../../lib/auth";

type ApiHandlerArgs = {
  request: Request;
};

async function handle({ request }: ApiHandlerArgs) {
  return auth.handler(request);
}

export const GET = handle;
export const POST = handle;

También debes crear pages/api/$.ts con proxyStorefrontRequest, como se muestra en páginas y rutas.

2. Cliente y provider

lib/auth-client.ts

import { createStorefrontAuthClient } from "@ecomiq/storefront";

export const authClient = createStorefrontAuthClient();

El layout debe montar AuthProvider. Si usarás carrito y checkout, monta ambos:

layout.tsx

import { AuthProvider, CartProvider, defineLayout } from "@ecomiq/storefront";
import { authClient } from "./lib/auth-client";

export default defineLayout(({ children, settings }) => (
  <AuthProvider client={authClient}>
    <CartProvider
      storeId={settings.store.id}
      currencyCode={settings.store.currency}
    >
      {children}
    </CartProvider>
  </AuthProvider>
));

El layout predeterminado no instala estos providers.

3. Sesión

import { useAuth } from "@ecomiq/storefront";

export function SessionButton({
  email,
  password,
}: {
  email: string;
  password: string;
}) {
  const { session, isPending, signIn, signOut } = useAuth();

  if (isPending) return <span>Cargando…</span>;

  if (!session?.user) {
    return (
      <button onClick={() => void signIn({ email, password })}>
        Iniciar sesión
      </button>
    );
  }

  return <button onClick={() => void signOut()}>Cerrar sesión</button>;
}

4. Registro

registerCustomer necesita el cliente del proxy:

import { createStorefrontProxyApi, registerCustomer } from "@ecomiq/storefront";

await registerCustomer(createStorefrontProxyApi(), {
  email: "andrea@ejemplo.pe",
  password: "una-clave-segura",
  firstName: "Andrea",
  lastName: "Ramos",
  countryIsoCode: "PE",
  phone: "+51 999 888 777",
});

Después del registro, llama a signIn para crear la sesión.

Rutas de cuenta

El framework genera y protege:

/account/ — perfil.
/account/addresses — direcciones.
/account/orders y /account/orders/:orderId — pedidos.
/account/devices — pantalla informativa; el endpoint de dispositivos aún no existe.

/login y /register no se generan. Debes crearlas en pages/.

Los helpers getCustomerMe, patchCustomer, getCustomerAddresses, createCustomerAddress, updateCustomerAddress, deleteCustomerAddress, getCustomerOrders y getCustomerOrder reciben primero un Api:

import { createStorefrontProxyApi, getCustomerMe } from "@ecomiq/storefront";

const customer = await getCustomerMe(createStorefrontProxyApi());

Variables del servidor

Variable	Uso
`BETTER_AUTH_SECRET`	Secreto de sesión; defínelo como secreto en producción.
`STOREFRONT_API_URL`	URL usada por el login; por defecto `https://storefront.ecomiq.pe`.
`BETTER_AUTH_TRUSTED_HOSTS`	Hosts permitidos separados por comas; normalmente es opcional.

API de login

api.baseUrl de ecomiq.config.js configura serverApi, pero el login de Better Auth usa STOREFRONT_API_URL. Si trabajas contra otro entorno, define ambos con la misma API.