Lejárt JWT, ami adatvesztésnek látszott

Az adminfelület nulla regisztrációt mutatott, a táblázat helyén annyi állt, hogy nincs találat. Kijelentkezés és visszajelentkezés után minden visszajött, az adatbázisból pedig egyetlen rekord sem hiányzott.

Mit árult el a napló

A webszerver hozzáférési naplójából három dolog látszott egyszerre: a böngésző küldte az Authorization fejlécet, tehát a token ott volt; az összes adminvégpont 401-et adott ugyanabban a másodpercben, nem csak a regisztrációs; és a szerver mindegyikre szabályosan válaszolt.

Ez eldöntötte a kérdést. Ha tényleg eltűntek volna a rekordok, a válasz 200 lett volna üres listával. A 401 mást jelent: a szerver megkapta a tokent, és nem fogadta el. Lejárt.

A három hiba

A backend végig helyesen működött: a lejárt JWT-re pontosan azt válaszolta, amit kell. A hiba a frontenden volt, három apró mulasztás egymásra rakódva.

// 1. a route guard csak a token LÉTÉT nézte
const [isLoggedIn] = useState(!!getToken());

// 2. a 401 néma catchben veszett el
try {
  setRegistrations(await api.get("/registrations"));
} catch (err) {
  console.error(err);   // a képernyőn semmi
}

// 3. a lista [] maradt, a tábla ezt "Nincs találat"-ként rendereli

A lejárt token is token, így a guard beengedett a védett oldalra. Ott lefutott a lekérés, 401-et kapott, a catch elnyelte, a lista üres maradt. A felület pedig az üres listát és a sikertelen lekérést ugyanúgy rajzolja ki.

Az üres lista és a sikertelen lekérés a képernyőn ugyanúgy néz ki. A felhasználó fejében nem.

Amit javítottunk

• A guard dekódolja a JWT payloadját, és az exp mezőt is nézi. Ez nem biztonsági kérdés, mert a szerver úgyis aláírással validál, hanem UX: lejárt tokennel be se lépjen a védett felületre.
• Globális 401-kezelés az API kliensben: token eldobása, kiléptetés, és érthető üzenet, hogy a munkamenet járt le, az adatok megvannak. Kivétel a login végpont 401-je, ott rossz jelszó van.
• Nincs több néma catch adatlekérésnél. A felület négy állapotot különböztet meg: loading, error, empty, data.
• A token élettartama 1 napról 7 napra nőtt. Nem ez okozta a hibát, de napi kieséssel élni fölösleges.

A tanulság

Minden összetevő azt csinálta, amire megírták, az eredmény mégis adatvesztésnek látszott. A néma catch a leggyakoribb éles hibaforrás: nem hasal el látványosan, csak hazudik a felület, a felhasználó pedig rossz következtetést von le belőle.