@oxyhq/services 10.4.0 → 10.5.0

package/lib/module/ui/components/SignInModal.js

@@ -1,41 +1,35 @@
 "use strict";
 
 /**
- * SignInModal - Full screen sign-in modal with QR code
+ * SignInModal - Web-first centered sign-in modal (Continue with Oxy)
  *
- * A semi-transparent full-screen modal that displays:
- * - QR code for scanning with Oxy Accounts app
- * - Button to open the Oxy Auth approval page
+ * A semi-transparent full-screen modal whose primary action is the one-tap
+ * "Continue with Oxy" approval flow. The QR code is demoted to a collapsed
+ * "Sign in on another device" disclosure (you can't scan your own screen).
  *
- * Animates with fade-in effect.
+ * ALL of the auth-session machinery (session-token creation, QR data, socket +
+ * polling, waiting/error/retry state, the open-auth handler, deep-link return,
+ * and cleanup) lives in the shared `useOxyAuthSession` hook, which the native
+ * `OxyAuthScreen` also consumes — neither container re-implements the transport.
+ *
+ * Animates with a fade + scale effect.
  */
 
-import { useState, useEffect, useCallback, useRef } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, Modal, Dimensions, Platform, Linking } from 'react-native';
+import { useState, useEffect, useCallback } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, Modal } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import io from 'socket.io-client';
-import QRCode from 'react-native-qrcode-svg';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { Button } from '@oxyhq/bloom/button';
 import { Loading } from '@oxyhq/bloom/loading';
+import { Linking } from 'react-native';
 import { useOxy } from "../context/OxyContext.js";
 import OxyLogo from "./OxyLogo.js";
-import { createDebugLogger } from '@oxyhq/core';
-import { completeDeviceFlowSignIn } from "../../utils/deviceFlowSignIn.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const debug = createDebugLogger('SignInModal');
-const {
-  width: SCREEN_WIDTH,
-  height: SCREEN_HEIGHT
-} = Dimensions.get('window');
-
-// Auth session expiration (5 minutes)
-const AUTH_SESSION_EXPIRY_MS = 5 * 60 * 1000;
+import AnotherDeviceQR from "./AnotherDeviceQR.js";
+import { useOxyAuthSession, OXY_ACCOUNTS_WEB_URL } from "../hooks/useOxyAuthSession.js";
 
-// Polling interval (fallback if socket fails)
-const POLLING_INTERVAL_MS = 3000;
 // Store for modal visibility with subscription support
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 let modalVisible = false;
 let setModalVisibleCallback = null;
 const visibilityListeners = new Set();
@@ -58,10 +52,6 @@ export const subscribeToSignInModal = listener => {
 };
 const SignInModal = () => {
   const [visible, setVisible] = useState(false);
-  const [authSession, setAuthSession] = useState(null);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState(null);
-  const [isWaiting, setIsWaiting] = useState(false);
   const insets = useSafeAreaInsets();
   const theme = useTheme();
   const {
@@ -69,42 +59,59 @@ const SignInModal = () => {
     switchSession,
     clientId
   } = useOxy();
-  const socketRef = useRef(null);
-  const pollingIntervalRef = useRef(null);
-  const isProcessingRef = useRef(false);
-
-  // Animation values
-  const opacity = useSharedValue(0);
-  const scale = useSharedValue(0.9);
 
-  // Register callback
+  // Register the imperative visibility callback.
   useEffect(() => {
     setModalVisibleCallback = setVisible;
     return () => {
       setModalVisibleCallback = null;
     };
   }, []);
+  if (!visible) return null;
+
+  // The hook owns the whole auth-session lifecycle. Mounting it only while the
+  // modal is visible matches the previous behavior (session created on open,
+  // cleaned up on close) — the inner component is unmounted when `visible`
+  // flips false, which runs the hook's unmount cleanup.
+  return /*#__PURE__*/_jsx(SignInModalContent, {
+    theme: theme,
+    insets: insets,
+    oxyServices: oxyServices,
+    switchSession: switchSession,
+    clientId: clientId
+  });
+};
+const SignInModalContent = ({
+  theme,
+  insets,
+  oxyServices,
+  switchSession,
+  clientId
+}) => {
+  const {
+    qrData,
+    isLoading,
+    error,
+    isWaiting,
+    openAuthApproval,
+    retry
+  } = useOxyAuthSession(oxyServices, clientId, switchSession, {
+    onSignedIn: hideSignInModal
+  });
 
-  // Animate in/out
-  // biome-ignore lint/correctness/useExhaustiveDependencies: opacity and scale are Reanimated SharedValues (stable refs) that should not be listed as dependencies
+  // Entrance animation.
+  const opacity = useSharedValue(0);
+  const scale = useSharedValue(0.96);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: opacity/scale are Reanimated SharedValues (stable refs) and must not be listed as deps; this runs once on mount to play the entrance.
   useEffect(() => {
-    if (visible) {
-      opacity.value = withTiming(1, {
-        duration: 250
-      });
-      scale.value = withTiming(1, {
-        duration: 250
-      });
-      generateAuthSession();
-    } else {
-      opacity.value = withTiming(0, {
-        duration: 200
-      });
-      scale.value = withTiming(0.9, {
-        duration: 200
-      });
-    }
-  }, [visible]);
+    opacity.value = withTiming(1, {
+      duration: 250
+    });
+    scale.value = withTiming(1, {
+      duration: 250
+    });
+  }, []);
   const backdropStyle = useAnimatedStyle(() => ({
     opacity: opacity.value
   }));
@@ -114,245 +121,14 @@ const SignInModal = () => {
       scale: scale.value
     }]
   }));
-
-  // Handle successful authorization.
-  //
-  // The auth-session socket (or fallback poll) hands us the new
-  // `sessionId`. Before any session-management code can touch it we
-  // MUST first exchange the secret `sessionToken` (held only by this
-  // client) for the first access token via `claimSessionByToken` —
-  // this is the device-flow equivalent of OAuth's code-for-token
-  // exchange (RFC 8628 §3.4).
-  //
-  // Without that exchange the SDK has no bearer token and the app never
-  // becomes authenticated even though the session is authorized server-side.
-  // Once `claimSessionByToken` plants the tokens in the HttpService, the rest
-  // of the session wiring (state, persistence, language preference) flows
-  // through the normal `switchSession` path.
-  const handleAuthSuccess = useCallback(async (sessionId, sessionToken) => {
-    if (isProcessingRef.current) return;
-    isProcessingRef.current = true;
-    try {
-      // Claim the first access token with the secret sessionToken, then
-      // hydrate the session. Shared with the native `OxyAuthScreen` via
-      // `completeDeviceFlowSignIn` so the two paths cannot drift.
-      if (!switchSession) {
-        throw new Error('Session management unavailable');
-      }
-      await completeDeviceFlowSignIn({
-        oxyServices,
-        sessionId,
-        sessionToken,
-        switchSession
-      });
-      hideSignInModal();
-    } catch (err) {
-      debug.error('Error completing auth:', err);
-      setError('Authorization successful but failed to complete sign in. Please try again.');
-      isProcessingRef.current = false;
-    }
-  }, [oxyServices, switchSession]);
-
-  // 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;
-    }
-  }, []);
-
-  // Connect to socket for real-time updates
-  const connectSocket = useCallback(sessionToken => {
-    const baseURL = oxyServices.getBaseURL();
-    const socket = io(`${baseURL}/auth-session`, {
-      transports: ['websocket', 'polling'],
-      reconnection: true,
-      reconnectionAttempts: 3,
-      reconnectionDelay: 1000
-    });
-    socketRef.current = socket;
-    socket.on('connect', () => {
-      debug.log('Auth socket connected');
-      socket.emit('join', sessionToken);
-    });
-    socket.on('auth_update', payload => {
-      debug.log('Auth update received:', payload);
-      if (payload.status === 'authorized' && payload.sessionId) {
-        cleanup();
-        // `sessionToken` was generated by this client and is in scope
-        // via the `sessionToken` arg — pass it through so the claim
-        // call can exchange it for the first access token.
-        handleAuthSuccess(payload.sessionId, sessionToken);
-      } 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 => {
-      debug.log('Socket connection error, falling back to polling:', err instanceof Error ? err.message : null);
-      socket.disconnect();
-      startPolling(sessionToken);
-    });
-  }, [oxyServices, handleAuthSuccess, cleanup]);
-
-  // Start polling for authorization.
-  //
-  // Idempotent: if a poll interval is already running this is a no-op, so the
-  // `connect_error` path (which also calls this) cannot stack a second
-  // interval on top of the always-on poll started in `generateAuthSession`.
-  const startPolling = useCallback(sessionToken => {
-    if (pollingIntervalRef.current) return;
-    pollingIntervalRef.current = setInterval(async () => {
-      if (isProcessingRef.current) return;
-      try {
-        const response = await oxyServices.makeRequest('GET', `/auth/session/status/${sessionToken}`, undefined, {
-          cache: false
-        });
-        if (response.authorized && response.sessionId) {
-          cleanup();
-          // Pass the original sessionToken through; the claim
-          // exchange needs it to mint the first access token.
-          handleAuthSuccess(response.sessionId, sessionToken);
-        } else if (response.status === 'cancelled') {
-          cleanup();
-          setError('Authorization was denied.');
-        } else if (response.status === 'expired') {
-          cleanup();
-          setError('Session expired. Please try again.');
-        }
-      } catch (err) {
-        debug.log('Auth polling error:', err);
-      }
-    }, POLLING_INTERVAL_MS);
-  }, [oxyServices, handleAuthSuccess, cleanup]);
-
-  // Generate a new auth session
-  const generateAuthSession = useCallback(async () => {
-    setIsLoading(true);
-    setError(null);
-    isProcessingRef.current = false;
-
-    // The cross-app device sign-in flow identifies the requesting app by its
-    // real registered OAuth client id (ApplicationCredential publicKey).
-    // Without it the API cannot resolve the consent identity, so we fail
-    // fast with a clear configuration error rather than creating a session
-    // the server would reject.
-    if (!clientId) {
-      setError('This app is not configured for sign-in (missing clientId).');
-      setIsLoading(false);
-      return;
-    }
-    try {
-      const sessionToken = generateSessionToken();
-      const expiresAt = Date.now() + AUTH_SESSION_EXPIRY_MS;
-      await oxyServices.makeRequest('POST', '/auth/session/create', {
-        sessionToken,
-        expiresAt,
-        clientId
-      }, {
-        cache: false
-      });
-      setAuthSession({
-        sessionToken,
-        expiresAt
-      });
-      setIsWaiting(true);
-      // Socket is the fast path; the poll is a transport-independent
-      // backstop that guarantees completion even if the socket connects
-      // but silently never delivers auth_update (RN transport /
-      // idle-timeout).
-      connectSocket(sessionToken);
-      startPolling(sessionToken);
-    } catch (err) {
-      setError((err instanceof Error ? err.message : null) || 'Failed to create auth session');
-    } finally {
-      setIsLoading(false);
-    }
-  }, [oxyServices, connectSocket, startPolling, clientId]);
-
-  // Generate a cryptographically random session token.
-  // 16 random bytes -> 32 hex chars (128 bits of entropy) — unguessable.
-  // crypto.getRandomValues is guaranteed available because importing
-  // @oxyhq/core installs a polyfill via expo-crypto on React Native.
-  const generateSessionToken = () => {
-    const bytes = new Uint8Array(16);
-    crypto.getRandomValues(bytes);
-    return Array.from(bytes, b => b.toString(16).padStart(2, '0')).join('');
-  };
-
-  // Build the QR code data
-  const getQRData = () => {
-    if (!authSession) return '';
-    return `oxyauth://${authSession.sessionToken}`;
-  };
-
-  // Open Oxy Auth approval page for this device-flow session.
-  const handleOpenAuthApproval = useCallback(async () => {
-    if (!authSession) return;
-    const baseURL = oxyServices.getBaseURL();
-    // Resolve auth web URL
-    let authWebUrl = oxyServices.config?.authWebUrl;
-    if (!authWebUrl) {
-      try {
-        const url = new URL(baseURL);
-        if (url.port === '3001') {
-          url.port = '3002';
-          authWebUrl = url.origin;
-        } else if (url.hostname.startsWith('api.')) {
-          url.hostname = `auth.${url.hostname.slice(4)}`;
-          authWebUrl = url.origin;
-        }
-      } catch {
-        authWebUrl = 'https://auth.oxy.so';
-      }
-    }
-    authWebUrl = authWebUrl || 'https://auth.oxy.so';
-    const webUrl = new URL('/authorize', authWebUrl);
-    webUrl.searchParams.set('token', authSession.sessionToken);
-    if (Platform.OS === 'web') {
-      // Open a separate approval window on web for the device-flow token.
-      const width = 500;
-      const height = 650;
-      const screenWidth = window.screen?.width ?? width;
-      const screenHeight = window.screen?.height ?? height;
-      const left = (screenWidth - width) / 2;
-      const top = (screenHeight - height) / 2;
-      window.open(webUrl.toString(), 'oxy-auth-approval', `width=${width},height=${height},left=${left},top=${top}`);
-    } else {
-      // Open in browser on native
-      Linking.openURL(webUrl.toString());
-    }
-  }, [authSession, oxyServices]);
-
-  // Refresh session
-  const handleRefresh = useCallback(() => {
-    cleanup();
-    generateAuthSession();
-  }, [generateAuthSession, cleanup]);
-
-  // Handle close
   const handleClose = useCallback(() => {
-    cleanup();
     hideSignInModal();
-  }, [cleanup]);
-
-  // Clean up on unmount
-  useEffect(() => {
-    return () => {
-      cleanup();
-    };
-  }, [cleanup]);
-  if (!visible) return null;
+  }, []);
+  const handleCreateAccount = useCallback(() => {
+    Linking.openURL(OXY_ACCOUNTS_WEB_URL);
+  }, []);
   return /*#__PURE__*/_jsx(Modal, {
-    visible: visible,
+    visible: true,
     transparent: true,
     animationType: "none",
     statusBarTranslucent: true,
@@ -366,15 +142,22 @@ const SignInModal = () => {
         onPress: handleClose,
         activeOpacity: 1
       }), /*#__PURE__*/_jsxs(Animated.View, {
-        style: [styles.content, contentStyle, {
-          paddingTop: insets.top + 20,
-          paddingBottom: insets.bottom + 20
-        }],
+        style: [styles.card, {
+          backgroundColor: theme.colors.card,
+          paddingTop: insets.top + 24,
+          paddingBottom: insets.bottom + 24
+        }, contentStyle],
         children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-          style: styles.closeButton,
+          style: [styles.closeButton, {
+            backgroundColor: theme.colors.backgroundSecondary
+          }],
           onPress: handleClose,
+          accessibilityRole: "button",
+          accessibilityLabel: "Close sign in",
           children: /*#__PURE__*/_jsx(Text, {
-            style: styles.closeButtonText,
+            style: [styles.closeButtonText, {
+              color: theme.colors.textSecondary
+            }],
             children: "\xD7"
           })
         }), /*#__PURE__*/_jsxs(View, {
@@ -385,11 +168,11 @@ const SignInModal = () => {
           }), /*#__PURE__*/_jsx(Text, {
             className: "text-foreground",
             style: styles.title,
-            children: "Sign in with Oxy"
+            children: "Sign in to Oxy"
           }), /*#__PURE__*/_jsx(Text, {
             className: "text-muted-foreground",
             style: styles.subtitle,
-            children: "Scan with Oxy Accounts app or use the button below"
+            children: "Continue with your Oxy identity to sign in securely"
           })]
         }), isLoading ? /*#__PURE__*/_jsxs(View, {
           style: styles.loadingContainer,
@@ -407,54 +190,54 @@ const SignInModal = () => {
             style: styles.errorText,
             children: error
           }), /*#__PURE__*/_jsx(Button, {
-            onPress: handleRefresh,
+            variant: "primary",
+            onPress: retry,
+            style: styles.primaryButton,
             children: "Try Again"
           })]
         }) : /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(View, {
-            style: [styles.qrContainer, {
-              backgroundColor: 'white'
-            }],
-            children: authSession ? /*#__PURE__*/_jsx(QRCode, {
-              value: getQRData(),
-              size: 200,
-              backgroundColor: "white",
-              color: "black"
-            }) : /*#__PURE__*/_jsx(Loading, {
-              size: "large"
-            })
-          }), /*#__PURE__*/_jsxs(View, {
-            style: styles.dividerContainer,
-            children: [/*#__PURE__*/_jsx(View, {
-              style: [styles.divider, {
-                backgroundColor: 'rgba(255,255,255,0.3)'
-              }]
-            }), /*#__PURE__*/_jsx(Text, {
-              style: [styles.dividerText, {
-                color: 'rgba(255,255,255,0.7)'
-              }],
-              children: "or"
-            }), /*#__PURE__*/_jsx(View, {
-              style: [styles.divider, {
-                backgroundColor: 'rgba(255,255,255,0.3)'
-              }]
-            })]
-          }), /*#__PURE__*/_jsx(Button, {
-            onPress: handleOpenAuthApproval,
+          children: [/*#__PURE__*/_jsx(Button, {
+            variant: "primary",
+            onPress: openAuthApproval,
             icon: /*#__PURE__*/_jsx(OxyLogo, {
               variant: "icon",
               size: 20,
-              fillColor: theme.colors.card
+              fillColor: theme.colors.primaryForeground,
+              style: styles.buttonIcon
             }),
-            children: "Open Oxy Auth"
+            style: styles.primaryButton,
+            children: "Continue with Oxy"
           }), isWaiting && /*#__PURE__*/_jsxs(View, {
             style: styles.statusContainer,
             children: [/*#__PURE__*/_jsx(Loading, {
-              size: "small"
+              size: "small",
+              style: styles.statusSpinner
             }), /*#__PURE__*/_jsx(Text, {
-              style: styles.statusText,
+              style: [styles.statusText, {
+                color: theme.colors.textSecondary
+              }],
               children: "Waiting for authorization..."
             })]
+          }), /*#__PURE__*/_jsx(View, {
+            style: styles.qrSection,
+            children: /*#__PURE__*/_jsx(AnotherDeviceQR, {
+              qrData: qrData
+            })
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.footer,
+          children: [/*#__PURE__*/_jsxs(Text, {
+            style: styles.footerText,
+            className: "text-muted-foreground",
+            children: ["Don't have an Oxy account?", ' ']
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: handleCreateAccount,
+            accessibilityRole: "link",
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.footerLink,
+              className: "text-primary",
+              children: "Create one"
+            })
           })]
         })]
       })]
@@ -467,11 +250,12 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center'
   },
-  content: {
+  card: {
     width: '100%',
     maxWidth: 400,
     alignItems: 'center',
-    paddingHorizontal: 24
+    paddingHorizontal: 24,
+    borderRadius: 24
   },
   closeButton: {
     position: 'absolute',
@@ -480,58 +264,52 @@ const styles = StyleSheet.create({
     width: 40,
     height: 40,
     borderRadius: 20,
-    backgroundColor: 'rgba(255, 255, 255, 0.1)',
     justifyContent: 'center',
     alignItems: 'center',
     zIndex: 10
   },
   closeButtonText: {
-    color: 'white',
     fontSize: 28,
     fontWeight: '300',
     lineHeight: 32
   },
   header: {
     alignItems: 'center',
-    marginBottom: 32
+    marginBottom: 28
   },
   title: {
-    fontSize: 28,
+    fontSize: 26,
     fontWeight: 'bold',
-    marginTop: 16
+    marginTop: 16,
+    textAlign: 'center'
   },
   subtitle: {
     fontSize: 15,
     marginTop: 8,
     textAlign: 'center'
   },
-  qrContainer: {
-    padding: 20,
-    borderRadius: 16
-  },
-  dividerContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginVertical: 24,
-    width: '100%'
-  },
-  divider: {
-    flex: 1,
-    height: 1
+  primaryButton: {
+    width: '100%',
+    borderRadius: 12
   },
-  dividerText: {
-    marginHorizontal: 16,
-    fontSize: 14
+  buttonIcon: {
+    marginRight: 10
   },
   statusContainer: {
     flexDirection: 'row',
     alignItems: 'center',
-    marginTop: 24
+    marginTop: 20
+  },
+  statusSpinner: {
+    flex: undefined
   },
   statusText: {
     marginLeft: 8,
-    fontSize: 14,
-    color: 'rgba(255, 255, 255, 0.7)'
+    fontSize: 14
+  },
+  qrSection: {
+    width: '100%',
+    marginTop: 24
   },
   loadingContainer: {
     alignItems: 'center',
@@ -550,6 +328,19 @@ const styles = StyleSheet.create({
     fontSize: 14,
     textAlign: 'center',
     marginBottom: 16
+  },
+  footer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    marginTop: 28
+  },
+  footerText: {
+    fontSize: 14
+  },
+  footerLink: {
+    fontSize: 14,
+    fontWeight: '600'
   }
 });
 export default SignInModal;