Storage and Sessions Differences with PWA Kit

PWA Kit manages auth on both client and server through commerce-sdk-react. Storefront Next handles auth exclusively on the server through middleware and stores tokens in httpOnly cookies that client-side JavaScript can’t access.

Key Differences

Aspect	PWA Kit	Storefront Next
Auth management	`commerce-sdk-react` Auth class	Server auth middleware
Access token	localStorage (`access_token_{siteId}`)	Cookie (`cc-at_{siteId}`)
Other session data	localStorage	Cookies
Server-side storage	In-memory (`MemoryStorage`)	Request cookies only (stateless)
Auth calls	Client and server (via `commerce-sdk-react`)	Server-only (via middleware and SCAPI clients)
Token refresh	SDK refreshes on both client and server when token is expired	Middleware refreshes on server before route handlers

Auth Flow

In PWA Kit, auth runs on both server and client. During SSR, commerce-sdk-react uses in-memory storage because browser APIs aren’t available. On the client, the SDK initiates the SLAS OAuth flow (guest login) and stores tokens in localStorage and cookies. On subsequent navigations, the SDK checks for existing tokens before making new auth calls, and handles token refresh and registered login as needed.

In Storefront Next, auth runs exclusively on the server. For details, see Storage and Sessions.

Accessing Auth Data in Components

PWA Kit exposes auth state through commerce-sdk-react hooks:

1import { useCustomerType, useCustomerId } from "@salesforce/commerce-sdk-react";
2
3const { isGuest, isRegistered } = useCustomerType();
4const customerId = useCustomerId();

Storefront Next exposes a subset of session data through the useAuth() hook:

1import { useAuth } from "@/providers/auth";
2
3const session = useAuth();
4// session.userType, session.customerId, session.usid