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:
import { useCustomerType, useCustomerId } from "@salesforce/commerce-sdk-react";
const { isGuest, isRegistered } = useCustomerType();
const customerId = useCustomerId();
Storefront Next exposes a subset of session data through the useAuth() hook:
import { useAuth } from "@/providers/auth";
const session = useAuth();
// session.userType, session.customerId, session.usid