Skip to main content

Quick Start

Why you need this guide ⚡​

Every storefront request to Elastic Path Commerce Cloud must carry an access-token in the Authorization header. For browser code you nearly always use an implicit shopper token – a scoped, read-mostly token that keeps your client_secret out of the client bundle. This guide shows the shortest path: configure the TypeScript Shopper SDK, fetch an implicit token, and prove the token works.

note

Account tokens are also available for authenticated user scenarios, but are not covered in this quickstart. See the Token Management guide for detailed information about account tokens and other authentication methods.

Prerequisites​

WhatValue
API base URLhttps://euwest.api.elasticpath.com
Application client-ID<YOUR_CLIENT_ID>
Packagenpm i @epcc-sdk/sdks-shopper

1 · Install & configure the SDK​

import { client } from "@epcc-sdk/sdks-shopper";

client.setConfig({
  baseUrl: "https://euwest.api.elasticpath.com",
});

2 · Get an implicit shopper token​

For local / demo use you can request a token with resource-owner password (one HTTP round-trip)

import { createAnAccessToken } from "@epcc-sdk/sdks-shopper";

const tokenResponse = await createAnAccessToken({
  grant_type: "implicit",
  client_id: process.env.CLIENT_ID,
});

const access_token = tokenResponse.data?.access_token;

// Save the token after obtaining it
localStorage.setItem("ep_token", access_token);

Returns
access_token – bearer string
expires_in – seconds until expiry (default ≈ 3600)

info

client_id is public-safe; it only identifies your application and carries no secret.

3 · Attach the token using interceptor​

// Set up request interceptor to add token to all requests
client.interceptors.request.use(async (config) => {
  const token = localStorage.getItem("ep_token") ?? "";
  config.headers.Authorization = `Bearer ${token}`;
  return config;
});

4 · Test the token​

import { listProducts } from "@epcc-sdk/sdks-shopper";

const products = await listProducts();
console.log(`Found ${products.data.length} products`);
tip

For complete working implementations, check our Composable Frontend examples repository which includes ready-to-use patterns for:

For more complex authentication scenarios including token refresh strategies, see the Token Management guide.