1. Tổng quan về xác thực hiện đại Khi xây dựng ứng dụng chạy đồng thời trên web và mobile, việc thống nhất luồng đăng nhập giúp giảm thiểu lỗi và dễ dàng bảo trì. OAuth2 kết hợp OpenID Connect (OIDC) cung cấp chuẩn mở cho phép delegated authorization, trong khi JSON Web Token (JWT) đóng vai trò là access token tự chứa, phù hợp cho cả trình duyệt và thiết bị di động. 2. Luồng đăng nhập phổ biến – Authorization Code Flow with PKCE - Bước 1: Ứng dụng chuyển hướng người dùng đến Identity Provider (IdP) kèm code_verifier và code_challenge. - Bước 2: IdP xác thực người dùng và trả về authorization code. - Bước 3: Client trao đổi code để nhận access token, id token và refresh token. - Bước 4: Access token (JWT) được lưu trữ an toàn (HttpOnly cookie cho web, SecureStore/Keychain cho React Native) và đính kèm vào header Authorization cho các request API. 3. Triển khai thực tế - Cài đặt thư viện: @react-oauth/google cho web, expo-auth-session cho React Native. - Tạo một AuthContext chung chứa state user, hàm login, logout, refreshToken. - Sử dụng Axios interceptor để tự động gắn Bearer token và xử lý 401 bằng cách gọi refresh token. - Bảo vệ route: PrivateRoute trên web, navigation guard trên mobile. 4. Phân quyền dựa trên claim trong JWT - IdP thêm custom claim roles hoặc permissions vào access token. - Trên client, decode JWT (không verify signature) để lấy roles và render điều kiện UI. - Server‑side vẫn phải verify signature và kiểm tra scope trước khi trả dữ liệu. 5. Mẹo bảo mật và trải nghiệm người dùng - Luôn bật PKCE, tránh implicit flow. - Lưu refresh token trong storage mã hóa, không bao giờ đưa vào localStorage. - Thiết lập access token ngắn hạn (5‑15 phút) và refresh token dài hạn với rotation. - Hiển thị loading skeleton khi chờ token mới để tránh nháy màn hình. 6. Kết luận Việc tập trung logic xác thực vào một AuthContext chung, kết hợp Authorization Code Flow với PKCE và JWT, cho phép đội ngũ duy trì một codebase duy nhất cho cả React Web và React Native, đồng thời đáp ứng các tiêu chuẩn bảo mật hiện nay.