goi
/
goi-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

client 만 남기고 정리

This commit is contained in:
Hyojin Ahn 2026-06-16 11:26:53 -04:00
parent a4d4ae2183
commit bfaa627fdf
45 changed files with 835 additions and 3505 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.example Normal file
View File

@ -0,0 +1,2 @@
VITE_AUTH_SERVICE_URL=/auth-service
VITE_OPR_API_URL=/opr-rest-api

14
.gitignore vendored
View File

@ -1,12 +1,9 @@
# Node
node_modules/
apps/*/node_modules/
# Build outputs
dist/
build/
apps/*/dist/
apps/*/build/
# Env and logs
.env
@ -16,14 +13,3 @@ apps/*/build/
.vscode/
!.vscode/extensions.json
.DS_Store
# My ignore list
_bin/
apps/*/_bin/
*.bu.html
*.bu.json
*.bu.css
*.bu.jsx
*.bu.js
*.bu.md

339
README.md
View File

@ -1,314 +1,71 @@
# JWT Auth Example (HttpOnly Cookies)
# goi-web client
[![Node.js](https://img.shields.io/badge/Node.js-20-green)](https://nodejs.org/)
[![React](https://img.shields.io/badge/React-19-blue)](https://react.dev/)
[![Vite](https://img.shields.io/badge/Vite-7-purple)](https://vitejs.dev/)
[![License](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
Vite + React front end for JWT authentication using **HttpOnly cookies**, intended to run
against a **Spring Boot** backend. This is the standalone client extracted from the original
monorepo (the Express `apps/server` and monorepo wrapper were removed).
A **beginner-friendly monorepo** demonstrating secure JWT authentication using **HttpOnly cookies** with:
- **Express.js** (Node.js) backend
- **Vite + React** frontend
---
**初心者向けモノレポ** で、**HttpOnly Cookie** を使った安全な JWT 認証を示します：
- **Express.js** (Node.js) バックエンド
- **Vite + React** フロントエンド
## Why HttpOnly Cookies? ／　なぜ HttpOnly Cookie なのか？
With **HttpOnly cookies**, the token is stored securely by the browser and cannot be accessed via JavaScript. This means you don’t need to manually store the token or manage headers, and it provides better protection against XSS attacks.
---
**HttpOnly Cookie** を使うと、トークンはブラウザによって安全に保存され、JavaScript からアクセスできません。
これにより、トークンを手動で保存したりヘッダーを管理したりする必要がなくなり、XSS 攻撃からの保護も向上します。
> [!TIP]
> **HttpOnly cookies** only work in web browsers. For mobile apps or non-browser clients, store tokens in memory or secure storage and send them via `Authorization` headers.
>
> **HttpOnly Cookie** はウェブブラウザでのみ動作します。モバイルアプリやブラウザ以外のクライアントでは、トークンをメモリや安全なストレージに保存し、`Authorization` ヘッダーで送信してください。
## Get Started
### 1. Clone and install
```sh
git clone https://github.com/supershaneski/jwt-auth-example.git
cd jwt-auth-example
npm install
```
### 2. Setup Environment Files
Copy the example files:
```sh
# Server
cp apps/server/.env.example apps/server/.env
# Client
cp apps/client/.env.example apps/client/.env
```
#### `apps/server/.env`
```sh
JWT_ACCESS_SECRET=your-super-secret-jwt-access-key-256-bits-here
JWT_REFRESH_SECRET=your-super-secret-refresh-key-256-bits-here
ACCESS_TOKEN_EXPIRY=120 # seconds (2 minutes)
REFRESH_TOKEN_EXPIRY=300 # seconds (5 minutes for testing)
NODE_ENV=development
PORT=3000
```
#### `apps/client/.env`
```sh
VITE_API_BASE_URL=http://192.168.1.100:3000 # Use your local IP address
```
Use **your local IP address**, not `localhost`, to allow phone/tablet testing.
### 3. Update CORS Origins
**apps/server/src/cors/origins.js**
```js
export default [
'http://192.168.1.100:5173', // Replace with your IP address
]
```
### 4. Run Both Apps
## Run
```bash
npm run dev
npm install
npm run dev # http://localhost:5173
```
Runs:
- Client: `http://your-ip:5173`
- Server: `http://your-ip:3000`
The dev server proxies API calls to the backend, so make sure your Spring Boot app is
running (default `http://localhost:8080`).
## How requests are routed (CORS-free dev)
### 5. Try It
`.env` uses **relative** base URLs:
1. Open the client in your browser: [http://your-ip:5173](http://your-ip:5173)
2. Press the **Login** button.
3. Press **Get Products**. (This should succeed. See **Console** section in the **DevTools**)
4. Wait **2 minutes** (to allow the token to expire) → Press **Get Products** again → triggers **token auto-refresh**
> [!Note]
> There is a simulated network delay in the backend route `/api/products` to help test **retry** and **timeout** behavior on the client side. To disable this delay, please comment out the following line in the server file:
>
> **apps/server/src/stubs/products.js**
> ```js
> await sleep(delay)
> ```
## How It Works
From the client, open the browser **DevTools** and check the **Network** tab.
> [!Note]
> Be sure to set `credentials: 'include'` in the fetch options so the browser will send and store cookies.
> ```js
> const response = await fetch(url, {
> method: 'POST',
> headers: { 'Content-Type': 'application/json' },
> credentials: 'include', // <-- important
> ...
> })
> ```
### Auth Flow Overview
**1. Login** `POST /api/login` →
If the client sends valid credentials, the server generates **access** and **refresh** tokens and sets the corresponding cookies for the response.
```js
import { SignJWT } from 'jose'
const ACCESS_TOKEN_EXPIRY = Number(process.env.ACCESS_TOKEN_EXPIRY || 120)
const REFRESH_TOKEN_EXPIRY = Number(process.env.REFRESH_TOKEN_EXPIRY || 300)
const now = Math.floor(Date.now() / 1000)
const payload = {
sub: user.id,
username: user.username,
role: user.role,
iat: now,
}
const accessToken = await new SignJWT(payload)
.setProtectedHeader({ alg: 'HS256' })
.setExpirationTime(now + ACCESS_TOKEN_EXPIRY)
.sign(accessSecret)
const refreshToken = await new SignJWT(payload)
.setProtectedHeader({ alg: 'HS256' })
.setExpirationTime(now + REFRESH_TOKEN_EXPIRY)
.sign(refreshSecret)
res.cookie('accessToken', accessToken, {
httpOnly: true,
secure: process.env.NODE_ENV === 'production',
sameSite: 'strict',
path: '/',
maxAge: ACCESS_TOKEN_EXPIRY * 1000,
})
res.cookie('refreshToken', refreshToken, {
httpOnly: true,
secure: process.env.NODE_ENV === 'production',
sameSite: 'strict',
path: '/api/refresh',
maxAge: REFRESH_TOKEN_EXPIRY * 1000,
})
```
VITE_AUTH_SERVICE_URL=/auth-service
VITE_OPR_API_URL=/opr-rest-api
```
You’ll see the cookies under the **Cookies** section of the **Network** tab in the client.
`vite.config.js` proxies those prefixes to the backend:
**Response Cookies**
| Name | Value | Path | Expires | Max-Age | HttpOnly | SameSite |
|---------------|--------------------------|---------------|---------------|---------------|---------------|---------------|
| accessToken | eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1MSIsInVz... | / | 11/10/2025, 10:09:44 AM | 120 | ✓ | Strict |
| refreshToken | eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1MSIsInVz... | /api/refresh | 11/10/2025, 10:12:44 AM | 120 | ✓ | Strict |
Check the **Path** column. **accessToken** cookie will be automatically attached to all requests except `/api/refresh` while **refreshToken** cookie will be attached only when requesting `/api/refresh`.
**2. Protected route** `GET /api/products` →
When the user requests a protected route, you can see from the **Cookies** section of the **Network** tab that the **accessToken** cookie is attached to the request.
**Request Cookies**
| Name | Value |
|---------------|--------------------------|
| accessToken | eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1MSIsInVz... |
If the **accessToken** cookie is still valid, we can decode the JWT and extract the payload from the route handler.
```js
import { jwtVerify } from 'jose'
const token = req.cookies?.accessToken
const { payload } = await jwtVerify(token, secret, {
algorithms: ['HS256'],
})
console.log(payload)
```
/auth-service/* -> http://localhost:8080/auth-service/*
/opr-rest-api/* -> http://localhost:8083/opr-rest-api/*
```
If you request a protected route before logging **in**, or after the **accessToken** cookie has expired, **no cookies will be attached**, and you will get a **401 Unauthorized** response. This is where we will handle **token refresh**.
Because the browser only ever talks to `localhost:5173` (same origin), **there is no CORS in
development** and the HttpOnly cookies attach normally. Change the `BACKEND` constant in
`vite.config.js` if your backend port differs.
> [!NOTE]
> A **protected route** is a route or endpoint that is under some security scheme and requires **authentication**.
If you prefer to call the backend **directly** (no proxy), switch `.env` to absolute URLs
(commented examples are in the file) and configure CORS on the backend:
`allowCredentials = true` with an **explicit** origin (`http://localhost:5173`) — `*` is not
allowed together with credentials.
**3. Token refresh** `POST /api/refresh` →
When the user request the refresh route, the browser automatically attaches the **refreshToken** cookie.
## auth vs data calls
**Request Cookies**
| Name | Value |
|---------------|--------------------------|
| refreshToken | eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1MSIsInVz... |
- `src/lib/endpoints.js` exposes `authUrl()` and `oprUrl()`.
- Auth calls (`/auth/login`, `/auth/me`, `/auth/logout`, `/auth/token/refresh`) go through
`authUrl()` → auth service.
- Data calls go through `oprUrl()` → opr/data service. See
`src/features/products/ProductsPage.jsx` for an example. Never fetch data from the auth URL.
However, we also set expiration in our **refreshToken** cookie so if we request the refresh route after it expires, no cookies will be attached to the request. In that case, we will receive **401 Unauthorized** again.
## Backend contract the client expects
If the **refreshToken** cookie is still valid, we will receive new **accessToken** and **refreshToken** cookies.
- `POST /auth-service/auth/login` — sets HttpOnly cookies, returns the user object.
- `GET /auth-service/auth/me` — returns `{ authenticated: true, role, firstName, lastName, ... }`
when logged in. `role` drives the client-side role checks.
- `POST /auth-service/auth/logout` — clears cookies.
- `POST /auth-service/auth/token/refresh` — rotates the access token (called automatically on 401).
- `GET /opr-rest-api/products` (example) — returns `{ status, created, data: [...] }`.
**4. Logout** `POST /api/logout` →
In this example, logout is not a **protected route**. As such, there will be no cookies sent with the request. Even so, the logout handler in the backend will reset the cookies in the response.
## Role-based access (RBAC)
```js
res.clearCookie('accessToken', {
httpOnly: true,
secure: process.env.NODE_ENV === 'production',
sameSite: 'strict',
path: '/',
})
- `src/auth/authGuard.jsx` provides `RequireAuth` and `RequireRole`.
- `<RequireRole role="admin">` (or an array of roles) guards a route; the sidebar shows the
Admin link only to admins.
- **The front-end guard is UX only.** Always enforce roles on the server too
(e.g. Spring Security `@PreAuthorize("hasRole('ADMIN')")`). The client can be tampered with.
res.clearCookie('refreshToken', {
httpOnly: true,
secure: process.env.NODE_ENV === 'production',
sameSite: 'strict',
path: '/api/refresh',
})
```
## Notes
You can verify this at the **Response Cookies** in the client.
**Response Cookies**
| Name | Value | Path | Expires | Max-Age | HttpOnly | SameSite |
|---------------|--------------------------|---------------|---------------|---------------|---------------|---------------|
| accessToken | | / | 1/1/1970, 9:00:00 AM | -- | ✓ | Strict |
| refreshToken | | /api/refresh | 1/1/1970, 9:00:00 AM | -- | ✓ | Strict |
## CSRF Token
Using **HttpOnly cookies** for JWT (or session) storage protects against **XSS token theft**, but leaves you vulnerable to **Cross-Site Request Forgery (CSRF)** attacks. In a CSRF attack, a malicious site tricks an authenticated user's browser into making an unwanted request to your app — and the browser automatically attaches **HttpOnly cookies**.
To mitigate this, we use the **double-submit cookie pattern** with a **non-HttpOnly CSRF token**.
When the user logs, we generate the **CSRF token** and set it to a (readable) cookie.
```js
import { randomUUID } from 'crypto'
const csrfToken = randomUUID()
res.cookie('csrfToken', csrfToken, {
httpOnly: false, // Must be false so JS can read it
secure: process.env.NODE_ENV === 'production',
sameSite: 'lax',
path: '/',
maxAge: REFRESH_COOKIE_EXPIRY,
})
```
You can check it from the **Cookies** section in the **Network** tab.
**Response Cookies**
| Name | Value | Path | Expires | Max-Age | HttpOnly | SameSite |
|---------------|--------------------------|---------------|---------------|---------------|---------------|---------------|
| csrfToken | d648682c-9e2b-44ed-8b6c-9fa65... | / | 11/10/2025, 10:09:44 AM | 300 | ✓ | Lax |
The client then reads the token from the cookie and stores it:
```js
const csrfToken = document.cookie
.split('; ')
.find(row => row.startsWith('csrfToken='))
?.split('=')[1]
```
We will then attach it as a **custom header** (e.g., `X-XSRF-TOKEN`) for **every state-changing request**.
In our example, we will use it when requesting the refresh endpoint.
```sh
POST /api/refresh HTTP/1.1
Accept: application/json
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Content-Length: 0
Content-Type: application/json
Cookie: refreshToken=eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1MSIsInVzZXJuYW1lIjoiYWxpY2UiLCJyb2xlIjoidXNlciIsImlhdCI6MTc2MjgxOTA5MCwiZXhwIjoxNzYyODE5MzkwfQ.2Gs_dQ_SzxJN0bW4cBOYhiZQq88w0AnY-NJD7bDGchU; csrfToken=5aee6a31-0100-4391-9f29-8631796e1075
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.6 Safari/605.1.15
x-csrf-token: 5aee6a31-0100-4391-9f29-8631796e1075
```
As you can see, we are sending the **csrfToken** both in the request cookie and in the **x-csrf-token** header.
The backend then validates by comparing cookie vs header:
```js
const csrfCookie = req.cookies?.csrfToken
const csrfHeader = req.get('x-csrf-token')
if (!csrfCookie || !csrfHeader || csrfCookie !== csrfHeader) {
c.securityError = 'CSRF_MISMATCH'
return false
}
```
Since a malicious site cannot read the cookies set for your domain, and cannot arbitrarily send custom headers with an authentic request due to browser security policies (like the **Same-Origin Policy** and **CORS** restrictions), the attacker cannot retrieve and attach the correct **CSRF token**. As a result, the attack fails.
---
- Match the `role` strings to whatever your backend returns (the reference uses lowercase
`"user"` / `"admin"`).
- The dead `App.css` (Vite starter leftover) was removed.

1
apps/client/.env
View File

@ -1 +0,0 @@
VITE_AUTH_SERVICE_URL=http://localhost:8080/auth-service

30
apps/client/package.json
View File

@ -1,30 +0,0 @@
{
"name": "jwt-auth-client",
"private": true,
"version": "0.1.0",
"description": "Frontend client built with Vite + React for JWT authentication demo.",
"license": "MIT",
"author": "supershaneski",
"type": "module",
"scripts": {
"dev": "vite --host --port 5173",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"react": "^19.1.1",
"react-dom": "^19.1.1"
},
"devDependencies": {
"@eslint/js": "^9.36.0",
"@types/react": "^19.1.16",
"@types/react-dom": "^19.1.9",
"@vitejs/plugin-react": "^5.0.4",
"eslint": "^9.36.0",
"eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.22",
"globals": "^16.4.0",
"vite": "^7.1.7"
}
}

31
apps/client/src/app/App.css
View File

@ -1,31 +0,0 @@
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.container > * {
align-self: auto;
}
.spinner {
width: .75rem;
height: .75rem;
border: 2px solid #ccc2;
border-top-color: #646cff;
border-radius: 50%;
animation: spin 0.8s linear infinite;
display: inline-block;
margin-right: .5rem;
}
@keyframes spin {
to { transform: rotate(360deg); }
}

34
apps/client/src/app/providers/AuthProvider.jsx
View File

@ -1,34 +0,0 @@
import { createContext, useContext, useEffect, useState } from 'react'
import { fetchWithRefresh } from '../../lib/api'
const AuthContext = createContext(null)
export function AuthProvider({ children }) {
const [user, setUser] = useState(null)
const [loading, setLoading] = useState(true)
useEffect(() => {
fetchWithRefresh(`${import.meta.env.VITE_AUTH_SERVICE_URL}/auth/me`)
.then(res => res.ok ? res.json() : null)
.then(data => {
if (data?.authenticated) {
setUser(data)
} else {
setUser(null)
}
})
.catch(() => setUser(null))
.finally(() => setLoading(false))
}, [])
const login = (userData) => setUser(userData)
const logout = () => setUser(null)
return (
<AuthContext.Provider value={{ user, loading, login, logout }}>
{children}
</AuthContext.Provider>
)
}
export const useAuth = () => useContext(AuthContext)

11
apps/client/src/auth/authGuard.jsx
View File

@ -1,11 +0,0 @@
import { Navigate } from 'react-router-dom'
import { useAuth } from '../app/providers/AuthProvider'
export function RequireAuth({ children }) {
const { user, loading } = useAuth()
if (loading) return <div>Loading...</div>
if (!user) return <Navigate to="/login" replace />
return children
}

24
apps/client/src/layouts/MainLayout.jsx
View File

@ -1,24 +0,0 @@
// src/layouts/MainLayout.jsx
import { Outlet } from 'react-router-dom'
import TopBar from './TopBar'
export default function MainLayout() {
return (
<div className="layout">
<TopBar />
<div className="body">
<aside className="sidebar">
<ul>
<li>Employee</li>
<li>Department</li>
</ul>
</aside>
<main className="content">
<Outlet />
</main>
</div>
</div>
)
}

7
apps/client/vite.config.js
View File

@ -1,7 +0,0 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
})

6
apps/server/.env.example
View File

@ -1,6 +0,0 @@
JWT_ACCESS_SECRET=your-super-secret-access-key-256-bit
JWT_REFRESH_SECRET=your-super-secret-refresh-key-256-bit
ACCESS_TOKEN_EXPIRY=120 # 2 minutes
REFRESH_TOKEN_EXPIRY=300 # 5 minutes
NODE_ENV=development
PORT=3000

397
apps/server/openapi.yaml
View File

@ -1,397 +0,0 @@
openapi: 3.1.1
info:
title: Demo API Server
description: Demonstrates secure JWT authentication using HTTP-only cookies
version: 'v1'
servers:
- url: https://your-bff.com
description: Production server
paths:
/api/login:
post:
operationId: Login
tags:
- Authentication
summary: User Login
description: |
Authenticate user with username/password.
On success, sets `accessToken` and `refreshToken` in HTTP-only cookies.
security: []
requestBody:
required: true
content:
application/json:
schema:
$ref: '#/components/schemas/LoginRequest'
example:
username: alice
password: secret123
responses:
'200':
description: Login successful - JWT tokens set in HTTP-only cookies
headers:
Set-Cookie:
description: |
Two HTTP-only cookies:
- `accessToken`: short-lived JWT (15 min)
- `refreshToken`: long-lived token, only sent to `/api/refresh`
schema:
type: array
items:
type: string
example:
- accessToken=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.x; Path=/; HttpOnly; Secure; SameSite=Strict; Max-Age=900
- refreshToken=rt_abc123def456ghi789; Path=/api/refresh; HttpOnly; Secure; SameSite=Strict; Max-Age=604800
content:
application/json:
schema:
$ref: '#/components/schemas/LoginResponse'
examples:
success:
$ref: '#/components/examples/LoginResponseSuccess'
'400':
description: Bad Request
content:
application/json:
schema:
$ref: '#/components/schemas/ErrorResponse'
examples:
badRequest:
$ref: '#/components/examples/ErrorResponseBadRequest'
'401':
description: Unauthorized
content:
application/json:
schema:
$ref: '#/components/schemas/ErrorResponse'
examples:
unauthorized:
$ref: '#/components/examples/ErrorResponseUnauthorized'
'404':
description: Not Found
content:
application/json:
schema:
$ref: '#/components/schemas/ErrorResponse'
examples:
notFound:
$ref: '#/components/examples/ErrorResponseNotFound'
'500':
description: Internal Server Error
content:
application/json:
schema:
$ref: '#/components/schemas/ErrorResponse'
examples:
serverError:
$ref: '#/components/examples/ErrorResponseServerError'
/api/logout:
post:
operationId: Logout
tags:
- Authentication
summary: Logout
description: Clears JWT cookies. Optionally revokes refresh token.
security: [] # Public (anyone can logout)
responses:
'200':
description: Logged out successfully
content:
application/json:
schema:
$ref: '#/components/schemas/LogoutResponse'
'500':
description: Internal Server Error
content:
application/json:
schema:
$ref: '#/components/schemas/ErrorResponse'
examples:
serverError:
$ref: '#/components/examples/ErrorResponseServerError'
/api/refresh:
post:
operationId: Refresh
tags:
- Authentication
summary: Refresh Access Token
description: |
Uses `refreshToken` cookie to issue a new `accessToken`.
Must include valid `refreshToken` cookie (sent automatically if Path matches).
security:
- CSRFCookieAuth: []
- CSRFHeaderAuth: []
- RefreshCookieAuth: []
responses:
'200':
description: New access token issued via cookie
headers:
Set-Cookie:
description: New short-lived access token
schema:
type: string
example: accessToken=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.y; Path=/; HttpOnly; Secure; SameSite=Strict; Max-Age=900
content:
application/json:
schema:
$ref: '#/components/schemas/RefreshResponse'
examples:
success:
$ref: '#/components/examples/RefreshResponseSuccess'
'400':
description: Bad Request
content:
application/json:
schema:
$ref: '#/components/schemas/ErrorResponse'
examples:
badRequest:
$ref: '#/components/examples/ErrorResponseBadRequest'
'401':
description: Unauthorized - invalid or expired refresh token
content:
application/json:
schema:
$ref: '#/components/schemas/ErrorResponse'
examples:
unauthorized:
$ref: '#/components/examples/ErrorResponseUnauthorized'
'500':
description: Internal Server Error
content:
application/json:
schema:
$ref: '#/components/schemas/ErrorResponse'
examples:
serverError:
$ref: '#/components/examples/ErrorResponseServerError'
/api/products:
get:
operationId: GetProducts
security:
- CookieAuth: []
tags:
- Product
summary: Get Product List
description: Retrieve list of products. Requires valid `accessToken` cookie.
responses:
'200':
description: Success
content:
application/json:
schema:
$ref: '#/components/schemas/GetProductsResponse'
examples:
success:
$ref: '#/components/examples/GetProductsResponseSuccess'
'400':
description: Bad Request
content:
application/json:
schema:
$ref: '#/components/schemas/ErrorResponse'
examples:
badRequest:
$ref: '#/components/examples/ErrorResponseBadRequest'
'401':
description: Unauthorized - missing or invalid access token
content:
application/json:
schema:
$ref: '#/components/schemas/ErrorResponse'
examples:
unauthorized:
$ref: '#/components/examples/ErrorResponseUnauthorized'
'500':
description: Internal Server Error
content:
application/json:
schema:
$ref: '#/components/schemas/ErrorResponse'
examples:
serverError:
$ref: '#/components/examples/ErrorResponseServerError'
components:
securitySchemes:
CookieAuth:
type: apiKey
in: cookie
name: accessToken
description: |
**HTTP-only cookie** containing the JWT access token.
- Sent automatically on same-origin requests
- Expires in 15 minutes
- Claims: `sub`, `iat`, `exp`, `role`
- Use `/api/refresh` when expired
RefreshCookieAuth:
type: apiKey
in: cookie
name: refreshToken
description: |
**HTTP-only cookie** used only for token refresh.
- Only sent to `/api/refresh`
- Long-lived (7 days)
- Never exposed to JavaScript
CSRFHeaderAuth:
type: apiKey
in: header
name: X-CSRF-Token
CSRFCookieAuth:
type: apiKey
in: cookie
name: csrfToken
schemas:
ErrorResponse:
type: object
properties:
status:
type: string
example: error
created:
type: integer
description: UTC timestamp in milliseconds
example: 1759974176938
error:
type: string
example: INTERNAL_SERVER_ERROR
message:
type: string
example: An unexpected error occurred
required:
- status
- created
- error
- message
LoginRequest:
type: object
properties:
username:
type: string
description: Login username
example: alice
password:
type: string
description: Password
example: secret123
required:
- username
- password
LoginResponse:
type: object
properties:
status:
type: string
example: success
created:
type: integer
example: 1759974176938
required:
- status
- created
LogoutResponse:
type: object
properties:
status:
type: string
example: success
created:
type: integer
example: 1759974176938
required:
- status
- created
RefreshResponse:
type: object
properties:
status:
type: string
example: success
created:
type: integer
example: 1759974176938
required:
- status
- created
GetProductsResponse:
type: object
properties:
status:
type: string
example: success
created:
type: integer
example: 1759974176938
data:
type: array
items:
type: object
properties:
id:
type: string
example: unc0001-01
name:
type: string
example: Maple Table
price:
type: number
example: 25000
required:
- id
- name
- price
required:
- status
- created
- data
examples:
ErrorResponseBadRequest:
value:
status: error
created: 1759974176938
error: INVALID_REQUEST
message: Invalid request payload
ErrorResponseUnauthorized:
value:
status: error
created: 1759974176938
error: UNAUTHORIZED
message: Invalid or missing token
ErrorResponseNotFound:
value:
status: error
created: 1759974176938
error: NOT_FOUND
message: Resource not found
ErrorResponseServerError:
value:
status: error
created: 1759974176938
error: INTERNAL_SERVER_ERROR
message: An unexpected error occurred
LoginResponseSuccess:
value:
status: success
created: 1759974176938
RefreshResponseSuccess:
value:
status: success
created: 1759974176938
GetProductsResponseSuccess:
value:
status: success
created: 1759974176938
data:
- id: unc0001-01
name: Maple Table
price: 25000
- id: unc0002-01
name: Oak Chair
price: 12000
security: []
tags:
- name: Authentication
x-displayName: Authentication
description: Login, refresh, and auth flows
- name: Product
x-displayName: Product
description: Product catalog endpoints

27
apps/server/package.json
View File

@ -1,27 +0,0 @@
{
"name": "jwt-auth-server",
"private": true,
"version": "0.1.0",
"description": "Express backend API handling JWT authentication with HttpOnly cookies.",
"license": "MIT",
"author": "supershaneski",
"type": "module",
"main": "src/index.js",
"scripts": {
"dev": "nodemon src/index.js",
"start": "node src/index.js"
},
"dependencies": {
"cookie-parser": "^1.4.7",
"cors": "^2.8.5",
"dotenv": "^17.2.3",
"express": "^5.1.0",
"express-rate-limit": "^8.1.0",
"helmet": "^8.1.0",
"jose": "^6.1.0",
"openapi-backend": "^5.15.0"
},
"devDependencies": {
"nodemon": "^3.1.10"
}
}

3
apps/server/src/cors/origins.js
View File

@ -1,3 +0,0 @@
export default [
'http://192.168.1.80:5173',
]

154
apps/server/src/index.js
View File

@ -1,154 +0,0 @@
import dotenv from 'dotenv'
import express from 'express'
import cors from 'cors'
import helmet from 'helmet'
import cookieParser from 'cookie-parser'
import { resolve } from 'path'
import { fileURLToPath } from 'url'
import { dirname } from 'path'
import { OpenAPIBackend } from 'openapi-backend'
import errorLoggerMiddleware from './middleware/errorLogger.js'
import loggerMiddleware from './middleware/logger.js'
import jwtAuth from './middleware/jwtAuth.js'
import refreshAuth from './middleware/refreshAuth.js'
import csrfCookieAuth from './middleware/csrfCookieAuth.js'
import csrfHeaderAuth from './middleware/csrfHeaderAuth.js'
import origins from './cors/origins.js'
import { loginHandler, logoutHandler, refreshHandler } from './stubs/authorization.js'
import { productsHandler } from './stubs/products.js'
dotenv.config()
const app = express()
// Security middleware
app.use(cookieParser())
app.use(helmet());
app.use(cors({
origin: (origin, callback) => {
// Allow requests with no origin (e.g., mobile apps, curl)
if (!origin) return callback(null, true)
if (origins.includes(origin)) {
callback(null, true)
} else {
callback(new Error('Not allowed by CORS'))
}
},
credentials: true,
methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
allowedHeaders: ['Content-Type', 'Authorization', 'X-CSRF-TOKEN', 'X-Requested-With'],
}))
// Logger middleware
app.use(loggerMiddleware)
// Body parsing
app.use(express.json({ limit: '10mb' }))
app.use(express.urlencoded({ limit: '10mb', extended: true }))
// OpenAPI Backend
const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)
const openApiPath = resolve(__dirname, '../openapi.yaml')
console.log('Loading OpenAPI from:', openApiPath)
const api = new OpenAPIBackend({
definition: openApiPath,
})
api.register({
validationFail: async (c, req, res) => {
return res.status(400).json({
status: 'error',
created: Date.now(),
error: 'INVALID_REQUEST',
message: c.validation.errors?.map((err) => err.message).join(', ') || 'Validation failed',
})
},
notFound: async (c, req, res) => {
return res.status(404).json({
status: 'error',
created: Date.now(),
error: 'NOT_FOUND',
message: 'Resource not found',
})
},
notImplemented: async (c, req, res) => {
// Use schema example for unimplemented endpoints
const { status, mock } = c.api.mockResponseForOperation(c.operation.operationId);
return res.status(status).json({
...mock,
created: Date.now(), // Ensure created timestamp is included
})
},
/*
// NOTE:
// Use this instead if you want to show error for unimplemented endpoints
notImplemented: (c, req, res) => {
console.error(`MISSING HANDLER: ${c.operation.operationId}`); // LOG IT
return res.status(501).json({
status: 'error',
created: Date.now(),
error: 'NOT_IMPLEMENTED',
message: `Handler for ${c.operation.operationId} is not registered!`,
});
},
*/
})
// Register security handlers
api.registerSecurityHandler('CookieAuth', jwtAuth)
api.registerSecurityHandler('RefreshCookieAuth', refreshAuth)
api.registerSecurityHandler('CSRFHeaderAuth', csrfHeaderAuth)
api.registerSecurityHandler('CSRFCookieAuth', csrfCookieAuth)
api.register('unauthorizedHandler', async (c, req, res) => {
return res.status(401).json({
status: 'error',
created: Date.now(),
error: c.securityError || 'UNAUTHORIZED',
message: 'Invalid access',
})
})
api.register({
Login: loginHandler,
Logout: logoutHandler,
Refresh: refreshHandler,
GetProducts: productsHandler,
})
// Initialize OpenAPI Backend
api.init()
// Use OpenAPI Backend as middleware
app.use((req, res) => api.handleRequest(req, req, res))
// Error logger middleware should come after routes
app.use(errorLoggerMiddleware)
// Error handling
app.use((err, req, res, next) => {
console.error('ERROR-HANDLER', err)
const status = err.statusCode || 500;
const message = err.message || 'Internal server error'
const code = err.code || 'INTERNAL_SERVER_ERROR'
res.status(status).json({
status: 'error',
created: Date.now(),
error: code,
message,
})
})
const PORT = process.env.PORT || 3000
app.listen(PORT, () => {
console.info(new Date().toLocaleTimeString('ja-JP', { timeZone: 'Asia/Tokyo' }), `Demo API Server running at http://localhost:${PORT}`)
})

37
apps/server/src/jwt/createToken.js
View File

@ -1,37 +0,0 @@
import { SignJWT } from 'jose'
export const createTokens = async (user) => {
const now = Math.floor(Date.now() / 1000)
const payload = {
sub: user.id,
username: user.username,
role: user.role || 'user',
iat: now,
}
const JWT_ACCESS_SECRET = process.env.JWT_ACCESS_SECRET
const JWT_REFRESH_SECRET = process.env.JWT_REFRESH_SECRET
if (!JWT_ACCESS_SECRET || !JWT_REFRESH_SECRET) {
throw new Error('JWT secrets not configured in .env')
}
const accessSecret = new TextEncoder().encode(JWT_ACCESS_SECRET)
const refreshSecret = new TextEncoder().encode(JWT_REFRESH_SECRET)
const ACCESS_TOKEN_EXPIRY = Number(process.env.ACCESS_TOKEN_EXPIRY || 120)
const REFRESH_TOKEN_EXPIRY = Number(process.env.REFRESH_TOKEN_EXPIRY || 300)
const accessToken = await new SignJWT(payload)
.setProtectedHeader({ alg: 'HS256' })
.setExpirationTime(now + ACCESS_TOKEN_EXPIRY)
.sign(accessSecret)
const refreshToken = await new SignJWT(payload)
.setProtectedHeader({ alg: 'HS256' })
.setExpirationTime(now + REFRESH_TOKEN_EXPIRY)
.sign(refreshSecret)
return { accessToken, refreshToken }
}

34
apps/server/src/jwt/verifyToken.js
View File

@ -1,34 +0,0 @@
import { jwtVerify } from 'jose'
export const verifyAccessToken = (token) => verify(token, 'access')
export const verifyRefreshToken = (token) => verify(token, 'refresh')
const verify = async (token, key) => {
const JWT_ACCESS_SECRET = process.env.JWT_ACCESS_SECRET
const JWT_REFRESH_SECRET = process.env.JWT_REFRESH_SECRET
if (!JWT_ACCESS_SECRET || !JWT_REFRESH_SECRET) {
throw new Error('JWT secrets not configured in .env')
}
const accessSecret = new TextEncoder().encode(JWT_ACCESS_SECRET)
const refreshSecret = new TextEncoder().encode(JWT_REFRESH_SECRET)
const secret = key === 'access' ? accessSecret : refreshSecret
try {
const { payload } = await jwtVerify(token, secret, {
algorithms: ['HS256'],
})
return { valid: true, payload }
} catch (err) {
return { valid: false, error: mapError(err) }
}
}
const mapError = (err) => {
if (err.code === 'ERR_JWT_EXPIRED') return 'TOKEN_EXPIRED'
if (err.code?.startsWith('ERR_JWS') || err.code?.startsWith('ERR_JWT')) return 'INVALID_TOKEN'
return 'TOKEN_ERROR'
}

9
apps/server/src/middleware/csrfCookieAuth.js
View File

@ -1,9 +0,0 @@
export default async function csrfCookieAuth(c, req, res) {
const csrfCookie = req.cookies?.csrfToken
if (!csrfCookie) {
c.securityError = 'CSRF_COOKIE_MISSING'
return false
}
c.csrfCookie = csrfCookie
return true
}

11
apps/server/src/middleware/csrfHeaderAuth.js
View File

@ -1,11 +0,0 @@
export default async function csrfHeaderAuth(c, req, res) {
const csrfHeader = req.get('x-csrf-token')
const csrfCookie = c.csrfCookie
if (!csrfCookie || !csrfHeader || csrfCookie !== csrfHeader) {
c.securityError = 'CSRF_MISMATCH'
return false
}
return true
}

7
apps/server/src/middleware/errorLogger.js
View File

@ -1,7 +0,0 @@
export default function errorLoggerMiddleware(err, req, res, next) {
console.log(
`\x1b[31m%s\x1b[0m`,
`[${new Date().toLocaleString('ja-JP', { timeZone: 'Asia/Tokyo' })}] ${req.method} ${req.url} ${err.message}`
)
next(err)
}

22
apps/server/src/middleware/jwtAuth.js
View File

@ -1,22 +0,0 @@
import { verifyAccessToken } from '../jwt/verifyToken.js'
export default async function jwtAuth(c, req, res) {
const token = req.cookies?.accessToken
if (!token) {
c.securityError = 'MISSING_TOKEN'
return false
}
const result = await verifyAccessToken(token)
if (!result.valid) {
c.securityError = 'INVALID_TOKEN'
return false
}
req.user = result.payload
return true
}

13
apps/server/src/middleware/logger.js
View File

@ -1,13 +0,0 @@
export default function loggerMiddleware(req, res, next) {
const start = Date.now()
res.on('finish', () => {
const duration = Date.now() - start
const userAgent = req.get('User-Agent') || 'unknown'
console.log(
`[${new Date().toLocaleString('ja-JP', { timeZone: 'Asia/Tokyo' })}] ${req.method} ${req.originalUrl} ${res.statusCode} - ${duration}ms - ${userAgent}`
)
})
next()
}

22
apps/server/src/middleware/refreshAuth.js
View File

@ -1,22 +0,0 @@
import { verifyRefreshToken } from '../jwt/verifyToken.js'
export default async function refreshAuth(c, req, res) {
const refreshToken = req.cookies?.refreshToken
if (!refreshToken) {
c.securityError = 'MISSING_TOKEN'
return false
}
const result = await verifyRefreshToken(refreshToken)
if (!result.valid) {
c.securityError = 'INVALID_TOKEN'
return false
}
req.user = result.payload
return true
}

122
apps/server/src/stubs/authorization.js
View File

@ -1,122 +0,0 @@
import { randomUUID } from 'crypto'
import { createTokens } from '../jwt/createToken.js'
const users = {
alice: { id: 'u1', username: 'alice', password: 'secret123', role: 'user' },
}
const ACCESS_COOKIE_EXPIRY = Number(process.env.ACCESS_TOKEN_EXPIRY || 120) * 1000
const REFRESH_COOKIE_EXPIRY = Number(process.env.REFRESH_TOKEN_EXPIRY || 300) * 1000
export const loginHandler = async (c, req, res) => {
const { username, password } = req.body
const user = users[username]
if (!user || user.password !== password) {
return res.status(401).json({
status: 'error',
created: Date.now(),
error: 'UNAUTHORIZED',
message: 'Invalid credentials',
})
}
const { accessToken, refreshToken } = await createTokens(user)
const csrfToken = randomUUID()
res.cookie('accessToken', accessToken, {
httpOnly: true,
secure: process.env.NODE_ENV === 'production',
sameSite: 'strict',
path: '/',
maxAge: ACCESS_COOKIE_EXPIRY,
})
res.cookie('refreshToken', refreshToken, {
httpOnly: true,
secure: process.env.NODE_ENV === 'production',
sameSite: 'strict',
path: '/api/refresh',
maxAge: REFRESH_COOKIE_EXPIRY,
})
res.cookie('csrfToken', csrfToken, {
httpOnly: false,
secure: process.env.NODE_ENV === 'production',
sameSite: 'lax',
path: '/',
maxAge: REFRESH_COOKIE_EXPIRY,
})
return res.status(200).json({
status: 'success',
created: Date.now(),
})
}
export const logoutHandler = async (c, req, res) => {
res.clearCookie('accessToken', {
httpOnly: true,
secure: process.env.NODE_ENV === 'production',
sameSite: 'strict',
path: '/',
})
res.clearCookie('refreshToken', {
httpOnly: true,
secure: process.env.NODE_ENV === 'production',
sameSite: 'strict',
path: '/api/refresh',
})
res.clearCookie('csrfToken', {
httpOnly: false,
secure: process.env.NODE_ENV === 'production',
sameSite: 'lax',
path: '/',
})
return res.status(200).json({
status: 'success',
created: Date.now(),
})
}
export const refreshHandler = async (c, req, res) => {
const user = req.user
const { accessToken, refreshToken } = await createTokens(user)
const csrfToken = randomUUID()
res.cookie('accessToken', accessToken, {
httpOnly: true,
secure: process.env.NODE_ENV === 'production',
sameSite: 'strict',
path: '/',
maxAge: ACCESS_COOKIE_EXPIRY,
})
res.cookie('refreshToken', refreshToken, {
httpOnly: true,
secure: process.env.NODE_ENV === 'production',
sameSite: 'strict',
path: '/api/refresh',
maxAge: REFRESH_COOKIE_EXPIRY,
})
res.cookie('csrfToken', csrfToken, {
httpOnly: false,
secure: process.env.NODE_ENV === 'production',
sameSite: 'lax',
path: '/api/refresh',
maxAge: REFRESH_COOKIE_EXPIRY,
})
return res.status(200).json({
status: 'success',
created: Date.now(),
})
}

23
apps/server/src/stubs/products.js
View File

@ -1,23 +0,0 @@
const sampleProducts = [
{ id: 'unc0001-01', name: 'Maple Table', price: 25000 },
{ id: 'unc0002-01', name: 'Oak Chair', price: 12000 },
]
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms))
}
export const productsHandler = async (c, req, res) => {
const delay = Math.round(10000 * Math.random())
console.log(`\x1b[32m%s\x1b[0m`, `Simulating network delay: ${delay} ms`);
await sleep(delay)
return res.status(200).json({
status: 'success',
created: Date.now(),
data: sampleProducts,
})
}

0
apps/client/eslint.config.js → eslint.config.js
View File

0
apps/client/index.html → index.html
View File

2678
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

49
package.json
View File

@ -1,34 +1,31 @@
{
"name": "jwt-auth-example",
"name": "goi-web-client",
"private": true,
"version": "0.1.0",
"description": "A demo monorepo showing JWT authentication via HttpOnly cookie using Express and Vite.",
"workspaces": [
"apps/*",
"shared"
],
"description": "Frontend client (Vite + React) for JWT HttpOnly-cookie authentication against a Spring Boot backend.",
"license": "MIT",
"author": "supershaneski",
"type": "module",
"scripts": {
"dev:server": "npm --workspace=apps/server run dev",
"dev:client": "npm --workspace=apps/client run dev",
"dev": "concurrently \"npm run dev:server\" \"npm run dev:client\""
"dev": "vite --host --port 5173",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"react": "^19.1.1",
"react-dom": "^19.1.1",
"react-router-dom": "^7.13.0"
},
"devDependencies": {
"concurrently": "^9.0.0"
},
"keywords": [
"jwt",
"authentication",
"auth",
"cookie",
"httpOnly",
"express",
"react",
"example",
"demo"
],
"author": "supershaneski",
"license": "MIT",
"dependencies": {
"react-router-dom": "^7.13.0"
"@eslint/js": "^9.36.0",
"@types/react": "^19.1.16",
"@types/react-dom": "^19.1.9",
"@vitejs/plugin-react": "^5.0.4",
"eslint": "^9.36.0",
"eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.22",
"globals": "^16.4.0",
"vite": "^7.1.7"
}
}

0
apps/client/public/greenfield-3.svg → public/greenfield-3.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 552 B

After

Width:  |  Height:  |  Size: 552 B

15
apps/client/src/app/App.jsx → src/app/App.jsx
View File

@ -5,7 +5,9 @@ import MainLayout from '../layouts/MainLayout'
import AuthLayout from '../layouts/AuthLayout'
import Login from '../auth/pages/Login'
import Home from '../auth/pages/Home'
import { RequireAuth } from '../auth/authGuard'
import Admin from '../auth/pages/Admin'
import ProductsPage from '../features/products/ProductsPage'
import { RequireAuth, RequireRole } from '../auth/authGuard'
function AppRoutes() {
const { user } = useAuth()
@ -30,6 +32,17 @@ function AppRoutes() {
}
>
<Route index element={<Home />} />
<Route path="products" element={<ProductsPage />} />
{/* Admin-only route: front-end guard for UX; enforce the role on the server too. */}
<Route
path="admin"
element={
<RequireRole role="admin">
<Admin />
</RequireRole>
}
/>
</Route>
</Routes>
)

40
src/app/providers/AuthProvider.jsx Normal file
View File

@ -0,0 +1,40 @@
import { createContext, useContext, useEffect, useState } from 'react'
import { fetchWithRefresh } from '../../lib/api'
import { authUrl } from '../../lib/endpoints'
const AuthContext = createContext(null)
export function AuthProvider({ children }) {
const [user, setUser] = useState(null)
const [loading, setLoading] = useState(true)
useEffect(() => {
fetchWithRefresh(authUrl('/auth/me'))
.then(res => res.ok ? res.json() : null)
.then(data => {
// Backend /auth/me is expected to return at least:
// { authenticated: true, role: 'admin' | 'user', firstName, lastName, ... }
if (data?.authenticated) {
setUser(data)
} else {
setUser(null)
}
})
.catch(() => setUser(null))
.finally(() => setLoading(false))
}, [])
const login = (userData) => setUser(userData)
const logout = () => setUser(null)
// role is surfaced for convenience; falls back to null if the backend omits it.
const role = user?.role ?? null
return (
<AuthContext.Provider value={{ user, role, loading, login, logout }}>
{children}
</AuthContext.Provider>
)
}
export const useAuth = () => useContext(AuthContext)

31
src/auth/authGuard.jsx Normal file
View File

@ -0,0 +1,31 @@
import { Navigate } from 'react-router-dom'
import { useAuth } from '../app/providers/AuthProvider'
// Gate: requires an authenticated user.
export function RequireAuth({ children }) {
const { user, loading } = useAuth()
if (loading) return <div>Loading...</div>
if (!user) return <Navigate to="/login" replace />
return children
}
// Gate: requires an authenticated user whose role is allowed.
// <RequireRole role="admin">...</RequireRole> // single role
// <RequireRole role={['admin', 'manager']}>...</RequireRole> // any of several
//
// IMPORTANT: this is a UX guard only. The client can be tampered with, so the
// REAL enforcement must live on the backend (e.g. Spring Security
// @PreAuthorize("hasRole('ADMIN')")). Never trust the front end for access control.
export function RequireRole({ role, children, fallback = '/' }) {
const { user, loading } = useAuth()
if (loading) return <div>Loading...</div>
if (!user) return <Navigate to="/login" replace />
const allowed = Array.isArray(role) ? role : [role]
if (!allowed.includes(user.role)) return <Navigate to={fallback} replace />
return children
}

10
src/auth/pages/Admin.jsx Normal file
View File

@ -0,0 +1,10 @@
// Example admin-only page. Reached only through <RequireRole role="admin"> in App.jsx.
// Remember: this guard is UX only — the backend must also enforce the role.
export default function Admin() {
return (
<div>
<h2>Admin</h2>
<p>This page is only reachable by users whose role is "admin".</p>
</div>
)
}

0
apps/client/src/auth/pages/Home.jsx → src/auth/pages/Home.jsx
View File

3
apps/client/src/auth/pages/Login.jsx → src/auth/pages/Login.jsx
View File

@ -1,5 +1,6 @@
import { useState } from 'react'
import { fetchWithCred } from '../../lib/api'
import { authUrl } from '../../lib/endpoints'
import { useAuth } from '../../app/providers/AuthProvider'
export default function Login() {
@ -27,7 +28,7 @@ export default function Login() {
setError(null)
const res = await fetchWithCred(
`${import.meta.env.VITE_AUTH_SERVICE_URL}/auth/login`,
authUrl('/auth/login'),
{
method: 'POST',
body: JSON.stringify(form)

54
src/features/products/ProductsPage.jsx Normal file
View File

@ -0,0 +1,54 @@
import { useEffect, useState } from 'react'
import { fetchWithRefresh } from '../../lib/api'
import { oprUrl } from '../../lib/endpoints'
// Demonstrates calling the OPR/data service (NOT the auth service) via oprUrl().
// fetchWithRefresh transparently refreshes the access token (auth-service) on 401
// and retries, so data endpoints stay simple.
export default function ProductsPage() {
const [products, setProducts] = useState([])
const [loading, setLoading] = useState(true)
const [error, setError] = useState(null)
useEffect(() => {
let cancelled = false
;(async () => {
try {
setLoading(true)
setError(null)
const res = await fetchWithRefresh(oprUrl('/products'))
if (!res.ok) throw new Error(`Request failed (${res.status})`)
const json = await res.json()
// Backend shape from the reference impl: { status, created, data: [...] }
// Fall back to the raw payload if it's already an array.
const list = Array.isArray(json) ? json : (json?.data ?? [])
if (!cancelled) setProducts(list)
} catch (e) {
if (!cancelled) setError(e.message)
} finally {
if (!cancelled) setLoading(false)
}
})()
return () => { cancelled = true }
}, [])
if (loading) return <div>Loading products...</div>
if (error) return <div>Error: {error}</div>
return (
<div>
<h2>Products</h2>
<ul>
{products.map((p) => (
<li key={p.id}>
{p.name} — {p.price}
</li>
))}
</ul>
</div>
)
}

0
apps/client/src/index.css → src/index.css
View File

0
apps/client/src/layouts/AuthLayout.jsx → src/layouts/AuthLayout.jsx
View File

29
src/layouts/MainLayout.jsx Normal file
View File

@ -0,0 +1,29 @@
// src/layouts/MainLayout.jsx
import { Outlet, Link } from 'react-router-dom'
import TopBar from './TopBar'
import { useAuth } from '../app/providers/AuthProvider'
export default function MainLayout() {
const { role } = useAuth()
return (
<div className="layout">
<TopBar />
<div className="body">
<aside className="sidebar">
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/products">Products</Link></li>
{/* Admin link is shown only to admins (UX); the route + server also enforce it. */}
{role === 'admin' && <li><Link to="/admin">Admin</Link></li>}
</ul>
</aside>
<main className="content">
<Outlet />
</main>
</div>
</div>
)
}

3
apps/client/src/layouts/TopBar.jsx → src/layouts/TopBar.jsx
View File

@ -1,6 +1,7 @@
import { useNavigate } from 'react-router-dom'
import { useAuth } from '../app/providers/AuthProvider'
import { fetchWithCred } from '../lib/api'
import { authUrl } from '../lib/endpoints'
export default function TopBar() {
const { user, logout } = useAuth()
@ -9,7 +10,7 @@ export default function TopBar() {
const handleLogout = async () => {
try {
await fetchWithCred(
`${import.meta.env.VITE_AUTH_SERVICE_URL}/auth/logout`,
authUrl('/auth/logout'),
{ method: 'POST' }
)
} catch (e) {

4
apps/client/src/lib/api.js → src/lib/api.js
View File

@ -1,3 +1,5 @@
import { authUrl } from './endpoints'
export class ApiError extends Error {
constructor(message, statusCode, details) {
super(message)
@ -48,7 +50,7 @@ export const fetchWithRefresh = async (url, options = {}, { retries = 1, timeout
if (response.status === 401) {
console.log('Access token expired, trying refresh...')
const refreshRes = await fetchWithCred(`${import.meta.env.VITE_AUTH_SERVICE_URL}/auth/token/refresh`,
const refreshRes = await fetchWithCred(authUrl('/auth/token/refresh'),
{
method: 'POST',
...(csrfToken && { headers: { 'x-csrf-token': csrfToken }})

17
src/lib/endpoints.js Normal file
View File

@ -0,0 +1,17 @@
// Centralizes base URLs so auth calls and data (opr) calls never get mixed up.
//
// authUrl('/auth/me') -> `${VITE_AUTH_SERVICE_URL}/auth/me`
// oprUrl('/products') -> `${VITE_OPR_API_URL}/products`
//
// In dev these resolve to relative paths (/auth-service, /opr-rest-api) that the
// Vite proxy forwards to the backend. In prod they should point at your gateway.
const AUTH_BASE = import.meta.env.VITE_AUTH_SERVICE_URL ?? ''
const OPR_BASE = import.meta.env.VITE_OPR_API_URL ?? ''
if (import.meta.env.DEV && !OPR_BASE) {
console.warn('[endpoints] VITE_OPR_API_URL is not set — opr/data calls have no base URL.')
}
export const authUrl = (path = '') => `${AUTH_BASE}${path}`
export const oprUrl = (path = '') => `${OPR_BASE}${path}`

0
apps/client/src/main.jsx → src/main.jsx
View File

27
vite.config.js Normal file
View File

@ -0,0 +1,27 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
const AUTH_BACKEND = 'http://localhost:8080' // auth-service
const OPR_BACKEND = 'http://localhost:8083' // opr-rest-api
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
server: {
port: 5173,
proxy: {
// /auth-service/* -> http://localhost:8080/auth-service/*
'/auth-service': {
target: AUTH_BACKEND,
changeOrigin: true,
secure: false,
},
// /opr-rest-api/* -> http://localhost:8083/opr-rest-api/*
'/opr-rest-api': {
target: OPR_BACKEND,
changeOrigin: true,
secure: false,
},
},
},
})