init
This commit is contained in:
commit
592788f2da
|
|
@ -0,0 +1,29 @@
|
|||
# Node
|
||||
node_modules/
|
||||
apps/*/node_modules/
|
||||
|
||||
# Build outputs
|
||||
dist/
|
||||
build/
|
||||
apps/*/dist/
|
||||
apps/*/build/
|
||||
|
||||
# Env and logs
|
||||
.env
|
||||
*.log
|
||||
|
||||
# Editor and system files
|
||||
.vscode/
|
||||
!.vscode/extensions.json
|
||||
.DS_Store
|
||||
|
||||
|
||||
# My ignore list
|
||||
_bin/
|
||||
apps/*/_bin/
|
||||
*.bu.html
|
||||
*.bu.json
|
||||
*.bu.css
|
||||
*.bu.jsx
|
||||
*.bu.js
|
||||
*.bu.md
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2025 supershaneski
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
|
|
@ -0,0 +1,314 @@
|
|||
# JWT Auth Example (HttpOnly Cookies)
|
||||
|
||||
[](https://nodejs.org/)
|
||||
[](https://react.dev/)
|
||||
[](https://vitejs.dev/)
|
||||
[](LICENSE)
|
||||
|
||||
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
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Runs:
|
||||
- Client: `http://your-ip:5173`
|
||||
- Server: `http://your-ip:3000`
|
||||
|
||||
|
||||
### 5. Try It
|
||||
|
||||
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,
|
||||
})
|
||||
```
|
||||
|
||||
You’ll see the cookies under the **Cookies** section of the **Network** tab in the client.
|
||||
|
||||
**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)
|
||||
```
|
||||
|
||||
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**.
|
||||
|
||||
> [!NOTE]
|
||||
> A **protected route** is a route or endpoint that is under some security scheme and requires **authentication**.
|
||||
|
||||
**3. Token refresh** `POST /api/refresh` →
|
||||
When the user request the refresh route, the browser automatically attaches the **refreshToken** cookie.
|
||||
|
||||
**Request Cookies**
|
||||
| Name | Value |
|
||||
|---------------|--------------------------|
|
||||
| refreshToken | eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1MSIsInVz... |
|
||||
|
||||
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.
|
||||
|
||||
If the **refreshToken** cookie is still valid, we will receive new **accessToken** and **refreshToken** cookies.
|
||||
|
||||
**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.
|
||||
|
||||
```js
|
||||
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',
|
||||
})
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
|
||||
---
|
||||
|
|
@ -0,0 +1 @@
|
|||
VITE_API_BASE_URL=http://192.168.0.1:3000
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import js from '@eslint/js'
|
||||
import globals from 'globals'
|
||||
import reactHooks from 'eslint-plugin-react-hooks'
|
||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{js,jsx}'],
|
||||
extends: [
|
||||
js.configs.recommended,
|
||||
reactHooks.configs['recommended-latest'],
|
||||
reactRefresh.configs.vite,
|
||||
],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2020,
|
||||
globals: globals.browser,
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest',
|
||||
ecmaFeatures: { jsx: true },
|
||||
sourceType: 'module',
|
||||
},
|
||||
},
|
||||
rules: {
|
||||
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
|
||||
},
|
||||
},
|
||||
])
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>JWT-Auth Client</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
{
|
||||
"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"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1,31 @@
|
|||
#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); }
|
||||
}
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
import React from 'react'
|
||||
import './App.css'
|
||||
import { ApiError, fetchWithCred, fetchWithRefresh } from './lib/api'
|
||||
|
||||
function Spinner() {
|
||||
return <div className="spinner" />
|
||||
}
|
||||
|
||||
function App() {
|
||||
|
||||
const [isLogin, setIsLogin] = React.useState(false)
|
||||
const [isLoading, setIsLoading] = React.useState(false)
|
||||
const [csrfToken, setCsrfToken] = React.useState('')
|
||||
|
||||
const handleLogin = async () => {
|
||||
try {
|
||||
setIsLoading(true)
|
||||
const url = `${import.meta.env.VITE_API_BASE_URL}/api/login`
|
||||
const response = await fetchWithCred(url, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
username: 'alice',
|
||||
password: 'secret123'
|
||||
})
|
||||
})
|
||||
if (!response.ok) {
|
||||
const data = await response.json()
|
||||
throw new ApiError(data.message || 'Login failed', response.status, data)
|
||||
}
|
||||
|
||||
const token = document.cookie
|
||||
.split('; ')
|
||||
.find(row => row.startsWith('csrfToken='))
|
||||
?.split('=')[1]
|
||||
|
||||
setCsrfToken(token)
|
||||
|
||||
const result = await response.json()
|
||||
console.log('[Client] Login response:', result)
|
||||
|
||||
setIsLogin(true)
|
||||
} catch(err) {
|
||||
if (err instanceof ApiError) {
|
||||
console.log('[Client] API Error:', err.message)
|
||||
console.log('[Client] Status:', err.statusCode)
|
||||
console.log('[Client] Details:', err.details)
|
||||
} else {
|
||||
console.log('[Client] Unexpected error:', err)
|
||||
}
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
setIsLoading(true)
|
||||
const url = `${import.meta.env.VITE_API_BASE_URL}/api/logout`
|
||||
const response = await fetchWithCred(url, {
|
||||
method: 'POST',
|
||||
//...(csrfToken && { headers: { 'x-csrf-token': csrfToken }})
|
||||
})
|
||||
if (!response.ok) {
|
||||
const data = await response.json()
|
||||
throw new ApiError(data.message || 'Failed to logout', response.status, data)
|
||||
}
|
||||
const result = await response.json()
|
||||
console.log('[Client] Logout response:', result)
|
||||
setIsLogin(false)
|
||||
} catch(err) {
|
||||
if (err instanceof ApiError) {
|
||||
console.log('[Client] API Error:', err.message)
|
||||
console.log('[Client] Status:', err.statusCode)
|
||||
console.log('[Client] Details:', err.details)
|
||||
} else {
|
||||
console.log('[Client] Unexpected error:', err)
|
||||
}
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleProducts = async () => {
|
||||
try {
|
||||
setIsLoading(true)
|
||||
const url = `${import.meta.env.VITE_API_BASE_URL}/api/products`
|
||||
const response = await fetchWithRefresh(url,{},{ retries: 5 }, csrfToken)
|
||||
if (!response.ok) {
|
||||
const data = await response.json()
|
||||
throw new ApiError(data.message || 'Failed to get products', response.status, data)
|
||||
}
|
||||
const result = await response.json()
|
||||
console.log('[Client] Get Products response:', result)
|
||||
} catch(err) {
|
||||
if (err instanceof ApiError) {
|
||||
console.log('[Client] API Error:', err.message)
|
||||
console.log('[Client] Status:', err.statusCode)
|
||||
console.log('[Client] Details:', err.details)
|
||||
} else {
|
||||
console.log('[Client] Unexpected error:', err)
|
||||
}
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleRefresh = async () => {
|
||||
try {
|
||||
setIsLoading(true)
|
||||
const url = `${import.meta.env.VITE_API_BASE_URL}/api/refresh`
|
||||
const response = await fetchWithCred(url,{
|
||||
method: 'POST',
|
||||
...(csrfToken && { headers: { 'x-csrf-token': csrfToken }})
|
||||
})
|
||||
if (!response.ok) {
|
||||
const data = await response.json()
|
||||
throw new ApiError(data.message || 'Failed to refresh', response.status, data)
|
||||
}
|
||||
|
||||
const token = document.cookie
|
||||
.split('; ')
|
||||
.find(row => row.startsWith('csrfToken='))
|
||||
?.split('=')[1]
|
||||
setCsrfToken(token)
|
||||
|
||||
const result = await response.json()
|
||||
console.log('[Client] Get Products response:', result)
|
||||
} catch(err) {
|
||||
if (err instanceof ApiError) {
|
||||
console.log('[Client] API Error:', err.message)
|
||||
console.log('[Client] Status:', err.statusCode)
|
||||
console.log('[Client] Details:', err.details)
|
||||
} else {
|
||||
console.log('[Client] Unexpected error:', err)
|
||||
}
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<h4>JWT-Auth Client</h4>
|
||||
<p>Open the browser's <strong>DevTools</strong> and check the <strong>Console</strong> and <strong>Network</strong> tabs for authentication and request activity.</p>
|
||||
{
|
||||
isLogin ? (
|
||||
<button onClick={handleLogout} disabled={isLoading}>Logout</button>
|
||||
):(
|
||||
<button onClick={handleLogin} disabled={isLoading}>Login</button>
|
||||
)
|
||||
}
|
||||
<button onClick={handleProducts} disabled={isLoading}>{ isLoading && <Spinner /> }Get Products</button>
|
||||
<button onClick={handleRefresh} disabled={isLoading}>{ isLoading && <Spinner /> }Refresh</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
|
|
@ -0,0 +1,80 @@
|
|||
:root {
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.2em;
|
||||
line-height: 1.1;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
export class ApiError extends Error {
|
||||
constructor(message, statusCode, details) {
|
||||
super(message)
|
||||
this.name = 'ApiError'
|
||||
this.statusCode = statusCode
|
||||
this.details = details
|
||||
}
|
||||
}
|
||||
|
||||
const sleep = (ms) => new Promise((r) => setTimeout(r, ms))
|
||||
|
||||
export const fetchWithCred = async (url, options = {}, { retries = 1, timeout = 8000, baseDelay = 300 } = {}) => {
|
||||
const attempt = async (n) => {
|
||||
const controller = new AbortController()
|
||||
const timer = setTimeout(() => controller.abort(), timeout)
|
||||
try {
|
||||
const response = await fetch(url, {
|
||||
...options,
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
...options.headers,
|
||||
},
|
||||
signal: controller.signal,
|
||||
})
|
||||
clearTimeout(timer)
|
||||
return response
|
||||
} catch (err) {
|
||||
clearTimeout(timer)
|
||||
if (err.name === 'AbortError') {
|
||||
console.error('Request timed out after', `${timeout} ms`)
|
||||
}
|
||||
if (n < retries && (err.name === 'AbortError' || err.name === 'TypeError')) {
|
||||
const delay = baseDelay * 2 ** n + Math.random() * 100
|
||||
console.warn(`Retrying in ${Math.round(delay)}ms (attempt ${n + 1})...`)
|
||||
await sleep(delay)
|
||||
return attempt(n + 1)
|
||||
}
|
||||
throw err
|
||||
}
|
||||
}
|
||||
return attempt(0)
|
||||
}
|
||||
|
||||
export const fetchWithRefresh = async (url, options = {}, { retries = 1, timeout = 8000 } = {}, csrfToken = '') => {
|
||||
let response = await fetchWithCred(url, options, { retries, timeout })
|
||||
|
||||
if (response.status === 401) {
|
||||
console.log('Access token expired, trying refresh...')
|
||||
const refreshRes = await fetchWithCred(`${import.meta.env.VITE_API_BASE_URL}/api/refresh`,
|
||||
{
|
||||
method: 'POST',
|
||||
...(csrfToken && { headers: { 'x-csrf-token': csrfToken }})
|
||||
}, { retries, timeout })
|
||||
if (refreshRes.ok) {
|
||||
console.log('Refresh succeeded, retrying original request...')
|
||||
|
||||
const csrfToken = document.cookie
|
||||
.split('; ')
|
||||
.find(row => row.startsWith('csrfToken='))
|
||||
?.split('=')[1]
|
||||
console.log('CSRF-TOKEN', csrfToken)
|
||||
|
||||
response = await fetchWithCred(url, options, { retries, timeout })
|
||||
} else {
|
||||
console.log('Refresh failed, user must log in again')
|
||||
return refreshRes
|
||||
}
|
||||
}
|
||||
|
||||
return response
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.jsx'
|
||||
|
||||
createRoot(document.getElementById('root')).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
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
|
||||
|
|
@ -0,0 +1,397 @@
|
|||
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
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"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"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export default [
|
||||
'http://192.168.1.80:5173',
|
||||
]
|
||||
|
|
@ -0,0 +1,154 @@
|
|||
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}`)
|
||||
})
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
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 }
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
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'
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
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
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
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
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
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)
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
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
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
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()
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
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
|
||||
}
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
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(),
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
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,
|
||||
})
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,31 @@
|
|||
{
|
||||
"name": "jwt-auth-example",
|
||||
"private": true,
|
||||
"version": "0.1.0",
|
||||
"description": "A demo monorepo showing JWT authentication via HttpOnly cookie using Express and Vite.",
|
||||
"workspaces": [
|
||||
"apps/*",
|
||||
"shared"
|
||||
],
|
||||
"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\""
|
||||
},
|
||||
"devDependencies": {
|
||||
"concurrently": "^9.0.0"
|
||||
},
|
||||
"keywords": [
|
||||
"jwt",
|
||||
"authentication",
|
||||
"auth",
|
||||
"cookie",
|
||||
"httpOnly",
|
||||
"express",
|
||||
"react",
|
||||
"example",
|
||||
"demo"
|
||||
],
|
||||
"author": "supershaneski",
|
||||
"license": "MIT"
|
||||
}
|
||||
Loading…
Reference in New Issue