cjw/Oxicloud
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

fix(front): clean localStorage on user change

Browse Source 
- fix issue with selected drive and user logout/login via another user
    (was raising a "404 not found")
    - normalize all localStorage to "oxi-" prefix
    - add a specific frontend/AGENTS.md for frontend part (stop increasing the global AGENTS.md)
This commit is contained in:
Edouard Vanbelle
2026-07-07 20:47:51 +02:00
parent 4fb2acf160
commit 3108fed228
14 changed files with 188 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/i18n/i18n.test.ts
+1 -1
View File
@@ -81,7 +81,7 @@ describe('initI18n — lazy English fallback', () => {
let resolveEn: () => void;
beforeEach(() => {
localStorage.setItem('oxicloud-locale', 'es');
localStorage.setItem('oxi-locale', 'es');
resolveEn = () => {};
globalThis.fetch = vi.fn((input: RequestInfo | URL) => {
const url = String(input);
frontend/src/lib/i18n/index.svelte.ts
+1 -1
View File
@@ -71,7 +71,7 @@ export const LANGUAGES: readonly LanguageMeta[] = [
{ code: 'pl', name: 'Polski', flag: '🇵🇱' }
];
const STORAGE_KEY = 'oxicloud-locale';
const STORAGE_KEY = 'oxi-locale';
/**
* Reflect the active locale on `<html>`: sets `lang` and flips `dir` to `rtl`
frontend/src/lib/stores/files.svelte.ts
+1 -1
View File
@@ -72,7 +72,7 @@ export type Section =
| 'photos'
| 'music';
const VIEW_KEY = 'oxicloud_view_mode';
const VIEW_KEY = 'oxi-view-mode';
function readViewMode(): ViewMode {
if (typeof localStorage === 'undefined') return 'grid';
frontend/src/lib/stores/files.test.ts
+1 -1
View File
@@ -30,7 +30,7 @@ it('shows the owner as "Me" for the current user and a short id otherwise', () =
it('persists the view mode and toggles selection', () => {
files.setViewMode('list');
expect(files.viewMode).toBe('list');
expect(localStorage.getItem('oxicloud_view_mode')).toBe('list');
expect(localStorage.getItem('oxi-view-mode')).toBe('list');
files.setViewMode('grid');
expect(files.viewMode).toBe('grid');
frontend/src/lib/stores/session.svelte.ts
+16 -1
View File
@@ -9,6 +9,7 @@
import { fetchMe, tryRefresh } from '$lib/api/endpoints/auth';
import { drives } from '$lib/stores/drives.svelte';
import type { User } from '$lib/api/types';
import { ensureActiveUser } from '$lib/utils/localStoragePrefs';
class SessionStore {
user = $state<User | null>(null);
@@ -32,7 +33,8 @@ class SessionStore {
if (!me && (await tryRefresh())) {
me = await fetchMe();
}
this.user = me;
if (me) this.setUser(me);
else this.user = null;
} catch {
this.user = null;
}
@@ -40,6 +42,19 @@ class SessionStore {
return this.user;
}
/**
* Set the authenticated user AND run per-user localStorage cleanup
* (see `$lib/utils/localStoragePrefs::ensureActiveUser`). Direct
* `session.user = …` assignments skip the cleanup — always call
* `setUser` on login-flow entry points (form login, OIDC exchange,
* existing-session probe) so a switch-account flow inside the same
* tab observes the wipe.
*/
setUser(user: User): void {
this.user = user;
ensureActiveUser(user.id);
}
/**
* Re-fetch the authenticated user from the server, bypassing the one-shot
* `load()` cache. Call after operations that change server-side user state —
frontend/src/lib/stores/theme.svelte.ts
+19 -9
View File
@@ -1,19 +1,29 @@
/**
* Theme store — light / dark / auto.
*
* Mirrors the established behaviour: persists to the `oxicloud_theme` localStorage
* key and reflects the choice on `<html data-color-scheme>`. `auto` removes the
* attribute so the OS `prefers-color-scheme` takes over. The anti-FOUC inline
* script in app.html applies the stored value before first paint; this store
* owns runtime changes from the UI.
* Persists to the `oxi-theme` localStorage key (part of the normalised
* `oxi-*` prefs namespace — see `$lib/utils/localStoragePrefs`) and
* reflects the choice on `<html data-color-scheme>`. `auto` removes the
* attribute so the OS `prefers-color-scheme` takes over. The anti-FOUC
* inline script in app.html applies the stored value before first paint;
* this store owns runtime changes from the UI.
*/
export type Theme = 'light' | 'dark' | 'auto';
const STORAGE_KEY = 'oxicloud_theme';
/**
* localStorage key holding the active theme.
*
* Exported (not just module-private) because `src/app.html`'s anti-FOUC
* inline script also reads it — that script runs before any JS bundle
* loads, so it can't `import` here. The `app.html` copy is a hardcoded
* string kept in sync by `theme.test.ts::app.html theme key matches
* THEME_STORAGE_KEY`, which fails CI on any drift.
*/
export const THEME_STORAGE_KEY = 'oxi-theme';
function readInitial(): Theme {
if (typeof localStorage === 'undefined') return 'auto';
const v = localStorage.getItem(STORAGE_KEY);
const v = localStorage.getItem(THEME_STORAGE_KEY);
return v === 'light' || v === 'dark' ? v : 'auto';
}
@@ -29,8 +39,8 @@ function apply(theme: Theme): void {
export function setTheme(theme: Theme): void {
store.theme = theme;
if (typeof localStorage !== 'undefined') {
if (theme === 'auto') localStorage.removeItem(STORAGE_KEY);
else localStorage.setItem(STORAGE_KEY, theme);
if (theme === 'auto') localStorage.removeItem(THEME_STORAGE_KEY);
else localStorage.setItem(THEME_STORAGE_KEY, theme);
}
apply(theme);
}
frontend/src/lib/stores/theme.test.ts
+24 -4
View File
@@ -1,5 +1,7 @@
import { readFileSync } from 'node:fs';
import { resolve } from 'node:path';
import { describe, it, expect, beforeEach } from 'vitest';
import { theme, setTheme } from './theme.svelte';
import { theme, setTheme, THEME_STORAGE_KEY } from './theme.svelte';
describe('theme store', () => {
beforeEach(() => {
@@ -9,21 +11,39 @@ describe('theme store', () => {
it('sets light/dark, persists, and reflects on <html>', () => {
setTheme('light');
expect(theme.current).toBe('light');
expect(localStorage.getItem('oxicloud_theme')).toBe('light');
expect(localStorage.getItem(THEME_STORAGE_KEY)).toBe('light');
expect(document.documentElement.getAttribute('data-color-scheme')).toBe('light');
setTheme('dark');
expect(document.documentElement.getAttribute('data-color-scheme')).toBe('dark');
expect(localStorage.getItem('oxicloud_theme')).toBe('dark');
expect(localStorage.getItem(THEME_STORAGE_KEY)).toBe('dark');
});
it('auto clears storage and removes the attribute', () => {
setTheme('dark');
setTheme('auto');
expect(theme.current).toBe('auto');
expect(localStorage.getItem('oxicloud_theme')).toBeNull();
expect(localStorage.getItem(THEME_STORAGE_KEY)).toBeNull();
expect(document.documentElement.hasAttribute('data-color-scheme')).toBe(false);
});
it('theme.set is an alias for setTheme', () => {
theme.set('light');
expect(theme.current).toBe('light');
});
// Drift guard: `src/app.html` inlines an anti-FOUC theme reader that
// reads the SAME localStorage key. Because that script runs before
// any JS bundle loads, it can't `import { THEME_STORAGE_KEY }`;
// the key is hardcoded there. This test reads the file verbatim
// and refuses drift.
it('app.html theme key matches THEME_STORAGE_KEY', () => {
// Resolve against Vitest's cwd (the `frontend/` dir per its
// invocation) — jsdom rewrites `import.meta.url` to `http://…`,
// so file-URL conversion doesn't work in this environment.
const appHtmlPath = resolve('src/app.html');
const html = readFileSync(appHtmlPath, 'utf-8');
expect(
html.includes(`localStorage.getItem('${THEME_STORAGE_KEY}')`),
`app.html must call localStorage.getItem('${THEME_STORAGE_KEY}') — ` +
`update the inline script when THEME_STORAGE_KEY changes.`
).toBe(true);
});
});
frontend/src/lib/utils/localStoragePrefs.ts
+81
View File
@@ -0,0 +1,81 @@
/**
* Local-storage prefs — key convention + user-scoped cleanup.
*
* # Key convention
*
* Every persistent client-side preference lives under the `oxi-` prefix.
* Historical mix of `oxicloud_*`, `oxicloud-*`, and `oxi-*` normalised to
* one form so `wipeAppKeys()` below can sweep the whole set with a single
* `startsWith('oxi-')` predicate.
*
* # Nuke-on-mismatch at login
*
* `ensureActiveUser(userId)` compares the newly-authenticated user id
* against the stored `oxi-active-user-id`. If they differ, EVERY `oxi-*`
* key is removed (except the active-user marker itself). This runs on:
* * first login after page load,
* * "switch account" flows where the current tab silently changes user,
* * session expiry then re-login as someone else.
*
* The wipe is intentionally broad — one naming convention beats maintaining
* a per-key whitelist that decays as new preferences get added.
*
* # Not stored here
*
* Auth tokens and CSRF cookies do NOT use `oxi-*` keys — they live in
* HTTP-only cookies set by the backend and are outside localStorage.
* Nothing to wipe there.
*/
/** Marker key: which user's prefs currently live in localStorage. */
const ACTIVE_USER_KEY = 'oxi-active-user-id';
/** Every persistent client pref key must start with this. */
const OXI_PREFIX = 'oxi-';
/**
* Remove every `oxi-*` key from localStorage EXCEPT the active-user marker.
* Idempotent; no-op when localStorage is unavailable (SSR, private mode).
*/
export function wipeAppKeys(): void {
if (typeof localStorage === 'undefined') return;
// Materialise the key list first — mutating localStorage while iterating
// its live view skips half the entries.
const keys = Object.keys(localStorage);
for (const key of keys) {
if (key === ACTIVE_USER_KEY) continue;
if (key.startsWith(OXI_PREFIX)) {
try {
localStorage.removeItem(key);
} catch {
/* private mode / quota — best-effort cleanup */
}
}
}
}
/**
* Ensure any localStorage state belongs to `userId`. When the marker
* doesn't match — first login of the page, re-login as someone else,
* or a fossil from a previous release with no marker — the whole app
* key namespace is nuked and the marker is set to the current user.
*
* Call once, right after the session store observes an authenticated
* user. Cheap when no work is needed (single `getItem`).
*/
export function ensureActiveUser(userId: string): void {
if (typeof localStorage === 'undefined') return;
let stored: string | null = null;
try {
stored = localStorage.getItem(ACTIVE_USER_KEY);
} catch {
/* private mode — treat as "no marker" so we do the cleanup pass */
}
if (stored === userId) return;
wipeAppKeys();
try {
localStorage.setItem(ACTIVE_USER_KEY, userId);
} catch {
/* private mode — cleanup still ran, marker will re-attempt next login */
}
}