azirid-react 0.11.3 → 0.12.0

package/README.md

@@ -1353,6 +1353,28 @@ function createAccessClient(
 
 ---
 
+## Device Tracking
+
+The SDK automatically generates a persistent device ID (UUIDv4) and stores it in `localStorage` under the key `__az_device_id`. This ID is sent as an `X-Device-Id` header on every auth request (login, signup, refresh, bootstrap).
+
+**How it works:**
+- On first use, `crypto.randomUUID()` generates a unique ID per browser profile
+- The ID persists across tabs, page reloads, and browser restarts
+- Different browsers or incognito windows get different device IDs
+- The backend uses this to deduplicate sessions per device: re-logging from the same browser replaces the previous session instead of creating duplicates
+
+**Storage keys used by the SDK:**
+
+| Key | Storage | Purpose |
+|-----|---------|---------|
+| `__az_device_id` | `localStorage` | Persistent device identity (survives browser restarts) |
+| `__azrt` | `sessionStorage` | Refresh token (per-tab, survives page refresh) |
+| `__azxc` | `sessionStorage` | CSRF token (per-tab) |
+
+> **Note:** In SSR or environments where `localStorage` is unavailable, the device ID header is omitted and the backend falls back to user-agent-based fingerprinting.
+
+---
+
 ## Next.js Integration
 
 `azirid-react` supports **Next.js 14, 15, and 16+** with full compatibility for each version's API conventions.

package/dist/index.cjs

@@ -149,6 +149,20 @@ function createAccessClient(config, appContext) {
   const paths = config.basePath ? buildPaths(config.basePath) : PATHS;
   const storageKeyRt = "__azrt";
   const storageKeyCsrf = "__azxc";
+  const storageKeyDeviceId = "__az_device_id";
+  function getOrCreateDeviceId() {
+    try {
+      if (typeof localStorage === "undefined") return null;
+      let id = localStorage.getItem(storageKeyDeviceId);
+      if (!id) {
+        id = crypto.randomUUID();
+        localStorage.setItem(storageKeyDeviceId, id);
+      }
+      return id;
+    } catch {
+      return null;
+    }
+  }
   function ssGet(key) {
     try {
       return typeof sessionStorage !== "undefined" ? sessionStorage.getItem(key) : null;
@@ -229,6 +243,8 @@ function createAccessClient(config, appContext) {
     }
     const csrf = getCsrfToken();
     if (csrf) reqHeaders["X-CSRF-Token"] = csrf;
+    const devId = getOrCreateDeviceId();
+    if (devId) reqHeaders["X-Device-Id"] = devId;
     const bodyPayload = {};
     if (refreshToken) {
       bodyPayload["rt"] = refreshToken;
@@ -291,6 +307,10 @@ function createAccessClient(config, appContext) {
     if (csrf) {
       headers["X-CSRF-Token"] = csrf;
     }
+    const devId = getOrCreateDeviceId();
+    if (devId) {
+      headers["X-Device-Id"] = devId;
+    }
     let requestBody = body;
     if (isSessionPath && refreshToken) {
       const existing = typeof body === "object" && body !== null ? body : {};
@@ -337,6 +357,10 @@ function createAccessClient(config, appContext) {
       if (retryCsrf) {
         retryHeaders["X-CSRF-Token"] = retryCsrf;
       }
+      const retryDevId = getOrCreateDeviceId();
+      if (retryDevId) {
+        retryHeaders["X-Device-Id"] = retryDevId;
+      }
       res = await fetch(`${baseUrl}${path}`, {
         method,
         headers: retryHeaders,
@@ -4746,7 +4770,7 @@ function usePasswordToggle() {
 }
 
 // src/index.ts
-var SDK_VERSION = "0.11.3";
+var SDK_VERSION = "0.12.0";
 
 exports.AuthForm = AuthForm;
 exports.AziridProvider = AziridProvider;