Skip to content

Commit 3f21bed

Browse files
field123field123
authored
feat: shopper account example (#401)
* feat: add shopper accounts auth example * chore: update readme
1 parent b63f5e6 commit 3f21bed

29 files changed

+2030
-0
lines changed

‎examples/shopper-accounts-authentication/.gitignore

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.*
7+
.yarn/*
8+
!.yarn/patches
9+
!.yarn/plugins
10+
!.yarn/releases
11+
!.yarn/versions
12+
13+
# testing
14+
/coverage
15+
16+
# next.js
17+
/.next/
18+
/out/
19+
20+
# production
21+
/build
22+
23+
# misc
24+
.DS_Store
25+
*.pem
26+
27+
# debug
28+
npm-debug.log*
29+
yarn-debug.log*
30+
yarn-error.log*
31+
.pnpm-debug.log*
32+
33+
# env files (can opt-in for committing if needed)
34+
.env*
35+
36+
# vercel
37+
.vercel
38+
39+
# typescript
40+
*.tsbuildinfo
41+
next-env.d.ts

‎examples/shopper-accounts-authentication/README.md

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
# Shopper Accounts Authentication Example
2+
3+
This example demonstrates how to implement authentication for shopper accounts in an Elastic Path Commerce Cloud (EPCC) application. It provides a simple implementation of login, registration, and account management.
4+
5+
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Felasticpath%2Fcomposable-frontend%2Ftree%2Fmain%2Fexamples%2Fshopper-accounts-authentication&env=NEXT_PUBLIC_EPCC_CLIENT_ID,NEXT_PUBLIC_EPCC_ENDPOINT_URL,NEXT_PUBLIC_PASSWORD_PROFILE_ID&project-name=ep-shopper-accounts-authentication)
6+
7+
## Features
8+
9+
- User registration and login
10+
- Authentication with EPCC's account members API
11+
- Protected account pages
12+
- Session management with cookies
13+
- Form validation
14+
- Centralized API client configuration for server-side calls
15+
16+
## Configuration
17+
18+
### Environment Variables
19+
20+
Create a `.env.local` file in the root of the project with the following variables:
21+
22+
```
23+
NEXT_PUBLIC_EPCC_ENDPOINT_URL=https://api.moltin.com
24+
NEXT_PUBLIC_EPCC_CLIENT_ID=your_client_id
25+
NEXT_PUBLIC_PASSWORD_PROFILE_ID=your_password_profile_id
26+
```
27+
28+
You'll need to set up a password profile in your EPCC account to enable authentication.
29+
30+
## Getting Started
31+
32+
### Prerequisites
33+
34+
- Node.js 18+
35+
- pnpm or npm
36+
37+
### Installation
38+
39+
```bash
40+
pnpm install
41+
# or
42+
npm install
43+
```
44+
45+
### Development
46+
47+
```bash
48+
pnpm dev
49+
# or
50+
npm run dev
51+
```
52+
53+
### Building for Production
54+
55+
```bash
56+
pnpm build
57+
# or
58+
npm run build
59+
```
60+
61+
## How it Works
62+
63+
### Authentication Flow
64+
65+
1. **Registration**: New users can register with their email, password, and name
66+
2. **Login**: Existing users can log in with their email and password
67+
3. **Token Storage**: Authentication tokens are stored in cookies
68+
4. **Protected Routes**: Account pages are protected and redirect to login if not authenticated
69+
70+
### Client Configuration
71+
72+
The example uses a centralized `configureClient` function for all server-side API calls, which:
73+
74+
1. Configures the client with the appropriate base URL
75+
2. Adds an interceptor to automatically include authentication tokens from cookies
76+
3. Makes the client available for server actions and components
77+
78+
This approach ensures that all server-side API calls are properly authenticated and follow the same configuration pattern.
79+
80+
### Project Structure
81+
82+
- `/src/app/(auth)` - Authentication-related pages (login/register)
83+
- `/src/app/account` - Account management pages
84+
- `/src/lib/auth.ts` - Helper functions for authentication
85+
- `/src/lib/api-client.ts` - Client configuration for server-side API calls
86+
- `/src/components/ui.tsx` - Reusable UI components
87+
88+
## Security Considerations
89+
90+
- Tokens are stored in HttpOnly cookies to prevent XSS attacks
91+
- Form validation is performed on both client and server
92+
- Passwords are never stored in the application
93+
- API client is only configured on the server side, not exposed to the client
94+
95+
## Learn More
96+
97+
To learn more about EPCC account authentication, visit the [Elastic Path documentation](https://documentation.elasticpath.com/commerce-cloud/docs/developer/authentication/index.html).

‎examples/shopper-accounts-authentication/next.config.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import type { NextConfig } from "next";
2+
3+
const nextConfig: NextConfig = {
4+
/* config options here */
5+
};
6+
7+
export default nextConfig;

‎examples/shopper-accounts-authentication/package.json

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "shopper-accounts-authentication",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"dev": "next dev",
7+
"build": "next build",
8+
"start": "next start",
9+
"lint": "next lint"
10+
},
11+
"dependencies": {
12+
"@epcc-sdk/sdks-shopper": "^0.0.27",
13+
"next": "15.3.1",
14+
"react": "^19.0.0",
15+
"react-dom": "^19.0.0",
16+
"zod": "^3.22.4"
17+
},
18+
"devDependencies": {
19+
"@tailwindcss/postcss": "^4",
20+
"@types/node": "^20",
21+
"@types/react": "^19",
22+
"@types/react-dom": "^19",
23+
"tailwindcss": "^4",
24+
"typescript": "^5"
25+
}
26+
}

0 commit comments

Comments
 (0)