@oxyhq/services 5.2.2 → 5.2.4

package/src/ui/context/SecureOxyContext.tsx

@@ -0,0 +1,473 @@
+import React, { createContext, useContext, useState, useEffect, useCallback, ReactNode, useMemo } from 'react';
+import { OxyServices } from '../../core';
+import { User } from '../../models/interfaces';
+import { SecureLoginResponse, SecureClientSession, MinimalUserData } from '../../models/secureSession';
+
+// Define the secure context shape
+export interface SecureOxyContextState {
+  // Authentication state
+  user: User | null; // Current active user (loaded from server)
+  minimalUser: MinimalUserData | null; // Minimal user data for UI
+  sessions: SecureClientSession[]; // All active sessions
+  activeSessionId: string | null;
+  isAuthenticated: boolean;
+  isLoading: boolean;
+  error: string | null;
+
+  // Auth methods
+  secureLogin: (username: string, password: string, deviceName?: string) => Promise<User>;
+  logout: (targetSessionId?: string) => Promise<void>;
+  logoutAll: () => Promise<void>;
+  signUp: (username: string, email: string, password: string) => Promise<User>;
+
+  // Multi-session methods
+  switchSession: (sessionId: string) => Promise<void>;
+  removeSession: (sessionId: string) => Promise<void>;
+  refreshSessions: () => Promise<void>;
+
+  // Access to services
+  oxyServices: OxyServices;
+  bottomSheetRef?: React.RefObject<any>;
+
+  // Methods to directly control the bottom sheet
+  showBottomSheet?: (screenOrConfig?: string | { screen: string; props?: Record<string, any> }) => void;
+  hideBottomSheet?: () => void;
+}
+
+// Create the context with default values
+const SecureOxyContext = createContext<SecureOxyContextState | null>(null);
+
+// Props for the SecureOxyContextProvider
+export interface SecureOxyContextProviderProps {
+  children: ReactNode;
+  oxyServices: OxyServices;
+  storageKeyPrefix?: string;
+  onAuthStateChange?: (user: User | null) => void;
+  bottomSheetRef?: React.RefObject<any>;
+}
+
+// Platform storage implementation
+interface StorageInterface {
+  getItem: (key: string) => Promise<string | null>;
+  setItem: (key: string, value: string) => Promise<void>;
+  removeItem: (key: string) => Promise<void>;
+  clear: () => Promise<void>;
+}
+
+// Web localStorage implementation
+class WebStorage implements StorageInterface {
+  async getItem(key: string): Promise<string | null> {
+    return localStorage.getItem(key);
+  }
+
+  async setItem(key: string, value: string): Promise<void> {
+    localStorage.setItem(key, value);
+  }
+
+  async removeItem(key: string): Promise<void> {
+    localStorage.removeItem(key);
+  }
+
+  async clear(): Promise<void> {
+    localStorage.clear();
+  }
+}
+
+// React Native AsyncStorage implementation
+let AsyncStorage: StorageInterface;
+
+// Determine the platform and set up storage
+const isReactNative = (): boolean => {
+  return typeof navigator !== 'undefined' && navigator.product === 'ReactNative';
+};
+
+// Get appropriate storage for the platform
+const getStorage = async (): Promise<StorageInterface> => {
+  if (isReactNative()) {
+    if (!AsyncStorage) {
+      try {
+        const asyncStorageModule = await import('@react-native-async-storage/async-storage');
+        AsyncStorage = asyncStorageModule.default;
+      } catch (error) {
+        console.error('Failed to import AsyncStorage:', error);
+        throw new Error('AsyncStorage is required in React Native environment');
+      }
+    }
+    return AsyncStorage;
+  }
+
+  return new WebStorage();
+};
+
+// Storage keys for secure sessions
+const getSecureStorageKeys = (prefix = 'oxy_secure') => ({
+  sessions: `${prefix}_sessions`, // Array of SecureClientSession objects
+  activeSessionId: `${prefix}_active_session_id`, // ID of currently active session
+});
+
+export const SecureOxyContextProvider: React.FC<SecureOxyContextProviderProps> = ({
+  children,
+  oxyServices,
+  storageKeyPrefix = 'oxy_secure',
+  onAuthStateChange,
+  bottomSheetRef,
+}) => {
+  // Authentication state
+  const [user, setUser] = useState<User | null>(null);
+  const [minimalUser, setMinimalUser] = useState<MinimalUserData | null>(null);
+  const [sessions, setSessions] = useState<SecureClientSession[]>([]);
+  const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [storage, setStorage] = useState<StorageInterface | null>(null);
+
+  // Storage keys (memoized to prevent infinite loops)
+  const keys = useMemo(() => getSecureStorageKeys(storageKeyPrefix), [storageKeyPrefix]);
+
+  // Initialize storage
+  useEffect(() => {
+    const initStorage = async () => {
+      try {
+        const platformStorage = await getStorage();
+        setStorage(platformStorage);
+      } catch (error) {
+        console.error('Failed to initialize storage:', error);
+        setError('Failed to initialize storage');
+      }
+    };
+
+    initStorage();
+  }, []);
+
+  // Effect to initialize authentication state
+  useEffect(() => {
+    const initAuth = async () => {
+      if (!storage) return;
+
+      setIsLoading(true);
+      try {
+        // Load stored sessions
+        const sessionsData = await storage.getItem(keys.sessions);
+        const storedActiveSessionId = await storage.getItem(keys.activeSessionId);
+
+        console.log('SecureAuth - sessionsData:', sessionsData);
+        console.log('SecureAuth - activeSessionId:', storedActiveSessionId);
+
+        if (sessionsData) {
+          const parsedSessions: SecureClientSession[] = JSON.parse(sessionsData);
+          setSessions(parsedSessions);
+
+          if (storedActiveSessionId && parsedSessions.length > 0) {
+            const activeSession = parsedSessions.find(s => s.sessionId === storedActiveSessionId);
+            
+            if (activeSession) {
+              console.log('SecureAuth - activeSession found:', activeSession);
+              
+              // Validate session
+              try {
+                const validation = await oxyServices.validateSession(activeSession.sessionId);
+                
+                if (validation.valid) {
+                  console.log('SecureAuth - session validated successfully');
+                  setActiveSessionId(activeSession.sessionId);
+                  
+                  // Get access token for API calls
+                  await oxyServices.getTokenBySession(activeSession.sessionId);
+                  
+                  // Load full user data
+                  const fullUser = await oxyServices.getUserBySession(activeSession.sessionId);
+                  setUser(fullUser);
+                  setMinimalUser({
+                    id: fullUser.id,
+                    username: fullUser.username,
+                    avatar: fullUser.avatar
+                  });
+                  
+                  if (onAuthStateChange) {
+                    onAuthStateChange(fullUser);
+                  }
+                } else {
+                  console.log('SecureAuth - session invalid, removing');
+                  await removeInvalidSession(activeSession.sessionId);
+                }
+              } catch (error) {
+                console.error('SecureAuth - session validation error:', error);
+                await removeInvalidSession(activeSession.sessionId);
+              }
+            }
+          }
+        }
+      } catch (err) {
+        console.error('Secure auth initialization error:', err);
+        await clearAllStorage();
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    if (storage) {
+      initAuth();
+    }
+  }, [storage, oxyServices, keys, onAuthStateChange]);
+
+  // Remove invalid session
+  const removeInvalidSession = useCallback(async (sessionId: string): Promise<void> => {
+    const filteredSessions = sessions.filter(s => s.sessionId !== sessionId);
+    setSessions(filteredSessions);
+    await saveSessionsToStorage(filteredSessions);
+    
+    // If there are other sessions, switch to the first one
+    if (filteredSessions.length > 0) {
+      await switchToSession(filteredSessions[0].sessionId);
+    } else {
+      // No valid sessions left
+      setActiveSessionId(null);
+      setUser(null);
+      setMinimalUser(null);
+      await storage?.removeItem(keys.activeSessionId);
+      
+      if (onAuthStateChange) {
+        onAuthStateChange(null);
+      }
+    }
+  }, [sessions, storage, keys, onAuthStateChange]);
+
+  // Save sessions to storage
+  const saveSessionsToStorage = useCallback(async (sessionsList: SecureClientSession[]): Promise<void> => {
+    if (!storage) return;
+    await storage.setItem(keys.sessions, JSON.stringify(sessionsList));
+  }, [storage, keys.sessions]);
+
+  // Save active session ID to storage
+  const saveActiveSessionId = useCallback(async (sessionId: string): Promise<void> => {
+    if (!storage) return;
+    await storage.setItem(keys.activeSessionId, sessionId);
+  }, [storage, keys.activeSessionId]);
+
+  // Clear all storage
+  const clearAllStorage = useCallback(async (): Promise<void> => {
+    if (!storage) return;
+    try {
+      await storage.removeItem(keys.sessions);
+      await storage.removeItem(keys.activeSessionId);
+    } catch (err) {
+      console.error('Clear secure storage error:', err);
+    }
+  }, [storage, keys]);
+
+  // Switch to a different session
+  const switchToSession = useCallback(async (sessionId: string): Promise<void> => {
+    try {
+      setIsLoading(true);
+      
+      // Get access token for this session
+      await oxyServices.getTokenBySession(sessionId);
+      
+      // Load full user data
+      const fullUser = await oxyServices.getUserBySession(sessionId);
+      
+      setActiveSessionId(sessionId);
+      setUser(fullUser);
+      setMinimalUser({
+        id: fullUser.id,
+        username: fullUser.username,
+        avatar: fullUser.avatar
+      });
+      
+      await saveActiveSessionId(sessionId);
+      
+      if (onAuthStateChange) {
+        onAuthStateChange(fullUser);
+      }
+    } catch (error) {
+      console.error('Switch session error:', error);
+      setError('Failed to switch session');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [oxyServices, onAuthStateChange, saveActiveSessionId]);
+
+  // Secure login method
+  const secureLogin = async (username: string, password: string, deviceName?: string): Promise<User> => {
+    if (!storage) throw new Error('Storage not initialized');
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const response: SecureLoginResponse = await oxyServices.secureLogin(username, password, deviceName);
+      
+      // Create client session object
+      const clientSession: SecureClientSession = {
+        sessionId: response.sessionId,
+        deviceId: response.deviceId,
+        expiresAt: response.expiresAt,
+        lastActive: new Date().toISOString()
+      };
+
+      // Add to sessions list
+      const updatedSessions = [...sessions, clientSession];
+      setSessions(updatedSessions);
+      await saveSessionsToStorage(updatedSessions);
+
+      // Set as active session
+      setActiveSessionId(response.sessionId);
+      await saveActiveSessionId(response.sessionId);
+
+      // Get access token for API calls
+      await oxyServices.getTokenBySession(response.sessionId);
+
+      // Load full user data
+      const fullUser = await oxyServices.getUserBySession(response.sessionId);
+      setUser(fullUser);
+      setMinimalUser(response.user);
+
+      if (onAuthStateChange) {
+        onAuthStateChange(fullUser);
+      }
+
+      return fullUser;
+    } catch (error: any) {
+      setError(error.message || 'Login failed');
+      throw error;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Logout method
+  const logout = async (targetSessionId?: string): Promise<void> => {
+    if (!activeSessionId) return;
+
+    try {
+      const sessionToLogout = targetSessionId || activeSessionId;
+      await oxyServices.logoutSecureSession(activeSessionId, sessionToLogout);
+
+      // Remove session from local storage
+      const filteredSessions = sessions.filter(s => s.sessionId !== sessionToLogout);
+      setSessions(filteredSessions);
+      await saveSessionsToStorage(filteredSessions);
+
+      // If logging out active session
+      if (sessionToLogout === activeSessionId) {
+        if (filteredSessions.length > 0) {
+          // Switch to another session
+          await switchToSession(filteredSessions[0].sessionId);
+        } else {
+          // No sessions left
+          setActiveSessionId(null);
+          setUser(null);
+          setMinimalUser(null);
+          await storage?.removeItem(keys.activeSessionId);
+          
+          if (onAuthStateChange) {
+            onAuthStateChange(null);
+          }
+        }
+      }
+    } catch (error) {
+      console.error('Logout error:', error);
+      setError('Logout failed');
+    }
+  };
+
+  // Logout all sessions
+  const logoutAll = async (): Promise<void> => {
+    if (!activeSessionId) return;
+
+    try {
+      await oxyServices.logoutAllSecureSessions(activeSessionId);
+      
+      // Clear all local data
+      setSessions([]);
+      setActiveSessionId(null);
+      setUser(null);
+      setMinimalUser(null);
+      await clearAllStorage();
+      
+      if (onAuthStateChange) {
+        onAuthStateChange(null);
+      }
+    } catch (error) {
+      console.error('Logout all error:', error);
+      setError('Logout all failed');
+    }
+  };
+
+  // Sign up method (placeholder - you can implement based on your needs)
+  const signUp = async (username: string, email: string, password: string): Promise<User> => {
+    // Implement sign up logic similar to secureLogin
+    throw new Error('Sign up not implemented yet');
+  };
+
+  // Switch session method
+  const switchSession = async (sessionId: string): Promise<void> => {
+    await switchToSession(sessionId);
+  };
+
+  // Remove session method
+  const removeSession = async (sessionId: string): Promise<void> => {
+    await logout(sessionId);
+  };
+
+  // Refresh sessions method
+  const refreshSessions = async (): Promise<void> => {
+    if (!activeSessionId) return;
+
+    try {
+      const serverSessions = await oxyServices.getSessionsBySessionId(activeSessionId);
+      
+      // Update local sessions with server data
+      const updatedSessions: SecureClientSession[] = serverSessions.map(serverSession => ({
+        sessionId: serverSession.sessionId,
+        deviceId: serverSession.deviceId,
+        expiresAt: new Date().toISOString(), // You might want to get this from server
+        lastActive: new Date().toISOString()
+      }));
+      
+      setSessions(updatedSessions);
+      await saveSessionsToStorage(updatedSessions);
+    } catch (error) {
+      console.error('Refresh sessions error:', error);
+    }
+  };
+
+  // Context value
+  const contextValue: SecureOxyContextState = {
+    user,
+    minimalUser,
+    sessions,
+    activeSessionId,
+    isAuthenticated: !!user,
+    isLoading,
+    error,
+    secureLogin,
+    logout,
+    logoutAll,
+    signUp,
+    switchSession,
+    removeSession,
+    refreshSessions,
+    oxyServices,
+    bottomSheetRef,
+    showBottomSheet: undefined, // Implement as needed
+    hideBottomSheet: undefined, // Implement as needed
+  };
+
+  return (
+    <SecureOxyContext.Provider value={contextValue}>
+      {children}
+    </SecureOxyContext.Provider>
+  );
+};
+
+// Hook to use the secure context
+export const useSecureOxyContext = (): SecureOxyContextState => {
+  const context = useContext(SecureOxyContext);
+  if (!context) {
+    throw new Error('useSecureOxyContext must be used within a SecureOxyContextProvider');
+  }
+  return context;
+};
+
+export default SecureOxyContext;

package/src/ui/screens/AccountCenterScreen.tsx

@@ -20,7 +20,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
     theme,
     navigate,
 }) => {
-    const { user, logout, isLoading, users } = useOxy();
+    const { user, logout, isLoading, sessions } = useOxy();
 
     const isDarkTheme = theme === 'dark';
     const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
@@ -94,14 +94,14 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                 </View>
 
                 <View style={styles.actionsContainer}>
-                    {/* Show Account Switcher if multiple users exist */}
-                    {users && users.length > 1 && (
+                    {/* Show Account Switcher if multiple sessions exist */}
+                    {sessions && sessions.length > 1 && (
                         <TouchableOpacity
                             style={[styles.actionButton, { borderColor }]}
                             onPress={() => navigate('AccountSwitcher')}
                         >
                             <Text style={[styles.actionButtonText, { color: textColor }]}>
-                                Switch Account ({users.length} accounts)
+                                Switch Account ({sessions.length} accounts)
                             </Text>
                         </TouchableOpacity>
                     )}

package/src/ui/screens/AccountSwitcherScreen.tsx

@@ -10,7 +10,8 @@ import {
     Platform,
 } from 'react-native';
 import { BaseScreenProps } from '../navigation/types';
-import { useOxy, AuthenticatedUser } from '../context/OxyContext';
+import { useOxy } from '../context/OxyContext';
+import { SecureClientSession } from '../../models/secureSession';
 import { fontFamilies } from '../styles/fonts';
 
 const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
@@ -21,9 +22,10 @@ const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
 }) => {
     const { 
         user, 
-        users, 
-        switchUser, 
-        removeUser, 
+        sessions, 
+        activeSessionId,
+        switchSession, 
+        removeSession, 
         logoutAll,
         isLoading 
     } = useOxy();
@@ -40,31 +42,31 @@ const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
     const dangerColor = '#D32F2F';
     const successColor = '#2E7D32';
 
-    const handleSwitchUser = async (userId: string) => {
-        if (userId === user?._id) return; // Already active user
+    const handleSwitchSession = async (sessionId: string) => {
+        if (sessionId === user?.sessionId) return; // Already active session
 
-        setSwitchingToUserId(userId);
+        setSwitchingToUserId(sessionId);
         try {
-            await switchUser(userId);
+            await switchSession(sessionId);
             Alert.alert('Success', 'Account switched successfully!');
             if (onClose) {
                 onClose();
             }
         } catch (error) {
-            console.error('Switch user failed:', error);
+            console.error('Switch session failed:', error);
             Alert.alert('Switch Failed', 'There was a problem switching accounts. Please try again.');
         } finally {
             setSwitchingToUserId(null);
         }
     };
 
-    const handleRemoveUser = async (userId: string) => {
-        const userToRemove = users.find(u => u._id === userId);
-        if (!userToRemove) return;
+    const handleRemoveSession = async (sessionId: string) => {
+        const sessionToRemove = sessions.find(s => s.sessionId === sessionId);
+        if (!sessionToRemove) return;
 
         Alert.alert(
             'Remove Account',
-            `Are you sure you want to remove ${userToRemove.username} from this device? You'll need to sign in again to access this account.`,
+            `Are you sure you want to remove this session from this device? You'll need to sign in again to access this account.`,
             [
                 {
                     text: 'Cancel',
@@ -74,12 +76,12 @@ const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                     text: 'Remove',
                     style: 'destructive',
                     onPress: async () => {
-                        setRemovingUserId(userId);
+                        setRemovingUserId(sessionId);
                         try {
-                            await removeUser(userId);
+                            await removeSession(sessionId);
                             Alert.alert('Success', 'Account removed successfully!');
                         } catch (error) {
-                            console.error('Remove user failed:', error);
+                            console.error('Remove session failed:', error);
                             Alert.alert('Remove Failed', 'There was a problem removing the account. Please try again.');
                         } finally {
                             setRemovingUserId(null);
@@ -121,14 +123,14 @@ const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
         );
     };
 
-    const renderUserItem = (userItem: AuthenticatedUser) => {
-        const isActive = userItem._id === user?._id;
-        const isSwitching = switchingToUserId === userItem._id;
-        const isRemoving = removingUserId === userItem._id;
+    const renderSessionItem = (session: SecureClientSession) => {
+        const isActive = session.sessionId === activeSessionId;
+        const isSwitching = switchingToUserId === session.sessionId;
+        const isRemoving = removingUserId === session.sessionId;
 
         return (
             <View
-                key={userItem._id}
+                key={session.sessionId}
                 style={[
                     styles.userItem,
                     {
@@ -138,12 +140,12 @@ const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                 ]}
             >
                 <View style={styles.userInfo}>
-                    <Text style={[styles.username, { color: textColor }]}>{userItem.username}</Text>
-                    {userItem.email && (
-                        <Text style={[styles.email, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
-                            {userItem.email}
-                        </Text>
-                    )}
+                    <Text style={[styles.username, { color: textColor }]}>
+                        {isActive ? user?.username || 'Current Account' : 'Account Session'}
+                    </Text>
+                    <Text style={[styles.email, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                        Last active: {new Date(session.lastActive).toLocaleDateString()}
+                    </Text>
                     {isActive && (
                         <View style={[styles.activeBadge, { backgroundColor: successColor }]}>
                             <Text style={styles.activeBadgeText}>Active</Text>
@@ -155,7 +157,7 @@ const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                     {!isActive && (
                         <TouchableOpacity
                             style={[styles.switchButton, { borderColor: primaryColor }]}
-                            onPress={() => handleSwitchUser(userItem._id)}
+                            onPress={() => handleSwitchSession(session.sessionId)}
                             disabled={isSwitching || isRemoving}
                         >
                             {isSwitching ? (
@@ -168,8 +170,8 @@ const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
 
                     <TouchableOpacity
                         style={[styles.removeButton, { borderColor: dangerColor }]}
-                        onPress={() => handleRemoveUser(userItem._id)}
-                        disabled={isSwitching || isRemoving || users.length === 1}
+                        onPress={() => handleRemoveSession(session.sessionId)}
+                        disabled={isSwitching || isRemoving || sessions.length === 1}
                     >
                         {isRemoving ? (
                             <ActivityIndicator color={dangerColor} size="small" />
@@ -201,10 +203,10 @@ const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
 
                 <View style={styles.usersContainer}>
                     <Text style={[styles.sectionTitle, { color: textColor }]}>
-                        Accounts ({users.length})
+                        Sessions ({sessions.length})
                     </Text>
                     
-                    {users.map(renderUserItem)}
+                    {sessions.map(renderSessionItem)}
                 </View>
 
                 <View style={styles.actionsContainer}>
@@ -217,7 +219,7 @@ const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                         </Text>
                     </TouchableOpacity>
 
-                    {users.length > 1 && (
+                    {sessions.length > 1 && (
                         <TouchableOpacity
                             style={[styles.dangerButton, { backgroundColor: isDarkTheme ? '#300000' : '#FFEBEE' }]}
                             onPress={handleLogoutAll}
@@ -227,7 +229,7 @@ const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                                 <ActivityIndicator color={dangerColor} size="small" />
                             ) : (
                                 <Text style={[styles.dangerButtonText, { color: dangerColor }]}>
-                                    Sign Out All Accounts
+                                    Sign Out All Sessions
                                 </Text>
                             )}
                         </TouchableOpacity>