# 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](/docs/commerce/b2c-commerce/guide/sfnext-storage-sessions.md).

## Accessing Auth Data in Components

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

```typescript
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:

```typescript
import { useAuth } from "@/providers/auth";

const session = useAuth();
// session.userType, session.customerId, session.usid
```
