feat: react spa auth example

[field123]

Describe your changes

✨ New Example: SPA Authentication with Vite and Local Storage

This PR introduces a new example application, spa-authentication, demonstrating client-side authentication with Elastic Path Commerce Cloud using local storage in a Single Page Application (SPA) context. The application is built with React and Vite.

Key Features & Changes:

• New SPA Example (examples/spa-authentication):
  • Provides a fully client-side solution for authenticating against EPCC.
  • Uses Vite for a fast development experience.
  • Demonstrates fetching and displaying products post-authentication.
• Authentication Logic (StorefrontProvider.tsx):
  • Adapted from the authentication-local-storage example.
  • Manages SDK client configuration and request interceptors.
  • Handles implicit grant flow for token acquisition and stores tokens in localStorage.
  • Automatically refreshes expired tokens.
  • Includes a mechanism in the SDK interceptor to prevent infinite loops during token refresh by checking if the request is to the /oauth/access_token endpoint.
  • Uses Vite-specific environment variables (import.meta.env.VITE_APP_...) for configuration.
• Product Display (App.tsx):
  • Fetches products using @epcc-sdk/sdks-shopper.
  • Displays products in a responsive card-based layout using Tailwind CSS.
• Comprehensive README (examples/spa-authentication/README.md):
  • Detailed documentation for the new example, inspired by the authentication-local-storage README but tailored for this Vite SPA.
  • Covers setup, authentication flow, SDK usage, project structure, environment variable configuration, and security considerations related to local storage.
• Environment Setup:
  • Includes an .env.example file and instructions for configuring necessary EPCC credentials (Client ID and Endpoint URL).
• Dependency Management:
  • Adds @epcc-sdk/sdks-shopper to the spa-authentication project's dependencies.

Purpose:

This example serves as a guide for developers looking to implement storefront authentication in a modern SPA stack using Vite and React, leveraging local storage for token management. It highlights how to use the EPCC SDK for authentication and data fetching in such an environment, while also pointing out important security considerations.

How to Test:

1. Ensure the example directory has been renamed to examples/spa-authentication.
2. Navigate to examples/spa-authentication.
3. Create a .env file from .env.example and populate it with your EPCC credentials.
4. Run pnpm install (or npm install/yarn install).
5. Run pnpm dev (or npm run dev/yarn dev).
6. Open the application in your browser and verify that authentication occurs and products are displayed.

Issue ticket number and link

n/a

Checklist before requesting a review

• I have performed a self-review of my code
• If it is a core feature, I have added thorough tests.
• I've added a Changeset for my changes - Click here to learn what changesets are, and how to add one

[changeset-bot]

⚠️ No Changeset found

Latest commit: 5acf77c

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
commerce-essentials	❌ Failed (Inspect)			May 15, 2025 4:03pm
composable-frontend-docs	❌ Failed (Inspect)			May 15, 2025 4:03pm
composable-frontend-simple	❌ Failed (Inspect)		💬 Add feedback	May 15, 2025 4:03pm

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
composable-frontend-algolia	⬜️ Ignored (Inspect)			May 15, 2025 4:03pm