@oxyhq/services 5.15.6 → 5.15.9

package/src/ui/screens/OxyAuthScreen.tsx

@@ -6,6 +6,7 @@
  * 1. Scan QR code with Oxy Accounts app
  * 2. Open Oxy Accounts app directly (via deep link)
  * 
+ * Uses WebSocket for real-time authorization updates (with polling fallback).
  * The Oxy Accounts app is where users manage their cryptographic identity.
  * This screen should NOT be used within the Accounts app itself.
  */
@@ -21,6 +22,7 @@ import {
   Platform,
   ActivityIndicator,
 } from 'react-native';
+import io, { type Socket } from 'socket.io-client';
 import type { BaseScreenProps } from '../types/navigation';
 import { useThemeColors } from '../styles';
 import { useOxy } from '../context/OxyContext';
@@ -34,11 +36,22 @@ const OXY_ACCOUNTS_WEB_URL = 'https://accounts.oxy.so';
 // Auth session expiration (5 minutes)
 const AUTH_SESSION_EXPIRY_MS = 5 * 60 * 1000;
 
+// Polling interval (fallback if socket fails)
+const POLLING_INTERVAL_MS = 3000;
+
 interface AuthSession {
   sessionToken: string;
   expiresAt: number;
 }
 
+interface AuthUpdatePayload {
+  status: 'authorized' | 'cancelled' | 'expired';
+  sessionId?: string;
+  publicKey?: string;
+  userId?: string;
+  username?: string;
+}
+
 const OxyAuthScreen: React.FC<BaseScreenProps> = ({
   navigate,
   goBack,
@@ -52,13 +65,151 @@ const OxyAuthScreen: React.FC<BaseScreenProps> = ({
   const [authSession, setAuthSession] = useState<AuthSession | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [isPolling, setIsPolling] = useState(false);
+  const [isWaiting, setIsWaiting] = useState(false);
+  const [connectionType, setConnectionType] = useState<'socket' | 'polling'>('socket');
+
+  const socketRef = useRef<Socket | null>(null);
   const pollingIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const isProcessingRef = useRef(false);
+
+  // Handle successful authorization
+  const handleAuthSuccess = useCallback(async (sessionId: string) => {
+    if (isProcessingRef.current) return;
+    isProcessingRef.current = true;
+
+    try {
+      // Get token and user data
+      await oxyServices.getTokenBySession(sessionId);
+      const user = await oxyServices.getUserBySession(sessionId);
+
+      if (onAuthenticated) {
+        onAuthenticated(user);
+      }
+    } catch (err) {
+      if (__DEV__) {
+        console.error('Error completing auth:', err);
+      }
+      setError('Authorization successful but failed to complete sign in. Please try again.');
+      isProcessingRef.current = false;
+    }
+  }, [oxyServices, onAuthenticated]);
+
+  // Connect to socket for real-time updates
+  const connectSocket = useCallback((sessionToken: string) => {
+    const baseURL = oxyServices.getBaseURL();
+
+    // Connect to the auth-session namespace (no authentication required)
+    const socket = io(`${baseURL}/auth-session`, {
+      transports: ['websocket', 'polling'],
+      reconnection: true,
+      reconnectionAttempts: 3,
+      reconnectionDelay: 1000,
+    });
+
+    socketRef.current = socket;
+
+    socket.on('connect', () => {
+      if (__DEV__) {
+        console.log('Auth socket connected');
+      }
+      // Join the room for this session token
+      socket.emit('join', sessionToken);
+      setConnectionType('socket');
+    });
+
+    socket.on('joined', () => {
+      if (__DEV__) {
+        console.log('Joined auth session room');
+      }
+    });
+
+    socket.on('auth_update', (payload: AuthUpdatePayload) => {
+      if (__DEV__) {
+        console.log('Auth update received:', payload);
+      }
+
+      if (payload.status === 'authorized' && payload.sessionId) {
+        cleanup();
+        handleAuthSuccess(payload.sessionId);
+      } else if (payload.status === 'cancelled') {
+        cleanup();
+        setError('Authorization was denied.');
+      } else if (payload.status === 'expired') {
+        cleanup();
+        setError('Session expired. Please try again.');
+      }
+    });
+
+    socket.on('connect_error', (err) => {
+      if (__DEV__) {
+        console.log('Socket connection error, falling back to polling:', err.message);
+      }
+      // Fall back to polling if socket fails
+      socket.disconnect();
+      startPolling(sessionToken);
+    });
+
+    socket.on('disconnect', () => {
+      if (__DEV__) {
+        console.log('Auth socket disconnected');
+      }
+    });
+  }, [oxyServices, handleAuthSuccess]);
+
+  // Start polling for authorization (fallback)
+  const startPolling = useCallback((sessionToken: string) => {
+    setConnectionType('polling');
+
+    pollingIntervalRef.current = setInterval(async () => {
+      if (isProcessingRef.current) return;
+
+      try {
+        const response = await oxyServices.makeRequest<{
+          authorized: boolean;
+          sessionId?: string;
+          publicKey?: string;
+          status?: string;
+        }>('GET', `/api/auth/session/status/${sessionToken}`, undefined, { cache: false });
+
+        if (response.authorized && response.sessionId) {
+          cleanup();
+          handleAuthSuccess(response.sessionId);
+        } else if (response.status === 'cancelled') {
+          cleanup();
+          setError('Authorization was denied.');
+        } else if (response.status === 'expired') {
+          cleanup();
+          setError('Session expired. Please try again.');
+        }
+      } catch (err) {
+        // Silent fail for polling - will retry
+        if (__DEV__) {
+          console.log('Auth polling error:', err);
+        }
+      }
+    }, POLLING_INTERVAL_MS);
+  }, [oxyServices, handleAuthSuccess]);
+
+  // Cleanup socket and polling
+  const cleanup = useCallback(() => {
+    setIsWaiting(false);
+
+    if (socketRef.current) {
+      socketRef.current.disconnect();
+      socketRef.current = null;
+    }
+
+    if (pollingIntervalRef.current) {
+      clearInterval(pollingIntervalRef.current);
+      pollingIntervalRef.current = null;
+    }
+  }, []);
 
   // Generate a new auth session
   const generateAuthSession = useCallback(async () => {
     setIsLoading(true);
     setError(null);
+    isProcessingRef.current = false;
 
     try {
       // Generate a unique session token for this auth request
@@ -66,7 +217,6 @@ const OxyAuthScreen: React.FC<BaseScreenProps> = ({
       const expiresAt = Date.now() + AUTH_SESSION_EXPIRY_MS;
 
       // Register the auth session with the server
-      // The server will associate this token with the user when they authorize in Accounts
       await oxyServices.makeRequest('POST', '/api/auth/session/create', {
         sessionToken,
         expiresAt,
@@ -74,13 +224,16 @@ const OxyAuthScreen: React.FC<BaseScreenProps> = ({
       }, { cache: false });
 
       setAuthSession({ sessionToken, expiresAt });
-      startPolling(sessionToken);
+      setIsWaiting(true);
+
+      // Try socket first, will fall back to polling if needed
+      connectSocket(sessionToken);
     } catch (err: any) {
       setError(err.message || 'Failed to create auth session');
     } finally {
       setIsLoading(false);
     }
-  }, [oxyServices]);
+  }, [oxyServices, connectSocket]);
 
   // Generate a random session token
   const generateSessionToken = (): string => {
@@ -92,54 +245,12 @@ const OxyAuthScreen: React.FC<BaseScreenProps> = ({
     return result;
   };
 
-  // Start polling for authorization
-  const startPolling = useCallback((sessionToken: string) => {
-    setIsPolling(true);
-
-    pollingIntervalRef.current = setInterval(async () => {
-      try {
-        const response = await oxyServices.makeRequest<{
-          authorized: boolean;
-          sessionId?: string;
-          publicKey?: string;
-        }>('GET', `/api/auth/session/status/${sessionToken}`, undefined, { cache: false });
-
-        if (response.authorized && response.sessionId) {
-          // Authorization successful!
-          stopPolling();
-
-          // Get token and user data
-          await oxyServices.getTokenBySession(response.sessionId);
-          const user = await oxyServices.getUserBySession(response.sessionId);
-
-          if (onAuthenticated) {
-            onAuthenticated(user);
-          }
-        }
-      } catch (err) {
-        // Silent fail for polling - will retry
-        if (__DEV__) {
-          console.log('Auth polling error:', err);
-        }
-      }
-    }, 2000); // Poll every 2 seconds
-  }, [oxyServices, onAuthenticated]);
-
-  // Stop polling
-  const stopPolling = useCallback(() => {
-    setIsPolling(false);
-    if (pollingIntervalRef.current) {
-      clearInterval(pollingIntervalRef.current);
-      pollingIntervalRef.current = null;
-    }
-  }, []);
-
   // Clean up on unmount
   useEffect(() => {
     return () => {
-      stopPolling();
+      cleanup();
     };
-  }, [stopPolling]);
+  }, [cleanup]);
 
   // Initialize auth session
   useEffect(() => {
@@ -149,11 +260,11 @@ const OxyAuthScreen: React.FC<BaseScreenProps> = ({
   // Check if session expired
   useEffect(() => {
     if (authSession && Date.now() > authSession.expiresAt) {
-      stopPolling();
+      cleanup();
       setAuthSession(null);
       setError('Session expired. Please try again.');
     }
-  }, [authSession, stopPolling]);
+  }, [authSession, cleanup]);
 
   // Build the QR code data
   const getQRData = (): string => {
@@ -191,9 +302,9 @@ const OxyAuthScreen: React.FC<BaseScreenProps> = ({
 
   // Refresh session
   const handleRefresh = useCallback(() => {
-    stopPolling();
+    cleanup();
     generateAuthSession();
-  }, [generateAuthSession, stopPolling]);
+  }, [generateAuthSession, cleanup]);
 
   if (isLoading) {
     return (
@@ -246,24 +357,29 @@ const OxyAuthScreen: React.FC<BaseScreenProps> = ({
         </Text>
       </View>
 
-      {/* Divider */}
-      <View style={styles.dividerContainer}>
-        <View style={[styles.divider, { backgroundColor: colors.border }]} />
-        <Text style={[styles.dividerText, { color: colors.secondaryText }]}>or</Text>
-        <View style={[styles.divider, { backgroundColor: colors.border }]} />
-      </View>
-
-      {/* Open Accounts Button */}
-      <TouchableOpacity
-        style={[styles.button, { backgroundColor: colors.primary }]}
-        onPress={handleOpenAccounts}
-      >
-        <OxyLogo width={20} height={20} fillColor="white" style={styles.buttonIcon} />
-        <Text style={styles.buttonText}>Open Oxy Accounts</Text>
-      </TouchableOpacity>
+      {/* Divider and Open Accounts Button - Only show on native platforms */}
+      {Platform.OS !== 'web' && (
+        <>
+          {/* Divider */}
+          <View style={styles.dividerContainer}>
+            <View style={[styles.divider, { backgroundColor: colors.border }]} />
+            <Text style={[styles.dividerText, { color: colors.secondaryText }]}>or</Text>
+            <View style={[styles.divider, { backgroundColor: colors.border }]} />
+          </View>
+
+          {/* Open Accounts Button */}
+          <TouchableOpacity
+            style={[styles.button, { backgroundColor: colors.primary }]}
+            onPress={handleOpenAccounts}
+          >
+            <OxyLogo width={20} height={20} fillColor="white" style={styles.buttonIcon} />
+            <Text style={styles.buttonText}>Open Oxy Accounts</Text>
+          </TouchableOpacity>
+        </>
+      )}
 
       {/* Status */}
-      {isPolling && (
+      {isWaiting && (
         <View style={styles.statusContainer}>
           <ActivityIndicator size="small" color={colors.primary} />
           <Text style={[styles.statusText, { color: colors.secondaryText }]}>

package/lib/typescript/types/expo-random.d.ts

@@ -1,9 +0,0 @@
-declare module 'expo-random' {
-  export interface RandomOptions {
-    byteCount?: number;
-  }
-
-  export function getRandomBytes(byteCount: number): Uint8Array;
-  export function getRandomBytesAsync(byteCount: number): Promise<Uint8Array>;
-}
-

package/src/types/expo-random.d.ts

@@ -1,9 +0,0 @@
-declare module 'expo-random' {
-  export interface RandomOptions {
-    byteCount?: number;
-  }
-
-  export function getRandomBytes(byteCount: number): Uint8Array;
-  export function getRandomBytesAsync(byteCount: number): Promise<Uint8Array>;
-}
-