Ho appena completato una migrazione significativa per il mio blog editor: da un’architettura OAuth 2.0 con backend Vercel a una soluzione 100% client-side basata su token manuali.
## Il Problema con OAuth
L’implementazione precedente funzionava bene, ma aveva una dipendenza che mi infastidiva: Vercel. Per gestire lo scambio sicuro del client_secret di GitHub OAuth, serviva una
serverless function che facesse da proxy. Questo significava:
- Un account Vercel da mantenere
- Environment variables da configurare
- Un punto di failure esterno
- Complessità aggiuntiva per un’operazione che uso solo io
## La Soluzione: BYOT (Bring Your Own Token)
La nuova architettura è brutalmente semplice:
Browser → GitHub API (diretto)
Nessun intermediario. L’utente (cioè io) genera un Personal Access Token su GitHub e lo inserisce manualmente nell’editor. Il token viene salvato in localStorage e usato per
tutte le chiamate API.
### Vantaggi
- Zero backend: L’editor gira interamente su GitHub Pages
- Nessuna dipendenza esterna: Eliminati Vercel, OAuth app, callback URL
- Controllo totale: Scelgo io scope e scadenza del token
- Privacy: Nessun dato transita su server terzi
- Semplicità: Meno codice, meno cose che possono rompersi
### Il Trade-off
Devo generare manualmente un token su GitHub invece di cliccare “Login with GitHub”. Per un blog personale che gestisco solo io, è un trade-off più che accettabile. Anzi, preferisco avere il controllo esplicito su cosa può fare quel token.
## Implementazione
La modale di input usa un effetto glassmorphism per integrarsi con lo stile del sito:
```css .modal-content { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.2); }
Il token viene validato prima del salvataggio con una chiamata a GET /user:
const response = await fetch(‘https://api.github.com/user’, {
headers: {
‘Authorization’: Bearer ${token},
‘Accept’: ‘application/vnd.github.v3+json’,
},
});
Se la risposta è 200, il token è valido e viene salvato. Altrimenti, mostro un errore specifico (token invalido, rate limit, permessi insufficienti).
File Eliminati
Con questa migrazione ho potuto rimuovere:
- api/auth/callback.js - La serverless function Vercel
- vercel.json - Tutta la configurazione Vercel
- L’intera directory api/
Circa 150 righe di codice backend eliminate, sostituite da ~100 righe di JavaScript client-side più pulito.
Considerazioni sulla Sicurezza
Il token in localStorage è protetto dalla same-origin policy del browser. Nessun sito esterno può leggerlo. Il rischio principale sarebbe un attacco XSS, ma trattandosi di un sito statico con codice che controllo interamente, il rischio è minimo.
Per chi fosse paranoico (giustamente), GitHub permette di:
- Impostare una scadenza sul token
- Limitare lo scope a public_repo
- Revocare istantaneamente il token se compromesso
Conclusione
Questa migrazione riflette una filosofia che applico sempre di più: se puoi eliminare una dipendenza senza perdere funzionalità significative, fallo.
Il blog editor ora è una vera static app che vive e muore su GitHub Pages, senza alcun servizio esterno. Esattamente come dovrebbe essere.