@shellui/core 0.2.0 → 0.3.0-beta.1

package/src/features/settings/SettingsProvider.tsx

@@ -4,225 +4,85 @@ import {
   shellui,
   type ShellUIMessage,
   type Settings,
-  type SettingsNavigationItem,
   type Appearance,
-  type SettingsAvailableTheme,
 } from '@shellui/sdk';
 import { SettingsContext } from './SettingsContext';
 import { useConfig } from '../config/useConfig';
-import { useTranslation } from 'react-i18next';
-import type { NavigationItem, NavigationGroup, ShellUIConfig } from '../config/types';
-import { getTheme, getAllThemes, registerTheme } from '../theme/themes';
+import type { NavigationItem } from '../config/types';
+import { useAuth } from '../auth/hooks/useAuth';
+import { defaultTheme } from '../theme/themes';
+import {
+  buildSettingsForPropagation,
+  getBrowserTimezone,
+  getPreferenceSnapshot,
+  isSameUser,
+  mergePreferencesIntoSettings,
+  toSettingsUser,
+} from './utils';
 
 const logger = getLogger('shellcore');
 
-function flattenNavigationItems(
-  navigation: (NavigationItem | NavigationGroup)[],
-): NavigationItem[] {
-  if (navigation.length === 0) return [];
-  return navigation.flatMap((item) => {
-    if ('title' in item && 'items' in item) return (item as NavigationGroup).items;
-    return [item as NavigationItem];
-  });
-}
-
-function resolveLabel(
-  value: string | { en: string; fr: string; [key: string]: string },
-  lang: string,
-): string {
-  if (typeof value === 'string') return value;
-  return value[lang] || value.en || value.fr || Object.values(value)[0] || '';
-}
-
-function resolveColorMode(colorScheme: 'light' | 'dark' | 'system'): 'light' | 'dark' {
-  if (colorScheme === 'system' && typeof window !== 'undefined') {
-    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+const STORAGE_KEY = 'shellui:settings';
+const AUTH_SESSION_STORAGE_KEY = 'shellui.auth.session';
+const AUTH_LAST_USED_LOGIN_STORAGE_KEY = 'shellui.auth.last_used_login';
+
+const toAbsoluteUrl = (url: string): URL | null => {
+  try {
+    return new URL(
+      url,
+      typeof window !== 'undefined' ? window.location.origin : 'http://localhost',
+    );
+  } catch {
+    return null;
   }
-  return colorScheme === 'dark' ? 'dark' : 'light';
-}
+};
 
-/** Convert font file URLs to absolute so iframes/modals on other ports or domains can load them. */
-function toAbsoluteFontUrls(urls: string[]): string[] {
-  if (typeof window === 'undefined') return urls;
-  const origin = window.location.origin;
-  return urls.map((url) => {
-    const trimmed = url.trim();
-    if (trimmed.startsWith('http://') || trimmed.startsWith('https://')) {
-      return trimmed;
-    }
-    const path = trimmed.startsWith('/') ? trimmed : `/${trimmed}`;
-    return `${origin}${path}`;
-  });
-}
+const normalizePath = (value: string): string => {
+  const trimmed = value.trim();
+  if (!trimmed) return '/';
+  const withoutTrailing = trimmed.replace(/\/+$/, '');
+  return withoutTrailing || '/';
+};
 
-/**
- * Build the full appearance object for settings propagation so apps receive all theme
- * variable values and can style without knowing the theme name.
- */
-function getResolvedAppearanceForSettings(
-  settings: Settings,
-  config: ShellUIConfig | undefined,
-): Appearance | undefined {
-  if (typeof window === 'undefined') return undefined;
-  config?.themes?.forEach(registerTheme);
-  const themeName = settings.appearance?.name || config?.defaultTheme || 'default';
-  const themeDef = getTheme(themeName) || getTheme('default');
-  if (!themeDef) return undefined;
-  const colorScheme = settings.appearance?.colorScheme ?? 'system';
-  const mode = resolveColorMode(colorScheme);
-  return {
-    name: themeDef.name,
-    displayName: themeDef.displayName,
-    mode,
-    colorScheme,
-    colors: themeDef.colors,
-    ...(themeDef.fontFamily !== undefined && { fontFamily: themeDef.fontFamily }),
-    ...(themeDef.bodyFontFamily !== undefined && {
-      bodyFontFamily: themeDef.bodyFontFamily,
-    }),
-    ...(themeDef.headingFontFamily !== undefined && {
-      headingFontFamily: themeDef.headingFontFamily,
-    }),
-    ...(themeDef.letterSpacing !== undefined && {
-      letterSpacing: themeDef.letterSpacing,
-    }),
-    ...(themeDef.textShadow !== undefined && { textShadow: themeDef.textShadow }),
-    ...(themeDef.lineHeight !== undefined && { lineHeight: themeDef.lineHeight }),
-    ...(themeDef.fontFiles !== undefined &&
-      themeDef.fontFiles.length > 0 && {
-        fontFiles: toAbsoluteFontUrls(themeDef.fontFiles),
-      }),
-  };
-}
+const normalizeHashPath = (value: string): string => {
+  const hash = value.replace(/^#\/?/, '').replace(/\/+$/, '');
+  return hash;
+};
 
-/**
- * Map registered themes to the slim shape sent to sub-apps (name, displayName, colors, optional typography for preview).
- */
-function getAvailableThemesForSettings(): SettingsAvailableTheme[] {
-  return getAllThemes().map((theme) => ({
-    name: theme.name,
-    displayName: theme.displayName,
-    colors: theme.colors,
-    ...(theme.fontFamily !== undefined && { fontFamily: theme.fontFamily }),
-    ...(theme.letterSpacing !== undefined && { letterSpacing: theme.letterSpacing }),
-    ...(theme.textShadow !== undefined && { textShadow: theme.textShadow }),
-  }));
-}
+const isFrameForNavigationItem = (frameSrc: string, itemUrl: string): boolean => {
+  const frame = toAbsoluteUrl(frameSrc);
+  const item = toAbsoluteUrl(itemUrl);
+  if (!frame || !item) return false;
+  if (frame.origin !== item.origin) return false;
 
-/**
- * Build settings for propagation to iframes: inject navigation, full theme object,
- * and list of available themes so apps can render theme pickers.
- */
-function buildSettingsForPropagation(
-  settings: Settings,
-  config: ShellUIConfig | undefined,
-  lang: string,
-): Settings {
-  const appearance = getResolvedAppearanceForSettings(settings, config);
-  let result: Settings = {
-    ...settings,
-    appearance: appearance ?? settings.appearance,
-  };
-  // Inject available themes when we have a resolved appearance (themes are already registered above)
-  if (result.appearance && typeof window !== 'undefined') {
-    result = {
-      ...result,
-      appearance: {
-        ...result.appearance,
-        availableThemes: getAvailableThemesForSettings(),
-      },
-    };
+  const itemPathname = normalizePath(item.pathname);
+  const framePathname = normalizePath(frame.pathname);
+  if (framePathname !== itemPathname && !framePathname.startsWith(`${itemPathname}/`)) {
+    return false;
   }
-  if (config?.navigation?.length) {
-    const items: SettingsNavigationItem[] = flattenNavigationItems(config.navigation).map(
-      (item) => ({
-        path: item.path,
-        url: item.url,
-        label: resolveLabel(item.label, lang),
-      }),
-    );
-    result = { ...result, navigation: { items } };
+
+  const itemHashPath = normalizeHashPath(item.hash);
+  if (!itemHashPath) {
+    return true;
   }
-  return result;
-}
 
-const STORAGE_KEY = 'shellui:settings';
+  const frameHashPath = normalizeHashPath(frame.hash);
+  return frameHashPath === itemHashPath || frameHashPath.startsWith(`${itemHashPath}/`);
+};
 
-// Get browser's timezone as default
-const getBrowserTimezone = (): string => {
-  if (typeof window !== 'undefined' && Intl) {
-    return Intl.DateTimeFormat().resolvedOptions().timeZone;
-  }
-  return 'UTC';
+const stripSensitiveUserFields = (settings: Settings): Settings => {
+  return {
+    ...settings,
+    accessToken: null,
+  };
 };
 
 const defaultAppearance: Appearance = {
-  name: 'default',
-  displayName: 'Default',
+  name: defaultTheme.name,
+  displayName: defaultTheme.displayName,
   mode: 'light',
   colorScheme: 'system',
-  colors: {
-    light: {
-      background: '#ffffff',
-      foreground: '#09090b',
-      card: '#ffffff',
-      cardForeground: '#09090b',
-      popover: '#ffffff',
-      popoverForeground: '#09090b',
-      primary: '#18181b',
-      primaryForeground: '#fafafa',
-      secondary: '#f4f4f5',
-      secondaryForeground: '#18181b',
-      muted: '#f4f4f5',
-      mutedForeground: '#71717a',
-      accent: '#f4f4f5',
-      accentForeground: '#18181b',
-      destructive: '#ef4444',
-      destructiveForeground: '#fafafa',
-      border: '#e4e4e7',
-      input: '#e4e4e7',
-      ring: '#18181b',
-      radius: '0.5rem',
-      sidebarBackground: '#fafafa',
-      sidebarForeground: '#09090b',
-      sidebarPrimary: '#18181b',
-      sidebarPrimaryForeground: '#fafafa',
-      sidebarAccent: '#e4e4e7',
-      sidebarAccentForeground: '#18181b',
-      sidebarBorder: '#e4e4e7',
-      sidebarRing: '#18181b',
-    },
-    dark: {
-      background: '#09090b',
-      foreground: '#fafafa',
-      card: '#09090b',
-      cardForeground: '#fafafa',
-      popover: '#09090b',
-      popoverForeground: '#fafafa',
-      primary: '#fafafa',
-      primaryForeground: '#18181b',
-      secondary: '#27272a',
-      secondaryForeground: '#fafafa',
-      muted: '#27272a',
-      mutedForeground: '#a1a1aa',
-      accent: '#27272a',
-      accentForeground: '#fafafa',
-      destructive: '#7f1d1d',
-      destructiveForeground: '#fafafa',
-      border: '#27272a',
-      input: '#27272a',
-      ring: '#d4d4d8',
-      radius: '0.5rem',
-      sidebarBackground: '#09090b',
-      sidebarForeground: '#fafafa',
-      sidebarPrimary: '#fafafa',
-      sidebarPrimaryForeground: '#18181b',
-      sidebarAccent: '#27272a',
-      sidebarAccentForeground: '#fafafa',
-      sidebarBorder: '#27272a',
-      sidebarRing: '#d4d4d8',
-    },
-  },
+  colors: defaultTheme.colors,
 };
 
 const defaultSettings: Settings = {
@@ -252,11 +112,15 @@ const defaultSettings: Settings = {
   serviceWorker: {
     enabled: true,
   },
+  user: null,
+  accessToken: null,
 };
 
 export function SettingsProvider({ children }: { children: ReactNode }) {
   const { config } = useConfig();
-  const { i18n } = useTranslation();
+  const { user: authUser, session, syncUserPreferences, loadUserPreferences, logout } = useAuth();
+  const lastSyncedPreferencesRef = useRef<string | null>(null);
+  const loadingPreferencesRef = useRef(false);
   // Use a ref to always have current settings for message listeners (avoids closure issues)
   const settingsRef = useRef<Settings | null>(null);
   const [settings, setSettings] = useState<Settings>(() => {
@@ -318,6 +182,8 @@ export function SettingsProvider({ children }: { children: ReactNode }) {
               // Migrate from legacy "caching" key if present
               enabled: parsed.serviceWorker?.enabled ?? parsed.caching?.enabled ?? true,
             },
+            user: parsed.user ?? null,
+            accessToken: null,
           };
           settingsRef.current = initialSettings;
           return initialSettings;
@@ -330,11 +196,190 @@ export function SettingsProvider({ children }: { children: ReactNode }) {
     return defaultSettings;
   });
 
+  const navigationItems = useMemo<NavigationItem[]>(
+    () =>
+      config?.navigation?.flatMap((item) =>
+        'title' in item && 'items' in item ? item.items : [item],
+      ) ?? [],
+    [config?.navigation],
+  );
+
+  const isTrustedFrameForAuthToken = useCallback(
+    (frameSrc: string): boolean => {
+      const adminUrl = config?.backend?.adminUrl?.trim();
+      if (adminUrl && isFrameForNavigationItem(frameSrc, adminUrl)) {
+        return true;
+      }
+      return navigationItems.some(
+        (item) => item.safeForAuthToken !== false && isFrameForNavigationItem(frameSrc, item.url),
+      );
+    },
+    [config?.backend?.adminUrl, navigationItems],
+  );
+
+  const propagateSettingsToIframes = useCallback(
+    (baseSettings: Settings) => {
+      const iframes = shellui.frameRegistry.getAllIframes();
+      if (iframes.length === 0) return;
+      const lang = baseSettings.language?.code || 'en';
+      for (const [uuid, iframe] of iframes) {
+        const frameSrc = iframe?.src ?? '';
+        const includeAuthAccessToken = isTrustedFrameForAuthToken(frameSrc);
+        const settingsToPropagate = buildSettingsForPropagation(baseSettings, config, lang, {
+          includeAuthAccessToken,
+          accessToken: session?.accessToken ?? null,
+        });
+        shellui.sendMessage({
+          type: 'SHELLUI_SETTINGS',
+          payload: { settings: settingsToPropagate },
+          to: [uuid],
+        });
+      }
+    },
+    [config, isTrustedFrameForAuthToken, session?.accessToken],
+  );
+
+  // When the shell rotates the JWT, `authUser` often does not change, so the user-sync effect
+  // above skips — still push `SHELLUI_SETTINGS` so trusted iframes get the new `accessToken`.
+  const accessTokenForChildren = session?.accessToken ?? null;
+  useEffect(() => {
+    if (typeof window === 'undefined' || window.parent !== window || !accessTokenForChildren) {
+      return;
+    }
+    propagateSettingsToIframes(settingsRef.current ?? defaultSettings);
+  }, [accessTokenForChildren, propagateSettingsToIframes]);
+
+  // Keep load/sync helpers stable across access-token rotation (refresh after preference sync).
+  const loadUserPreferencesRef = useRef(loadUserPreferences);
+  loadUserPreferencesRef.current = loadUserPreferences;
+  const syncUserPreferencesRef = useRef(syncUserPreferences);
+  syncUserPreferencesRef.current = syncUserPreferences;
+  const propagateSettingsToIframesRef = useRef(propagateSettingsToIframes);
+  propagateSettingsToIframesRef.current = propagateSettingsToIframes;
+
   // Keep ref in sync with state for message listeners
   useEffect(() => {
     settingsRef.current = settings;
   }, [settings]);
 
+  // Serialize so effect does not re-run on every new session object / rotated access_token.
+  const sessionUserPreferencesKey = JSON.stringify(session?.userPreferences ?? null);
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || window.parent !== window || !session?.accessToken) {
+      return;
+    }
+
+    let cancelled = false;
+    loadingPreferencesRef.current = true;
+
+    const loadPreferences = async () => {
+      try {
+        const tokenPreferences = session?.userPreferences ?? null;
+        if (tokenPreferences) {
+          const currentSettings = settingsRef.current ?? defaultSettings;
+          const mergedSettings = mergePreferencesIntoSettings(currentSettings, tokenPreferences);
+          const signature = JSON.stringify(getPreferenceSnapshot(mergedSettings));
+          const prevSignature = JSON.stringify(getPreferenceSnapshot(currentSettings));
+          lastSyncedPreferencesRef.current = signature;
+          if (signature === prevSignature) {
+            logger.info('JWT app preferences match current settings; skipping state update', {
+              preferences: getPreferenceSnapshot(mergedSettings),
+            });
+            return;
+          }
+          settingsRef.current = mergedSettings;
+          setSettings(mergedSettings);
+          localStorage.setItem(STORAGE_KEY, JSON.stringify(mergedSettings));
+          propagateSettingsToIframesRef.current(mergedSettings);
+          logger.info('Loaded app preferences from JWT metadata', {
+            preferences: getPreferenceSnapshot(mergedSettings),
+          });
+          return;
+        }
+
+        const preferences = await loadUserPreferencesRef.current();
+
+        if (cancelled) return;
+
+        if (!preferences) {
+          const currentSettings = settingsRef.current ?? defaultSettings;
+          const currentPreferences = getPreferenceSnapshot(currentSettings);
+          const signature = JSON.stringify(currentPreferences);
+          try {
+            await syncUserPreferencesRef.current(currentPreferences);
+            if (cancelled) return;
+            lastSyncedPreferencesRef.current = signature;
+            logger.info('No auth provider preferences found; seeded with current app preferences', {
+              preferences: currentPreferences,
+            });
+          } catch (error) {
+            if (!cancelled) {
+              logger.error('Failed to seed auth provider preferences from current app settings', {
+                error,
+              });
+            }
+          }
+          return;
+        }
+
+        const currentSettings = settingsRef.current ?? defaultSettings;
+        const mergedSettings = mergePreferencesIntoSettings(currentSettings, preferences);
+        const signature = JSON.stringify(getPreferenceSnapshot(mergedSettings));
+        const prevSignature = JSON.stringify(getPreferenceSnapshot(currentSettings));
+        lastSyncedPreferencesRef.current = signature;
+        if (signature === prevSignature) {
+          logger.info('Auth provider preferences match current settings; skipping state update', {
+            preferences: getPreferenceSnapshot(mergedSettings),
+          });
+          return;
+        }
+        settingsRef.current = mergedSettings;
+        setSettings(mergedSettings);
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(mergedSettings));
+
+        propagateSettingsToIframesRef.current(mergedSettings);
+
+        logger.info('Loaded app preferences from auth provider metadata', {
+          preferences: getPreferenceSnapshot(mergedSettings),
+        });
+      } catch (error) {
+        logger.error('Failed to load app preferences from auth provider metadata', { error });
+      } finally {
+        loadingPreferencesRef.current = false;
+      }
+    };
+
+    void loadPreferences();
+    return () => {
+      cancelled = true;
+      loadingPreferencesRef.current = false;
+    };
+  }, [session?.userId, sessionUserPreferencesKey]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || window.parent !== window) {
+      return;
+    }
+
+    const currentSettings = settingsRef.current ?? defaultSettings;
+    const nextUser = toSettingsUser(authUser);
+    if (isSameUser(currentSettings.user, nextUser)) {
+      return;
+    }
+
+    const nextSettings = { ...currentSettings, user: nextUser };
+    settingsRef.current = nextSettings;
+    setSettings(nextSettings);
+
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(nextSettings));
+      propagateSettingsToIframes(nextSettings);
+    } catch (error) {
+      logger.error('Failed to sync auth user into settings:', { error });
+    }
+  }, [authUser, config]);
+
   // Listen for settings updates from parent/other nodes
   useEffect(() => {
     if (typeof window === 'undefined') {
@@ -347,22 +392,18 @@ export function SettingsProvider({ children }: { children: ReactNode }) {
         const payload = message.payload as { settings: Settings };
         const newSettings = payload.settings;
         if (newSettings) {
+          const shouldStripSensitiveFields = window.parent === window;
+          const nextSettings = shouldStripSensitiveFields
+            ? stripSensitiveUserFields(newSettings)
+            : newSettings;
           // Update localStorage with new settings value
-          setSettings(newSettings);
+          settingsRef.current = nextSettings;
+          setSettings(nextSettings);
           if (window.parent === window) {
             try {
-              localStorage.setItem(STORAGE_KEY, JSON.stringify(newSettings));
-              // Confirm: root updated localStorage; re-inject navigation when propagating
-              const settingsToPropagate = buildSettingsForPropagation(
-                newSettings,
-                config,
-                i18n.language || 'en',
-              );
+              localStorage.setItem(STORAGE_KEY, JSON.stringify(nextSettings));
               logger.info('Root Parent received settings update', { message });
-              shellui.propagateMessage({
-                type: 'SHELLUI_SETTINGS',
-                payload: { settings: settingsToPropagate },
-              });
+              propagateSettingsToIframes(nextSettings);
             } catch (error) {
               logger.error('Failed to update settings from message:', { error });
             }
@@ -373,18 +414,35 @@ export function SettingsProvider({ children }: { children: ReactNode }) {
 
     const cleanupSettingsRequested = shellui.addMessageListener(
       'SHELLUI_SETTINGS_REQUESTED',
-      () => {
+      (message: ShellUIMessage) => {
         // Use ref to always get current settings (avoids stale closure)
         const currentSettings = settingsRef.current ?? defaultSettings;
-        const settingsWithNav = buildSettingsForPropagation(
-          currentSettings,
-          config,
-          i18n.language || 'en',
-        );
-        shellui.propagateMessage({
-          type: 'SHELLUI_SETTINGS',
-          payload: { settings: settingsWithNav },
-        });
+        const requestingPath = (message.from ?? []).filter(Boolean);
+
+        if (requestingPath.length > 0) {
+          const [firstHopIframeUuid] = requestingPath;
+          const frame = shellui.frameRegistry
+            .getAllIframes()
+            .find(([uuid]) => uuid === firstHopIframeUuid)?.[1];
+          const lang = currentSettings.language?.code || 'en';
+          const includeAuthAccessToken = frame
+            ? isTrustedFrameForAuthToken(frame.src ?? '')
+            : false;
+          const settingsToPropagate = buildSettingsForPropagation(currentSettings, config, lang, {
+            includeAuthAccessToken,
+            accessToken: session?.accessToken ?? null,
+          });
+
+          // Route through the full parent -> child -> ... -> requester path so deep descendants
+          // receive settings even when they are nested more than one level under root.
+          shellui.sendMessage({
+            type: 'SHELLUI_SETTINGS',
+            payload: { settings: settingsToPropagate },
+            to: requestingPath,
+          });
+          return;
+        }
+        propagateSettingsToIframes(currentSettings);
       },
     );
 
@@ -395,7 +453,17 @@ export function SettingsProvider({ children }: { children: ReactNode }) {
         const payload = message.payload as { settings: Settings };
         const newSettings = payload.settings;
         if (newSettings) {
-          setSettings(newSettings);
+          const shouldStripSensitiveFields = window.parent === window;
+          const nextSettings = shouldStripSensitiveFields
+            ? stripSensitiveUserFields(newSettings)
+            : newSettings;
+          settingsRef.current = nextSettings;
+          setSettings(nextSettings);
+
+          // Forward settings down the iframe tree so deep descendants also update.
+          if (window.parent !== window) {
+            propagateSettingsToIframes(nextSettings);
+          }
         }
       },
     );
@@ -405,40 +473,72 @@ export function SettingsProvider({ children }: { children: ReactNode }) {
       cleanupSettings();
       cleanupSettingsRequested();
     };
-  }, [settings, config?.navigation, i18n.language]);
+  }, [config, isTrustedFrameForAuthToken, propagateSettingsToIframes, session?.accessToken]);
+
+  useEffect(() => {
+    if (
+      typeof window === 'undefined' ||
+      window.parent !== window ||
+      loadingPreferencesRef.current
+    ) {
+      return;
+    }
+
+    const preferences = getPreferenceSnapshot(settings);
+    const signature = JSON.stringify(preferences);
+    if (signature === lastSyncedPreferencesRef.current) {
+      return;
+    }
+
+    let cancelled = false;
+
+    const syncPreferences = async () => {
+      try {
+        await syncUserPreferencesRef.current(preferences);
+        if (cancelled) return;
+        lastSyncedPreferencesRef.current = signature;
+        logger.info('Synced app preferences to auth provider metadata', { preferences });
+      } catch (error) {
+        logger.error('Failed to sync app preferences to auth provider metadata', { error });
+      }
+    };
+
+    void syncPreferences();
+    return () => {
+      cancelled = true;
+    };
+  }, [settings]);
 
   // ACTIONS
   const updateSettings = useCallback(
     (updates: Partial<Settings>) => {
-      const newSettings = { ...settings, ...updates };
+      const nextSettings = { ...settings, ...updates };
 
       // Update localStorage and propagate to children if we're in the root window
       if (typeof window !== 'undefined' && window.parent === window) {
         try {
+          const newSettings = stripSensitiveUserFields(nextSettings);
           localStorage.setItem(STORAGE_KEY, JSON.stringify(newSettings));
+          settingsRef.current = newSettings;
           setSettings(newSettings);
           // Propagate to child iframes (sendMessageToParent does nothing in root)
-          const settingsWithNav = buildSettingsForPropagation(
-            newSettings,
-            config,
-            i18n.language || 'en',
-          );
-          shellui.propagateMessage({
-            type: 'SHELLUI_SETTINGS',
-            payload: { settings: settingsWithNav },
-          });
+          propagateSettingsToIframes(newSettings);
         } catch (error) {
           logger.error('Failed to update settings in localStorage:', { error });
         }
       }
+      if (typeof window !== 'undefined' && window.parent !== window) {
+        settingsRef.current = nextSettings;
+        setSettings(nextSettings);
+      }
 
       // For child iframes, send to parent (parent will propagate to siblings)
       shellui.sendMessageToParent({
         type: 'SHELLUI_SETTINGS_UPDATED',
-        payload: { settings: newSettings },
+        payload: { settings: stripSensitiveUserFields(nextSettings) },
       });
     },
-    [settings, config?.navigation, i18n.language],
+    [settings, propagateSettingsToIframes],
   );
 
   const updateSetting = useCallback(
@@ -458,8 +558,13 @@ export function SettingsProvider({ children }: { children: ReactNode }) {
     // Clear all localStorage data
     if (typeof window !== 'undefined') {
       try {
+        // Force logout so in-memory auth state is also reset.
+        void logout();
+
         // Clear settings
         localStorage.removeItem(STORAGE_KEY);
+        localStorage.removeItem(AUTH_SESSION_STORAGE_KEY);
+        localStorage.removeItem(AUTH_LAST_USED_LOGIN_STORAGE_KEY);
 
         // Clear all other localStorage items that start with shellui:
         const keysToRemove: string[] = [];
@@ -473,20 +578,13 @@ export function SettingsProvider({ children }: { children: ReactNode }) {
 
         // Reset settings to defaults
         const newSettings = defaultSettings;
+        settingsRef.current = newSettings;
         setSettings(newSettings);
 
         // If we're in the root window, update localStorage with defaults
         if (window.parent === window) {
           localStorage.setItem(STORAGE_KEY, JSON.stringify(newSettings));
-          const settingsToPropagate = buildSettingsForPropagation(
-            newSettings,
-            config,
-            i18n.language || 'en',
-          );
-          shellui.propagateMessage({
-            type: 'SHELLUI_SETTINGS',
-            payload: { settings: settingsToPropagate },
-          });
+          propagateSettingsToIframes(newSettings);
         }
 
         // Notify parent about reset
@@ -494,13 +592,17 @@ export function SettingsProvider({ children }: { children: ReactNode }) {
           type: 'SHELLUI_SETTINGS_UPDATED',
           payload: { settings: newSettings },
         });
+        shellui.sendMessageToParent({
+          type: 'SHELLUI_LOGOUT',
+          payload: {},
+        });
 
         logger.info('All app data has been reset');
       } catch (error) {
         logger.error('Failed to reset all data:', { error });
       }
     }
-  }, [config?.navigation, i18n.language]);
+  }, [logout, propagateSettingsToIframes]);
 
   const value = useMemo(
     () => ({