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.)