/* Role switcher — floating bottom-left widget that lets a platform admin
hot-swap between any user identity for testing.
v1 was localhost-only, used hardcoded seed accounts (admin@aquaos.io
etc.) and called /api/auth/login. That broke in production because the
seed accounts don't exist in Supabase Postgres. v2 (this) calls
/api/auth/impersonable-users on open to fetch real users, and uses
/api/auth/assume to switch identity without needing passwords —
gated server-side to aquaos_admin only.
"Return to admin" works as long as we stash the original session in
localStorage before assuming, since the assume endpoint overwrites the
cookie + returned token. */
/* NOTE: TOKEN_KEY and USER_KEY live in api.jsx — text/babel scripts
share global scope, so redeclaring them here threw
`Identifier 'TOKEN_KEY' has already been declared` and killed the
whole role-switcher widget (it failed silently and the user only
saw the half-rendered "Session expired" badge). Reuse the globals
instead. ORIGINAL_KEY is unique to this widget. */
const ORIGINAL_KEY = 'aquaos.original_session';
function DevRoleSwitcher() {
const [open, setOpen] = useState(false);
const [busy, setBusy] = useState(null);
const [users, setUsers] = useState(null); // null = not yet fetched
const [error, setError] = useState(null);
const me = Auth.getUser();
// Bug feedback ff23422a: "logged in as oli@slate, not seeing the
// account quick switcher … to allow me to quick switch to an org
// account, site or operator, for testing". The bottom-left badge was
// easy to miss, so the topbar avatar now dispatches this event when
// the curator picks "Switch role for testing" — opens the same panel
// without us forking the impersonation logic into two surfaces.
useEffect(() => {
const onOpen = () => setOpen(true);
window.addEventListener('aquaos:open-role-switcher', onOpen);
return () => window.removeEventListener('aquaos:open-role-switcher', onOpen);
}, []);
/* Render rules:
1. Local dev hosts always — original behaviour.
2. Production: render for aquaos_admin OR an explicitly
whitelisted operator email OR a user who has an
"original_session" stored (i.e. they've assumed and need a
way back). When non-admins log in normally they never see it.
ALWAYS_VISIBLE_EMAILS exists so a platform operator can reach the
switcher even if their JWT temporarily lists them as a non-admin
role (e.g. mid-migration, or when they've explicitly stepped down
to test something). Adding to this list is safer than relaxing
the role check globally.
NOTE: visibility flags computed BEFORE the next useEffect so they
can guard the effect body rather than gating the hook itself —
conditionally calling/skipping a hook violates React's rules-of-
hooks and crashes when impersonation state flips (e.g. hasOriginal
toggles after `Assume role` → next render had different hook count).
Per the 2026-05-15 audit (CRIT-7). */
const ALWAYS_VISIBLE_EMAILS = ['oli@slateinteractives.com'];
const host = typeof window !== 'undefined' ? window.location.hostname : '';
const isLocalDev = /^(localhost|127\.0\.0\.1|0\.0\.0\.0|aquaos\.local)$/i.test(host)
|| /\.local$/i.test(host);
const isPlatformAdmin = me && me.role === 'aquaos_admin';
const myEmail = (me && me.email) ? String(me.email).toLowerCase() : '';
const isAlwaysVisible = !!myEmail && ALWAYS_VISIBLE_EMAILS.includes(myEmail);
const hasOriginal = !!localStorage.getItem(ORIGINAL_KEY);
/* Only render when there's actually a user to switch FROM. Pre-
auth screens (login, SSO redirect, invite acceptance) showed a
"DEV · signed out" chip in the corner with no useful action
behind it — visual noise on a brand surface. Gating on `me`
hides the switcher until after login, which is when role
switching becomes meaningful anyway. */
const shouldRender = !!me && (isLocalDev || isPlatformAdmin || isAlwaysVisible || hasOriginal);
/* Lazy fetch the user list when the panel opens — avoids hitting the
endpoint on every page load. Re-fetched each open so a freshly
added user shows up without a refresh. */
/* Helper — every call here goes through authenticatePreferBearer
on the server, which reads the Authorization header first and
falls back to the cookie. Attaching the Bearer token from
localStorage avoids the "Session expired" branch when the
cookie can't authenticate (Secure-flag mismatch on http://
local dev, SameSite restrictions, etc.). The cookie is still
sent via credentials:'include' as a belt-and-braces fallback. */
function authedFetch(url, opts) {
const token = (typeof localStorage !== 'undefined' && localStorage.getItem(TOKEN_KEY)) || null;
const headers = Object.assign({}, (opts && opts.headers) || {});
if (token && !headers['Authorization']) headers['Authorization'] = 'Bearer ' + token;
return fetch(url, Object.assign({ credentials: 'include' }, opts || {}, { headers }));
}
useEffect(() => {
if (!shouldRender || !open) return;
setUsers(null); setError(null);
authedFetch('/api/auth/impersonable-users')
.then((r) => r.ok ? r.json() : r.json().then((j) => Promise.reject(j)))
.then((d) => setUsers(d.users || []))
.catch((e) => setError(e.error || 'Failed to load users'));
}, [open, shouldRender]);
if (!shouldRender) return null;
async function assumeAs(target) {
setBusy(target.id);
try {
// Stash the original session BEFORE the call so a refresh mid-
// assume doesn't strand us. Don't overwrite if we're already
// impersonating — keep the very first admin session as the anchor.
if (!localStorage.getItem(ORIGINAL_KEY)) {
localStorage.setItem(ORIGINAL_KEY, JSON.stringify({
token: localStorage.getItem(TOKEN_KEY),
user: localStorage.getItem(USER_KEY),
}));
}
const res = await authedFetch('/api/auth/assume', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ user_id: target.id }),
});
if (!res.ok) {
const data = await res.json().catch(() => ({}));
throw new Error(data.error || `${res.status} ${res.statusText}`);
}
const data = await res.json();
Auth.setSession(data.token, data.user);
const hash = window.location.hash || '#dashboard';
window.location.hash = hash;
window.location.reload();
} catch (err) {
// Roll back the stashed original if the assume itself failed —
// otherwise the user gets stuck in a "you're impersonating"
// visual state without actually being impersonated.
try { localStorage.removeItem(ORIGINAL_KEY); } catch (_) {}
window.alert(`Assume role failed: ${err.message}`);
} finally {
setBusy(null);
}
}
async function returnToAdmin() {
const raw = localStorage.getItem(ORIGINAL_KEY);
if (!raw) return;
try {
const orig = JSON.parse(raw);
const origUser = orig.user ? JSON.parse(orig.user) : null;
if (orig.token && origUser) {
// Restore the cookie by hitting /assume on the original admin's
// own user_id — that re-issues the cookie cleanly. Fallback to
// localStorage-only if the call fails (cookie may be stale but
// the UI will recover on next /me check).
const r = await fetch('/api/auth/assume', {
method: 'POST', credentials: 'include',
headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + orig.token },
body: JSON.stringify({ user_id: origUser.id }),
});
if (r.ok) {
const data = await r.json();
Auth.setSession(data.token, data.user);
} else {
// Server didn't accept — restore raw localStorage and let /me
// sort it out. The user will likely need to sign in again.
localStorage.setItem(TOKEN_KEY, orig.token);
localStorage.setItem(USER_KEY, orig.user);
}
}
} catch (_) { /* ignore corrupted stash */ }
localStorage.removeItem(ORIGINAL_KEY);
window.location.reload();
}
/* Closed state — small badge with the current role. */
if (!open) {
return (
);
}
/* Open panel — list of accounts grouped roughly by role. */
return (
Dev role switcher
Currently: {me ? me.email : '—'}
{users === null && (
Loading users…
)}
{error && (
{error}
{error.match(/Platform admin only|403|Forbidden/i) ? '. Sign in as a platform admin to use this.' : ''}