Spaces:
Sleeping
Sleeping
File size: 2,877 Bytes
b675d80 3ddec08 f113aa5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | ---
title: TaskFlow Backend
emoji: ๐
colorFrom: green
colorTo: blue
sdk: docker
pinned: false
short_description: TaskFlow A Full-Stack-Web-Application Hackathon 2 Phase 2
---
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
## Cross-site deployment notes ๐ง
If your backend is hosted on a different domain (e.g., Hugging Face Spaces) than your frontend (e.g., Vercel), follow these steps to make cookie-based auth work:
- Set `FRONTEND_URL` in your environment to your Vercel URL (e.g. `https://your-app.vercel.app`).
- Ensure `JWT_COOKIE_SECURE=True` in production (browsers require `Secure` when `SameSite=None`).
- Frontend fetch calls that rely on cookies must use `credentials: 'include'` (e.g. `fetch(url, { method, credentials: 'include' })`).
- Backend CORS must have `allow_credentials=True` and the exact frontend origin (not `*`) in allowed origins. This project reads `FRONTEND_URL` for that purpose.
### Refresh token flow (implemented)
- On login the backend now returns a **short-lived access token** (in the response) and sets a **HttpOnly refresh cookie** (`/api/auth` path).
- To get a new access token, call `POST /api/auth/refresh` with `credentials: 'include'`. The server validates and rotates the refresh token and returns a new access token in the response body.
- On logout the server revokes the refresh token and clears the refresh cookie.
Client example (login + using refresh) โ Vercel frontend:
1) Login (receives access token in response body and a HttpOnly refresh cookie):
```js
const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/auth/login`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
credentials: 'include',
body: JSON.stringify({ email, password }),
})
const data = await res.json()
const accessToken = data.access_token
// Store accessToken in memory (React state)
```
2) Use access token for protected calls (in memory, sent in Authorization header):
```js
await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/tasks`, {
headers: { 'Authorization': `Bearer ${accessToken}` }
})
```
3) Obtain a fresh access token when it expires:
```js
const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/auth/refresh`, {
method: 'POST',
credentials: 'include', // sends HttpOnly refresh cookie
})
const data = await res.json()
const accessToken = data.access_token
```
If cookies are still not sent/received, open DevTools network tab and inspect the `Set-Cookie` response header and browser cookie/journal to see why it was blocked (e.g., SameSite/Secure/Domain issues).
Database migration note:
- After pulling these changes, run Alembic migrations to create the `refreshtoken` table:
```bash
alembic upgrade head
```
(If you deploy to Spaces, ensure your deployment runs the migration step or create the table manually.) |