Quickstart Guide

// What's stored in localStorage['rst_token']
interface Session {
  token:    string;   // Signed JWT (HS256, 1 h TTL)
  refresh?: string;   // Refresh token (7 day TTL) for silent rotation
  exp:      number;   // Epoch ms — when the access token expires
}

// Read the token safely
const raw  = localStorage.getItem('rst_token');
const sess: Session = JSON.parse(raw);
const jwt  = sess.token;

{
  "user_id":    42,
  "email":      "alice@reiwasakura.tech",
  "first_name": "Alice",
  "last_name":  "Chen",
  "role":       "developer",
  "iat":        1750000000,
  "exp":        1750003600
}

// Login — store the returned session
const res  = await fetch('/api/auth/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ email: 'alice@reiwasakura.tech', password: '...' }),
});
const { data } = await res.json();
// data.access_token, data.refresh_token, data.expires_in

localStorage.setItem('rst_token', JSON.stringify({
  token:   data.access_token,
  refresh: data.refresh_token,
  exp:     Date.now() + data.expires_in * 1000,
}));

// Authenticated request
const { data: tasks } = await fetch('/api/tasks', {
  headers: { Authorization: `Bearer ${JSON.parse(localStorage.getItem('rst_token')).token}` },
}).then(r => r.json());

// POST /api/auth/refresh
const r = await fetch('/api/auth/refresh', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ refresh_token: sess.refresh }),
});
const { data } = await r.json();
// data.access_token  — new JWT
// data.refresh_token — new refresh token (old one is now invalid)
// data.expires_in    — seconds until new JWT expires

/* Light mode — applied when data-theme="light" */
:root {
  --bg:         #faf8ff;
  --text:       #0d0b14;
  --accent:     #7c3aed;
  --surface:    #ffffff;
  --surface-2:  #f3f0ff;
  --border:     rgba(100,80,180,.12);
}

/* Dark mode — applied when data-theme="dark" */
[data-theme="dark"] {
  --bg:         #0d0b14;
  --text:       #e8e0ff;
  --accent:     #a96ef5;
  --surface:    #130f1e;
  --surface-2:  #1a1528;
  --border:     rgba(255,255,255,.08);
}

/* Accent colours available everywhere */
--purple: #a96ef5;
--pink:   #e8788a;
--teal:   #4ecdc4;
--gold:   #f7c948;
--green:  #3ddc84;
--red:    #ff6363;