@oxyhq/services 5.5.9 → 5.6.1

package/src/ui/components/internal/GroupedPillButtons.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, TouchableOpacity, Text, ActivityIndicator, StyleSheet } from 'react-native';
+import { View, TouchableOpacity, Text, ActivityIndicator, StyleSheet, Platform } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 
 interface ButtonConfig {
@@ -32,13 +32,17 @@ const GroupedPillButtons: React.FC<GroupedPillButtonsProps> = ({
             gap: 6,
             minWidth: 70,
             borderWidth: 1,
-            shadowOffset: {
-                width: 0,
-                height: 2,
-            },
-            shadowOpacity: 0.1,
-            shadowRadius: 4,
-            elevation: 2,
+            ...Platform.select({
+                web: {
+                    boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+                },
+                default: {
+                    shadowOffset: { width: 0, height: 2 },
+                    shadowOpacity: 0.1,
+                    shadowRadius: 4,
+                    elevation: 2,
+                }
+            }),
         };
 
         // Determine border radius based on position

package/src/ui/components/internal/PinInput.tsx

@@ -0,0 +1,102 @@
+import React, { useRef } from 'react';
+import { View, TextInput, StyleSheet, Platform } from 'react-native';
+
+interface PinInputProps {
+    value: string;
+    onChange: (val: string) => void;
+    length?: number;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    colors: any;
+}
+
+const PinInput: React.FC<PinInputProps> = ({ value, onChange, length = 6, disabled, autoFocus, colors }) => {
+    const inputs = useRef<Array<TextInput | null>>([]);
+
+    const handleChange = (text: string, idx: number) => {
+        if (!/^[0-9]*$/.test(text)) return;
+        let newValue = value.split('');
+        if (text.length > 1) {
+            // Paste or autofill
+            newValue = text.split('').slice(0, length);
+            onChange(newValue.join(''));
+            if (newValue.length < length) {
+                inputs.current[newValue.length]?.focus();
+            }
+            return;
+        }
+        newValue[idx] = text;
+        const joined = newValue.join('').slice(0, length);
+        onChange(joined);
+        if (text && idx < length - 1) {
+            inputs.current[idx + 1]?.focus();
+        }
+    };
+
+    const handleKeyPress = (e: any, idx: number) => {
+        if (e.nativeEvent.key === 'Backspace' && !value[idx] && idx > 0) {
+            inputs.current[idx - 1]?.focus();
+        }
+    };
+
+    return (
+        <View style={styles.pinContainer}>
+            {Array.from({ length }).map((_, idx) => (
+                <TextInput
+                    key={idx}
+                    ref={ref => (inputs.current[idx] = ref)}
+                    style={[
+                        styles.pinInput,
+                        { borderColor: colors.primary, color: colors.text, backgroundColor: colors.inputBackground },
+                        value[idx] ? { borderWidth: 2 } : { borderWidth: 1 },
+                    ]}
+                    value={value[idx] || ''}
+                    onChangeText={text => handleChange(text, idx)}
+                    onKeyPress={e => handleKeyPress(e, idx)}
+                    keyboardType={Platform.OS === 'ios' ? 'number-pad' : 'numeric'}
+                    maxLength={1}
+                    editable={!disabled}
+                    autoFocus={autoFocus && idx === 0}
+                    textAlign="center"
+                    selectionColor={colors.primary}
+                    returnKeyType="done"
+                />
+            ))}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    pinContainer: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        gap: 12,
+        marginBottom: 24,
+        marginTop: 8,
+    },
+    pinInput: {
+        width: 44,
+        height: 54,
+        borderRadius: 12,
+        borderWidth: 1,
+        fontSize: 28,
+        fontWeight: '600',
+        backgroundColor: '#F5F5F5',
+        textAlign: 'center',
+        marginHorizontal: 2,
+        ...Platform.select({
+            web: {
+                boxShadow: '0 1px 4px rgba(0,0,0,0.04)',
+            },
+            default: {
+                shadowColor: '#000',
+                shadowOpacity: 0.04,
+                shadowOffset: { width: 0, height: 1 },
+                shadowRadius: 4,
+                elevation: 1,
+            }
+        }),
+    },
+});
+
+export default PinInput; 

package/src/ui/components/internal/TextField.tsx

@@ -34,6 +34,7 @@ export interface TextFieldProps extends Omit<TextInputProps, 'style'> {
     onBlur?: () => void;
     onChangeText?: (text: string) => void;
     testID?: string;
+    validMessage?: string;
 }
 
 const TextField = forwardRef<TextInput, TextFieldProps>(({
@@ -57,6 +58,7 @@ const TextField = forwardRef<TextInput, TextFieldProps>(({
     testID,
     secureTextEntry,
     value = '',
+    validMessage,
     ...textInputProps
 }, ref) => {
     const [isFocused, setIsFocused] = useState(false);
@@ -556,6 +558,13 @@ const TextField = forwardRef<TextInput, TextFieldProps>(({
                     </Text>
                 </View>
             )}
+            {/* Valid Message */}
+            {!error && validMessage && (
+                <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 4, gap: 6 }}>
+                    <Ionicons name="checkmark-circle" size={16} color={colors?.success || '#2E7D32'} />
+                    <Text style={{ fontSize: 13, fontWeight: '500', color: colors?.success || '#2E7D32' }}>{validMessage}</Text>
+                </View>
+            )}
         </View>
     );
 });

package/src/ui/context/OxyContext.tsx

@@ -1,8 +1,11 @@
-import React, { createContext, useContext, useState, useEffect, useCallback, ReactNode, useMemo } from 'react';
+import React, { createContext, useContext, useEffect, useCallback, ReactNode, useMemo } from 'react';
 import { OxyServices } from '../../core';
 import { User } from '../../models/interfaces';
 import { SecureLoginResponse, SecureClientSession, MinimalUserData } from '../../models/secureSession';
 import { DeviceManager } from '../../utils/deviceManager';
+import { useSessionSocket } from '../hooks/useSessionSocket';
+import { toast } from '../../lib/sonner';
+import { useAuthStore } from '../stores/authStore';
 
 // Define the context shape
 export interface OxyContextState {
@@ -35,10 +38,6 @@ export interface OxyContextState {
   oxyServices: OxyServices;
   bottomSheetRef?: React.RefObject<any>;
 
-  // API configuration
-  setApiUrl: (url: string) => void;
-  getAppBaseURL: () => string;
-
   // Methods to directly control the bottom sheet
   showBottomSheet?: (screenOrConfig?: string | { screen: string; props?: Record<string, any> }) => void;
   hideBottomSheet?: () => void;
@@ -122,15 +121,20 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
   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);
-  const [appBaseURL, setAppBaseURL] = useState<string>(oxyServices.getBaseURL());
+  // Zustand state
+  const user = useAuthStore((state) => state.user);
+  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
+  const isLoading = useAuthStore((state) => state.isLoading);
+  const error = useAuthStore((state) => state.error);
+  const loginSuccess = useAuthStore((state) => state.loginSuccess);
+  const loginFailure = useAuthStore((state) => state.loginFailure);
+  const logoutStore = useAuthStore((state) => state.logout);
+
+  // Local state for non-auth fields
+  const [minimalUser, setMinimalUser] = React.useState<MinimalUserData | null>(null);
+  const [sessions, setSessions] = React.useState<SecureClientSession[]>([]);
+  const [activeSessionId, setActiveSessionId] = React.useState<string | null>(null);
+  const [storage, setStorage] = React.useState<StorageInterface | null>(null);
 
   // Storage keys (memoized to prevent infinite loops)
   const keys = useMemo(() => getSecureStorageKeys(storageKeyPrefix), [storageKeyPrefix]);
@@ -143,7 +147,7 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
         setStorage(platformStorage);
       } catch (error) {
         console.error('Failed to initialize storage:', error);
-        setError('Failed to initialize storage');
+        useAuthStore.setState({ error: 'Failed to initialize storage' });
       }
     };
 
@@ -155,7 +159,7 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
     const initAuth = async () => {
       if (!storage) return;
 
-      setIsLoading(true);
+      useAuthStore.setState({ isLoading: true });
       try {
         // Load stored sessions
         const sessionsData = await storage.getItem(keys.sessions);
@@ -172,17 +176,16 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
           let shouldUpdateStorage = false;
 
           for (const session of parsedSessions) {
-            if (!session.userId || !session.username) {
+            if (!session.userId) {
               // Session is missing user info, try to fetch it
               try {
                 const sessionUser = await oxyServices.getUserBySession(session.sessionId);
                 migratedSessions.push({
                   ...session,
-                  userId: sessionUser.id,
-                  username: sessionUser.username
+                  userId: sessionUser.id
                 });
                 shouldUpdateStorage = true;
-                console.log(`Migrated session ${session.sessionId} for user ${sessionUser.username}`);
+                console.log(`Migrated session ${session.sessionId} for user ${sessionUser.id}`);
               } catch (error) {
                 // Session might be invalid, skip it
                 console.log(`Removing invalid session ${session.sessionId}:`, error);
@@ -220,7 +223,7 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
 
                   // Load full user data
                   const fullUser = await oxyServices.getUserBySession(activeSession.sessionId);
-                  setUser(fullUser);
+                  loginSuccess(fullUser);
                   setMinimalUser({
                     id: fullUser.id,
                     username: fullUser.username,
@@ -245,7 +248,7 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
         console.error('Secure auth initialization error:', err);
         await clearAllStorage();
       } finally {
-        setIsLoading(false);
+        useAuthStore.setState({ isLoading: false });
       }
     };
 
@@ -266,7 +269,7 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
     } else {
       // No valid sessions left
       setActiveSessionId(null);
-      setUser(null);
+      logoutStore();
       setMinimalUser(null);
       await storage?.removeItem(keys.activeSessionId);
 
@@ -274,7 +277,7 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
         onAuthStateChange(null);
       }
     }
-  }, [sessions, storage, keys, onAuthStateChange]);
+  }, [sessions, storage, keys, onAuthStateChange, logoutStore]);
 
   // Save sessions to storage
   const saveSessionsToStorage = useCallback(async (sessionsList: SecureClientSession[]): Promise<void> => {
@@ -302,7 +305,7 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
   // Switch to a different session
   const switchToSession = useCallback(async (sessionId: string): Promise<void> => {
     try {
-      setIsLoading(true);
+      useAuthStore.setState({ isLoading: true });
 
       // Get access token for this session
       await oxyServices.getTokenBySession(sessionId);
@@ -311,7 +314,7 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
       const fullUser = await oxyServices.getUserBySession(sessionId);
 
       setActiveSessionId(sessionId);
-      setUser(fullUser);
+      loginSuccess(fullUser);
       setMinimalUser({
         id: fullUser.id,
         username: fullUser.username,
@@ -325,18 +328,16 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
       }
     } catch (error) {
       console.error('Switch session error:', error);
-      setError('Failed to switch session');
+      useAuthStore.setState({ error: 'Failed to switch session' });
     } finally {
-      setIsLoading(false);
+      useAuthStore.setState({ isLoading: false });
     }
-  }, [oxyServices, onAuthStateChange, saveActiveSessionId]);
+  }, [oxyServices, onAuthStateChange, loginSuccess, saveActiveSessionId]);
 
   // Secure login method
   const login = async (username: string, password: string, deviceName?: string): Promise<User> => {
     if (!storage) throw new Error('Storage not initialized');
-
-    setIsLoading(true);
-    setError(null);
+    useAuthStore.setState({ isLoading: true, error: null });
 
     try {
       // Get device fingerprint for enhanced device identification
@@ -361,13 +362,12 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
         deviceId: response.deviceId,
         expiresAt: response.expiresAt,
         lastActive: new Date().toISOString(),
-        userId: response.user.id,
-        username: response.user.username
+        userId: response.user.id
       };
 
       // Check if this user already has a session (prevent duplicate accounts)
       const existingUserSessionIndex = sessions.findIndex(s =>
-        s.userId === response.user.id || s.username === response.user.username
+        s.userId === response.user.id
       );
 
       let updatedSessions: SecureClientSession[];
@@ -378,7 +378,7 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
         updatedSessions = [...sessions];
         updatedSessions[existingUserSessionIndex] = clientSession;
 
-        console.log(`Reusing/updating existing session for user ${response.user.username}. Previous session: ${existingSession.sessionId}, New session: ${response.sessionId}`);
+        console.log(`Reusing/updating existing session for user ${response.user.id}. Previous session: ${existingSession.sessionId}, New session: ${response.sessionId}`);
 
         // If the replaced session was the active one, update active session
         if (activeSessionId === existingSession.sessionId) {
@@ -388,7 +388,7 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
       } else {
         // Add new session for new user
         updatedSessions = [...sessions, clientSession];
-        console.log(`Added new session for user ${response.user.username} on device ${response.deviceId}`);
+        console.log(`Added new session for user ${response.user.id} on device ${response.deviceId}`);
       }
 
       setSessions(updatedSessions);
@@ -403,7 +403,7 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
 
       // Load full user data
       const fullUser = await oxyServices.getUserBySession(response.sessionId);
-      setUser(fullUser);
+      loginSuccess(fullUser);
       setMinimalUser(response.user);
 
       if (onAuthStateChange) {
@@ -412,10 +412,10 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
 
       return fullUser;
     } catch (error: any) {
-      setError(error.message || 'Login failed');
+      loginFailure(error.message || 'Login failed');
       throw error;
     } finally {
-      setIsLoading(false);
+      useAuthStore.setState({ isLoading: false });
     }
   };
 
@@ -440,7 +440,7 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
         } else {
           // No sessions left
           setActiveSessionId(null);
-          setUser(null);
+          logoutStore();
           setMinimalUser(null);
           await storage?.removeItem(keys.activeSessionId);
 
@@ -451,7 +451,7 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
       }
     } catch (error) {
       console.error('Logout error:', error);
-      setError('Logout failed');
+      useAuthStore.setState({ error: 'Logout failed' });
     }
   };
 
@@ -461,13 +461,13 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
 
     if (!activeSessionId) {
       console.error('No active session ID found, cannot logout all');
-      setError('No active session found');
+      useAuthStore.setState({ error: 'No active session found' });
       throw new Error('No active session found');
     }
 
     if (!oxyServices) {
       console.error('OxyServices not initialized');
-      setError('Service not available');
+      useAuthStore.setState({ error: 'Service not available' });
       throw new Error('Service not available');
     }
 
@@ -479,7 +479,7 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
       // Clear all local data
       setSessions([]);
       setActiveSessionId(null);
-      setUser(null);
+      logoutStore();
       setMinimalUser(null);
       await clearAllStorage();
       console.log('Local storage cleared');
@@ -490,7 +490,7 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
       }
     } catch (error) {
       console.error('Logout all error:', error);
-      setError(`Logout all failed: ${error instanceof Error ? error.message : 'Unknown error'}`);
+      useAuthStore.setState({ error: `Logout all failed: ${error instanceof Error ? error.message : 'Unknown error'}` });
       throw error;
     }
   };
@@ -499,8 +499,7 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
   const signUp = async (username: string, email: string, password: string): Promise<User> => {
     if (!storage) throw new Error('Storage not initialized');
 
-    setIsLoading(true);
-    setError(null);
+    useAuthStore.setState({ isLoading: true, error: null });
 
     try {
       // Create new account using the OxyServices signUp method
@@ -514,10 +513,10 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
 
       return user;
     } catch (error: any) {
-      setError(error.message || 'Sign up failed');
+      loginFailure(error.message || 'Sign up failed');
       throw error;
     } finally {
-      setIsLoading(false);
+      useAuthStore.setState({ isLoading: false });
     }
   };
 
@@ -574,7 +573,7 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
       // Clear all local sessions since we logged out from all devices
       setSessions([]);
       setActiveSessionId(null);
-      setUser(null);
+      logoutStore();
       setMinimalUser(null);
       await clearAllStorage();
 
@@ -645,36 +644,19 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
     }
   }, [bottomSheetRef]);
 
-  // API URL configuration
-  const setApiUrl = useCallback((url: string) => {
-    try {
-      // Validate URL
-      if (!url) {
-        throw new Error('Base URL cannot be empty');
-      }
-      // Only update the app-specific base URL, not the OxyServices base URL
-      // This ensures internal module calls to Oxy API remain unaffected
-      setAppBaseURL(url);
-    } catch (error) {
-      console.error('Failed to update API URL:', error);
-      setError(`Failed to update API URL: ${error instanceof Error ? error.message : 'Unknown error'}`);
-    }
-  }, []);
-
-  // Get current app base URL
-  const getAppBaseURL = useCallback(() => {
-    return appBaseURL;
-  }, [appBaseURL]);
-
-  // Compute comprehensive authentication status
-  // This is the single source of truth for authentication across the entire app
-  const isAuthenticated = useMemo(() => {
-    // User is authenticated if:
-    // 1. We have a full user object loaded, OR
-    // 2. We have an active session (token will be fetched on-demand)
-    // This covers both the loaded state and the loading-but-authenticated state
-    return !!user || !!activeSessionId;
-  }, [user, activeSessionId]);
+  // Integrate socket for real-time session updates
+  console.log('OxyContextProvider: userId', user?.id, 'baseURL', oxyServices.getBaseURL());
+  useSessionSocket({
+    userId: user?.id,
+    activeSessionId,
+    refreshSessions,
+    logout: () => logout(),
+    baseURL: oxyServices.getBaseURL(),
+    onRemoteSignOut: () => {
+      toast.info('You have been signed out remotely.');
+      logout();
+    },
+  });
 
   // Context value
   const contextValue: OxyContextState = {
@@ -687,17 +669,18 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
     error,
     login,
     logout,
-    logoutAll,
-    signUp,
-    switchSession,
-    removeSession,
-    refreshSessions,
-    getDeviceSessions,
-    logoutAllDeviceSessions,
-    updateDeviceName,
+    logoutAll: async () => { await logout(); },
+    signUp: async (username, email, password) => {
+      await signUp(username, email, password);
+      return user as User; // Return the latest user from Zustand
+    },
+    switchSession: async (sessionId) => { await switchToSession(sessionId); },
+    removeSession: async (sessionId) => { await removeSession(sessionId); },
+    refreshSessions: async () => { await refreshSessions(); },
+    getDeviceSessions: async () => { return await getDeviceSessions(); },
+    logoutAllDeviceSessions: async () => { await logoutAllDeviceSessions(); },
+    updateDeviceName: async (deviceName) => { await updateDeviceName(deviceName); },
     oxyServices,
-    setApiUrl,
-    getAppBaseURL,
     bottomSheetRef,
     showBottomSheet,
     hideBottomSheet,

package/src/ui/hooks/index.ts

@@ -1,2 +1 @@
-export { useOxyFollow, useFollow } from './useOxyFollow';
-export { useAuthFetch } from './useAuthFetch'; 
+export { useFollow } from './useFollow';