1. Tổng quan JWT (JSON Web Token) là chuẩn mở để truyền thông tin an toàn giữa client và server. Kết hợp với Refresh Token giúp duy trì phiên đăng nhập lâu dài mà không cần lưu Access Token dài hạn trên thiết bị. 2. Luồng xác thực cơ bản - Người dùng gửi email/mật khẩu đến endpoint /auth/login. - Server kiểm tra, nếu hợp lệ trả về Access Token (hết hạn 15‑30 phút) và Refresh Token (hết hạn 7‑30 ngày, lưu trong HttpOnly cookie hoặc Secure Storage). - Client đính kèm Access Token trong header Authorization: Bearer <token> cho mọi request cần bảo vệ. - Khi Access Token hết hạn, client gọi /auth/refresh với Refresh Token để nhận cặp token mới. 3. Triển khai trên React Web (PWA) - Sử dụng axios interceptor để tự động gắn Access Token. - Khi nhận 401, gọi API refresh, cập nhật token trong memory (không lưu localStorage để tránh XSS). - Lưu Refresh Token trong HttpOnly cookie do server set, giúp CSRF protection thông qua SameSite=Lax. - Ví dụ snippet interceptor: axios.interceptors.response.use(res => res, async err => { if (err.response?.status === 401 && !err.config._retry) { err.config._retry = true; await axios.post('/auth/refresh'); return axios(err.config); } return Promise.reject(err); }); 4. Triển khai trên React Native - Access Token giữ trong biến state hoặc context (không dùng AsyncStorage). - Refresh Token lưu trong Keychain (iOS) / Keystore (Android) qua react-native-keychain. - Tương tự dùng axios hoặc fetch wrapper để xử lý 401 và tự động refresh. - Lưu ý: trên mobile không có cookie HttpOnly, do đó Refresh Token phải được mã hóa và lưu an toàn. 5. Authorization dựa trên Role/Permission - Payload JWT chứa claims: { sub, roles: ["admin", "editor"] }. - Backend kiểm tra roles trước khi cho phép truy cập endpoint. - Frontend có thể dùng custom hook usePermission(roles) để ẩn/hiện UI components. 6. Bảo mật thêm - Luôn dùng HTTPS. - Access Token ngắn hạn, Refresh Token dài hạn nhưng có thể thu hồi (revoke) bằng cách lưu blacklist hoặc version token trong DB. - Triển khai rate‑limit cho /auth/login và /auth/refresh. - Log các lần refresh thất bại để phát hiện tấn công. 7. Checklist triển khai production - [ ] Access Token ≤ 30 phút. - [ ] Refresh Token HttpOnly cookie (web) / Secure Storage (mobile). - [ ] CSRF token cho web nếu dùng cookie. - [ ] Rotate Refresh Token sau mỗi lần dùng (issue new, revoke old). - [ ] Unit test cho interceptor refresh logic. - [ ] Monitoring lỗi 401/403 trên APM. Với cách tiếp cận này, cả React Web và React Native chia sẻ cùng một luồng xác thực, giảm thiểu bug bảo mật và dễ dàng mở rộng khi thêm tính năng Single Sign‑On hay Social Login sau này.