feat: working pwa example

Author: field123

examples/pwa-authentication/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@epcc-sdk/sdks-shopper": "^0.0.28",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },

examples/pwa-authentication/pnpm-lock.yaml

@@ -1,33 +1,76 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
+import { useEffect, useState } from "react"
+import "./App.css"
+import {
+  getByContextAllProducts,
+  ProductListData,
+} from "@epcc-sdk/sdks-shopper"
 
 function App() {
-  const [count, setCount] = useState(0)
+  const [products, setProducts] = useState<ProductListData["data"]>([])
+  const [isAuthenticated, setIsAuthenticated] = useState(false)
+
+  const fetchProducts = async () => {
+    try {
+      const response = await getByContextAllProducts()
+      setProducts(response.data?.data || [])
+      if (response.data?.data && response.data?.data.length > 0) {
+        setIsAuthenticated(true)
+      }
+    } catch (error) {
+      console.error("Failed to fetch products:", error)
+      setIsAuthenticated(false)
+    }
+  }
+
+  useEffect(() => {
+    fetchProducts()
+  }, [])
 
   return (
     <>
-      <div>
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
+      <div className="mb-6 border-b border-gray-300 pb-3">
+        <h1 className="text-xl font-medium mb-2 text-black">
+          Storefront Authentication Demo (PWA)
+        </h1>
+        <p className="text-black">
+          Status:{" "}
+          {isAuthenticated ? (
+            <span className="font-semibold text-green-800">
+              Storefront successfully authenticated
+            </span>
+          ) : (
+            <span className="font-semibold text-red-800">
+              Storefront not authenticated
+            </span>
+          )}
         </p>
       </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
+
+      <div>
+        <h2 className="text-lg font-medium mb-3 text-black">Product List</h2>
+        {products?.length === 0 ? (
+          <p className="text-black">No products found.</p>
+        ) : (
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+            {products?.map((product) => (
+              <div
+                key={product.id}
+                className="bg-white shadow-md rounded-lg p-4 border border-gray-200"
+              >
+                <div
+                  className="text-base text-black font-semibold mb-1 truncate"
+                  title={product.attributes?.name}
+                >
+                  {product.attributes?.name}
+                </div>
+                <div className="text-sm text-gray-600">
+                  SKU: {product.attributes?.sku}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
     </>
   )
 }

examples/pwa-authentication/src/App.tsx

@@ -0,0 +1,87 @@
+"use client"
+
+import React, { useCallback, useEffect } from "react"
+import {
+  AccessTokenResponse,
+  client,
+  createAnAccessToken,
+} from "@epcc-sdk/sdks-shopper"
+import { CREDENTIALS_COOKIE_KEY } from "../constants"
+
+function tokenExpired(expires: number): boolean {
+  return Math.floor(Date.now() / 1000) >= expires
+}
+
+client.setConfig({
+  baseUrl: import.meta.env.VITE_APP_EPCC_ENDPOINT_URL!,
+})
+
+export function StorefrontProvider({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const interceptor: Parameters<typeof client.interceptors.request.use>[0] =
+    useCallback(async (request) => {
+      // Bypass interceptor logic for token requests to prevent infinite loop
+      if (request.url?.includes("/oauth/access_token")) {
+        return request
+      }
+
+      let credentials = JSON.parse(
+        localStorage.getItem(CREDENTIALS_COOKIE_KEY) ?? "{}",
+      ) as AccessTokenResponse | undefined
+
+      // check if token expired or missing
+      if (
+        !credentials?.access_token ||
+        (credentials.expires && tokenExpired(credentials.expires))
+      ) {
+        const clientId = import.meta.env.VITE_APP_EPCC_CLIENT_ID
+
+        if (!clientId) {
+          throw new Error("Missing storefront client id")
+        }
+
+        const authResponse = await createAnAccessToken({
+          body: {
+            grant_type: "implicit",
+            client_id: clientId,
+          },
+        })
+
+        /**
+         * Check response did not fail
+         */
+        if (!authResponse.data) {
+          throw new Error("Failed to get access token")
+        }
+
+        const token = authResponse.data
+
+        // Store the credentials in localStorage
+        localStorage.setItem(CREDENTIALS_COOKIE_KEY, JSON.stringify(token))
+        credentials = token
+      }
+
+      if (credentials?.access_token) {
+        request.headers.set(
+          "Authorization",
+          `Bearer ${credentials.access_token}`,
+        )
+      }
+      return request
+    }, [])
+
+  // Auto-authenticate if not already authenticated
+  useEffect(() => {
+    // Add request interceptor to include the token in requests
+    client.interceptors.request.use(interceptor)
+
+    return () => {
+      client.interceptors.request.eject(interceptor)
+    }
+  }, [])
+
+  return <>{children}</>
+}

examples/pwa-authentication/src/auth/StorefrontProvider.tsx

@@ -0,0 +1,3 @@
+export const EPCC_ENDPOINT_URL = import.meta.env.VITE_APP_EPCC_ENDPOINT_URL
+export const COOKIE_PREFIX_KEY = "_store"
+export const CREDENTIALS_COOKIE_KEY = `${COOKIE_PREFIX_KEY}_ep_credentials`

examples/pwa-authentication/src/constants.ts

@@ -1,10 +1,13 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
+import React from "react"
+import ReactDOM from "react-dom/client"
+import App from "./App.tsx"
+import "./index.css"
+import { StorefrontProvider } from "./auth/StorefrontProvider.tsx"
 
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <StorefrontProvider>
+      <App />
+    </StorefrontProvider>
+  </React.StrictMode>,
 )

examples/pwa-authentication/src/main.tsx

@@ -10,7 +10,6 @@
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
     "moduleDetection": "force",
     "noEmit": true,
     "jsx": "react-jsx",

examples/pwa-authentication/tsconfig.app.json

@@ -9,7 +9,6 @@
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
     "moduleDetection": "force",
     "noEmit": true,