@xeplr/ui-account 1.0.0 → 1.0.2

package/package.json

@@ -1,15 +1,35 @@
 {
   "name": "@xeplr/ui-account",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Account UI: auth, profile, RBAC admin, tenant management — React controller hooks and designs",
   "type": "module",
   "main": "src/index.js",
-  "files": ["src/"],
-  "keywords": ["auth", "account", "profile", "react", "hooks", "login", "register", "rbac", "multi-tenancy"],
+  "files": [
+    "src/"
+  ],
+  "keywords": [
+    "auth",
+    "account",
+    "profile",
+    "react",
+    "hooks",
+    "login",
+    "register",
+    "rbac",
+    "multi-tenancy"
+  ],
   "author": "xeplr",
   "license": "MIT",
-  "repository": { "type": "git", "url": "https://github.com/Xeplr/xeplr-ui-account" },
-  "publishConfig": { "access": "public" },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Xeplr/xeplr-ui-account"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@xeplr/ui-utils": "^1.0.0"
+  },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-router-dom": "^6.0.0 || ^7.0.0"

package/src/AccessContext.jsx

@@ -1,14 +1,16 @@
-import { createContext, useContext, useState, useEffect } from 'react';
+import { createContext, useContext, useState, useEffect, useRef } from 'react';
+import { raiseSnackbar } from '@xeplr/ui-utils';
 import { getToken, getUser } from './token.js';
-import { logoutUser } from './api.js';
+import { logoutUser, getMe, setSessionExpiredHandler } from './api.js';
 
 const AccessContext = createContext(null);
 
 /**
  * AccessProvider — wraps your app to provide access state.
  *
- * On mount, loads access from localStorage (set during login).
- * Provides helpers: hasPage, hasApi, hasMenu, hasElement, hasRole.
+ * Seeds from localStorage (written at login) and then RE-READS IT FROM THE
+ * SERVER on mount. Provides helpers: hasPage, hasApi, hasMenu, hasElement,
+ * hasRole.
  *
  * Usage:
  *   <AccessProvider>
@@ -57,6 +59,85 @@ export function AccessProvider({ children }) {
     setAccess(result.access);
   }
 
+  // ── re-read access from the server ──────────────────────────────────
+  //
+  // WHAT THIS FIXES. `access` was written to localStorage at login and read
+  // once, here, forever after. So it was a snapshot of what the user could see
+  // at the moment they signed in — and nothing on the server could change it.
+  // Seed a menu, grant a role, take a page away: none of it reached a
+  // signed-in browser until that person happened to log out, which could be
+  // weeks. Restarting the API did not help, because the API was never the
+  // thing holding the stale copy.
+  //
+  // It went unnoticed because the failure is silent in exactly the wrong
+  // direction: useNavController drops a drawer item whose name is not in
+  // `access.menus` without an error, so a new page simply is not in the rail
+  // and nothing anywhere says why.
+  //
+  // ON MOUNT, which on a SPA means once per full page load. That is the
+  // shortest honest promise: a change lands on next reload rather than next
+  // login.
+  /**
+   * Ask the server again. Also exposed on the context, so a screen that CHANGES
+   * access can show its own effect — the access matrix is the obvious one: an
+   * admin who grants a role and sees nothing happen has no way to tell a saved
+   * change from a broken one.
+   *
+   * Resolves either way. A caller awaiting it is waiting for "we tried", not
+   * for "it worked" — there is nothing useful for a nav bar to do about a
+   * failed refresh except carry on with what it had.
+   */
+  async function refreshAccess() {
+    try {
+      const result = await getMe();
+      if (!result) return null;
+      // REPLACED, not merged. Access is the whole answer to "what may this
+      // person see", and merging would keep a page that has just been revoked
+      // — the direction you least want to be wrong in.
+      if (result.access) setAccess(result.access);
+      if (result.user) setUser(result.user);
+      return result.access || null;
+    } catch (err) {
+      // KEEP WHAT WE HAVE. A network blip, a restarting API, a laptop that woke
+      // up on a train — none of those mean the user lost their permissions, and
+      // blanking `access` would empty the nav and bounce them out of the page
+      // they were reading. A genuinely dead session is handled separately, by
+      // the setSessionExpiredHandler(logout) effect below.
+      //
+      // But silently keeping stale state used to mean silently keeping the
+      // user in the dark too — this used to fail with zero indication
+      // anything was wrong. Still don't blank anything; just say so.
+      raiseSnackbar(err.message || 'Could not reach the server to refresh your access.', { design: 'error' });
+      return null;
+    }
+  }
+
+  // A dead session (refresh token missing, or rejected) is discovered inside
+  // authFetch — outside React entirely — which can wipe localStorage but has
+  // no way to flip THIS component's `authenticated` state on its own. Without
+  // this, clearAuth() runs and nothing downstream ever notices: ProtectedRoute
+  // keeps reading a stale `authenticated: true` and the app just sits there
+  // throwing errors on every call instead of bouncing to login.
+  useEffect(() => {
+    setSessionExpiredHandler(logout);
+    return () => setSessionExpiredHandler(null);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const refreshedRef = useRef(false);
+  useEffect(() => {
+    // Nothing to refresh for a signed-out visitor, and asking would be a 401 on
+    // every login screen.
+    if (!authenticated) return;
+    // StrictMode double-invokes effects in development. One request, not two.
+    // Not reset on logout either: signing back in goes through onLogin, which
+    // already carries fresh access from the login response.
+    if (refreshedRef.current) return;
+    refreshedRef.current = true;
+    refreshAccess();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [authenticated]);
+
   // Access checkers
   function hasPage(pageName) {
     if (!access) return false;
@@ -90,6 +171,7 @@ export function AccessProvider({ children }) {
     onLogin,
     logout,
     setAccess,
+    refreshAccess,
     hasPage,
     hasApi,
     hasMenu,

package/src/ProtectedRoute.jsx

@@ -1,5 +1,6 @@
-import { Navigate } from 'react-router-dom';
+import { Navigate, useLocation } from 'react-router-dom';
 import { useAccessStrict } from './AccessContext.jsx';
+import { saveReturnTo } from './returnTo.js';
 
 /**
  * ProtectedRoute — guards a route based on auth and access.
@@ -35,8 +36,10 @@ export function ProtectedRoute({
   deniedPath = '/auth/login'
 }) {
   const { authenticated, hasPage, hasRole } = useAccessStrict();
+  const location = useLocation();
 
   if (!authenticated) {
+    saveReturnTo(location);
     return <Navigate to={loginPath} replace />;
   }
 

package/src/activeScope.js

@@ -0,0 +1,71 @@
+const STORAGE_PREFIX = 'xeplr:activeScope:';
+
+/**
+ * The app's active value at a given MT level (l1, l2, ...) — e.g. the current
+ * company at l1, workspace at l2. Auth doesn't know or care what it means:
+ * it's a bare value per level, mirroring how userTenantsMapping stores a bare
+ * {level, value} row server-side. api.js's authFetch reads this (per the
+ * level's header, from registerMTs() — see mt.js) and attaches it to every
+ * request.
+ *
+ *   setActiveScope('l1', { id: 'acme-co', name: 'Acme Co' });
+ *   getActiveScope('l1');   // => { id: 'acme-co', name: 'Acme Co' }
+ */
+export function getActiveScope(level) {
+  try {
+    const raw = localStorage.getItem(STORAGE_PREFIX + level);
+    return raw ? JSON.parse(raw) : null;
+  } catch (e) {
+    return null;
+  }
+}
+
+export function setActiveScope(level, scope) {
+  try {
+    if (scope) localStorage.setItem(STORAGE_PREFIX + level, JSON.stringify(scope));
+    else localStorage.removeItem(STORAGE_PREFIX + level);
+  } catch (e) {}
+}
+
+const LAST_STORAGE_PREFIX = 'xeplr:lastScope:';
+
+/**
+ * The last value set at a given level, independent of the ACTIVE scope above
+ * and deliberately untouched by clearActiveScope() — so an app can offer to
+ * resume the same company/workspace after a logout without silently
+ * bypassing whatever cleared the active scope. A caller decides whether and
+ * how to re-verify eligibility before trusting this; auth doesn't.
+ */
+export function getLastScope(level) {
+  try {
+    const raw = localStorage.getItem(LAST_STORAGE_PREFIX + level);
+    return raw ? JSON.parse(raw) : null;
+  } catch (e) {
+    return null;
+  }
+}
+
+export function setLastScope(level, scope) {
+  try {
+    if (scope) localStorage.setItem(LAST_STORAGE_PREFIX + level, JSON.stringify(scope));
+    else localStorage.removeItem(LAST_STORAGE_PREFIX + level);
+  } catch (e) {}
+}
+
+/**
+ * Clear one level's scope, or every level if omitted (e.g. on logout).
+ */
+export function clearActiveScope(level) {
+  if (level) {
+    setActiveScope(level, null);
+    return;
+  }
+  try {
+    var keys = [];
+    for (var i = 0; i < localStorage.length; i++) {
+      var key = localStorage.key(i);
+      if (key && key.indexOf(STORAGE_PREFIX) === 0) keys.push(key);
+    }
+    keys.forEach(function(key) { localStorage.removeItem(key); });
+  } catch (e) {}
+}

package/src/adminApi.js

@@ -37,32 +37,3 @@ export function toggleModuleRole({ module, action, roleId, assign }) {
     body: JSON.stringify({ module, action, roleId, assign }),
   });
 }
-
-// ─── Tenant management (Super Admin) ───
-
-export function getTenants(level) {
-  var url = '/auth/api/admin/tenants';
-  if (level) url += '?level=' + level;
-  return authFetch(url);
-}
-
-export function saveTenant(data) {
-  return authFetch('/auth/api/admin/tenants', {
-    method: 'POST',
-    body: JSON.stringify(data),
-  });
-}
-
-export function deleteTenant(id) {
-  return authFetch('/auth/api/admin/tenants/delete', {
-    method: 'POST',
-    body: JSON.stringify({ id }),
-  });
-}
-
-export function assignUserTenant({ userId, tenantId, level }) {
-  return authFetch('/auth/api/admin/tenants/assign-user', {
-    method: 'POST',
-    body: JSON.stringify({ userId, tenantId, level }),
-  });
-}