@oxyhq/services 10.4.0 → 11.0.0

package/lib/commonjs/ui/screens/OxyAuthScreen.js

@@ -4,98 +4,36 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
 var _reactNative = require("react-native");
-var _socket = _interopRequireDefault(require("socket.io-client"));
 var _theme = require("@oxyhq/bloom/theme");
 var _button = require("@oxyhq/bloom/button");
 var _loading = require("@oxyhq/bloom/loading");
 var _OxyContext = require("../context/OxyContext.js");
-var _reactNativeQrcodeSvg = _interopRequireDefault(require("react-native-qrcode-svg"));
 var _OxyLogo = _interopRequireDefault(require("../components/OxyLogo.js"));
-var _core = require("@oxyhq/core");
-var _deviceFlowSignIn = require("../../utils/deviceFlowSignIn.js");
+var _AnotherDeviceQR = _interopRequireDefault(require("../components/AnotherDeviceQR.js"));
+var _useOxyAuthSession = require("../hooks/useOxyAuthSession.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
- * OxyAuthScreen - Sign in with Oxy
- * 
- * This screen is used by OTHER apps in the Oxy ecosystem to authenticate users.
- * It presents two options:
- * 1. Scan QR code with Oxy Accounts app
- * 2. Open the Oxy Auth web flow
- * 
- * 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.
+ * OxyAuthScreen - Sign in with Oxy (native bottom-sheet container)
+ *
+ * Used by OTHER apps in the Oxy ecosystem to authenticate users. The primary
+ * action is the one-tap "Continue with Oxy" approval flow (opens the Oxy Auth
+ * web flow with a deep-link `redirect_uri` so the app→app return path can
+ * complete the sign-in). The QR code is demoted to a collapsed "Sign in on
+ * another device" disclosure — you can't scan your own screen.
+ *
+ * ALL of the auth-session machinery (session-token creation, QR data, socket +
+ * polling, the native deep-link return path, waiting/error/retry state, the
+ * open-auth handler, and cleanup) lives in the shared `useOxyAuthSession` hook,
+ * which the web `SignInModal` also consumes — neither container re-implements
+ * the transport. The Oxy Accounts app is where users manage their cryptographic
+ * identity; this screen should NOT be used within the Accounts app itself.
  */
 
-const debug = (0, _core.createDebugLogger)('OxyAuthScreen');
-const OXY_ACCOUNTS_WEB_URL = 'https://accounts.oxy.so';
-const OXY_AUTH_WEB_URL = 'https://auth.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;
-const resolveAuthWebBaseUrl = (baseURL, authWebUrl) => {
-  if (authWebUrl) {
-    return authWebUrl;
-  }
-  try {
-    const url = new URL(baseURL);
-    if (url.port === '3001') {
-      url.port = '3002';
-      return url.origin;
-    }
-    if (url.hostname.startsWith('api.')) {
-      url.hostname = `auth.${url.hostname.slice(4)}`;
-      return url.origin;
-    }
-  } catch {
-    // Ignore parsing errors, fall back to default.
-  }
-  return OXY_AUTH_WEB_URL;
-};
-const resolveAuthRedirectUri = async authRedirectUri => {
-  if (authRedirectUri) {
-    return authRedirectUri;
-  }
-  try {
-    const initialUrl = await _reactNative.Linking.getInitialURL();
-    if (!initialUrl) {
-      return null;
-    }
-    const parsed = new URL(initialUrl);
-    parsed.search = '';
-    parsed.hash = '';
-    return parsed.toString();
-  } catch {
-    return null;
-  }
-};
-const getRedirectParams = url => {
-  try {
-    const parsed = new URL(url);
-    const sessionId = parsed.searchParams.get('session_id') ?? undefined;
-    const error = parsed.searchParams.get('error') ?? undefined;
-    if (!sessionId && !error) {
-      return null;
-    }
-    return {
-      sessionId,
-      error
-    };
-  } catch {
-    return null;
-  }
-};
 const OxyAuthScreen = ({
-  navigate,
   goBack,
-  onAuthenticated,
-  theme
+  onAuthenticated
 }) => {
   const bloomTheme = (0, _theme.useTheme)();
   const {
@@ -103,307 +41,16 @@ const OxyAuthScreen = ({
     switchSession,
     clientId
   } = (0, _OxyContext.useOxy)();
-  const [authSession, setAuthSession] = (0, _react.useState)(null);
-  const [isLoading, setIsLoading] = (0, _react.useState)(true);
-  const [error, setError] = (0, _react.useState)(null);
-  const [isWaiting, setIsWaiting] = (0, _react.useState)(false);
-  const [connectionType, setConnectionType] = (0, _react.useState)('socket');
-  const socketRef = (0, _react.useRef)(null);
-  const pollingIntervalRef = (0, _react.useRef)(null);
-  const isProcessingRef = (0, _react.useRef)(false);
-  const linkingHandledRef = (0, _react.useRef)(false);
-
-  // Handle successful authorization.
-  //
-  // The auth-session socket / poll (or deep-link return) hands us the
-  // authorized `sessionId`. Before any session-management code can touch it we
-  // MUST first exchange the secret `sessionToken` (held only by this client,
-  // generated for THIS flow) for the first access token via
-  // `claimSessionByToken` — the device-flow equivalent of OAuth's
-  // code-for-token exchange (RFC 8628 §3.4).
-  //
-  // Without that exchange the SDK has no bearer token — the session is
-  // authorized server-side but the app never becomes authenticated and the
-  // sheet sits "Waiting for authorization..." forever. Once
-  // `claimSessionByToken` plants the tokens in the HttpService, the rest of the
-  // session wiring flows through the normal `switchSession` path. This mirrors
-  // `SignInModal`'s web flow exactly.
-  const handleAuthSuccess = (0, _react.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. The claim step is what the native screen was
-      // previously missing — see `completeDeviceFlowSignIn`. `switchSession`
-      // is always provided by the context here; the helper requires it.
-      if (!switchSession) {
-        throw new Error('Session management unavailable');
-      }
-      const user = await (0, _deviceFlowSignIn.completeDeviceFlowSignIn)({
-        oxyServices,
-        sessionId,
-        sessionToken,
-        switchSession
-      });
-      if (onAuthenticated) {
-        onAuthenticated(user);
-      }
-    } 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, onAuthenticated]);
-
-  // Connect to socket for real-time updates
-  const connectSocket = (0, _react.useCallback)(sessionToken => {
-    const baseURL = oxyServices.getBaseURL();
-
-    // Connect to the auth-session namespace (no authentication required)
-    const socket = (0, _socket.default)(`${baseURL}/auth-session`, {
-      transports: ['websocket', 'polling'],
-      reconnection: true,
-      reconnectionAttempts: 3,
-      reconnectionDelay: 1000
-    });
-    socketRef.current = socket;
-    socket.on('connect', () => {
-      debug.log('Auth socket connected');
-      // Join the room for this session token
-      socket.emit('join', sessionToken);
-      setConnectionType('socket');
-    });
-    socket.on('joined', () => {
-      debug.log('Joined auth session room');
-    });
-    socket.on('auth_update', payload => {
-      debug.log('Auth update received:', payload);
-      if (payload.status === 'authorized' && payload.sessionId) {
-        cleanup();
-        // `sessionToken` is this flow's secret credential (in closure) — pass
-        // it through so `handleAuthSuccess` can claim 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);
-      // Realtime transport errored — reflect the honest connection state. The
-      // poll is already running (started unconditionally in
-      // `generateAuthSession`), so `startPolling` here is a no-op backstop.
-      socket.disconnect();
-      setConnectionType('polling');
-      startPolling(sessionToken);
-    });
-    socket.on('disconnect', () => {
-      debug.log('Auth socket disconnected');
-    });
-  }, [oxyServices, handleAuthSuccess]);
-
-  // 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 = (0, _react.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 (in closure) 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) {
-        // Silent fail for polling - will retry
-        debug.log('Auth polling error:', err);
-      }
-    }, POLLING_INTERVAL_MS);
-  }, [oxyServices, handleAuthSuccess]);
-
-  // Cleanup socket and polling
-  const cleanup = (0, _react.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 = (0, _react.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 {
-      // Generate a unique session token for this auth request
-      const sessionToken = generateSessionToken();
-      const expiresAt = Date.now() + AUTH_SESSION_EXPIRY_MS;
-
-      // Register the auth session with the server
-      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 random session token
-  const generateSessionToken = () => {
-    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-    let result = '';
-    for (let i = 0; i < 32; i++) {
-      result += chars.charAt(Math.floor(Math.random() * chars.length));
-    }
-    return result;
-  };
-
-  // Clean up on unmount
-  (0, _react.useEffect)(() => {
-    return () => {
-      cleanup();
-    };
-  }, [cleanup]);
-
-  // Initialize auth session
-  (0, _react.useEffect)(() => {
-    generateAuthSession();
-  }, []);
-
-  // Check if session expired
-  (0, _react.useEffect)(() => {
-    if (authSession && Date.now() > authSession.expiresAt) {
-      cleanup();
-      setAuthSession(null);
-      setError('Session expired. Please try again.');
-    }
-  }, [authSession, cleanup]);
-
-  // Build the QR code data
-  const getQRData = () => {
-    if (!authSession) return '';
-
-    // Format: oxyauth://{sessionToken}
-    return `oxyauth://${authSession.sessionToken}`;
-  };
-
-  // Open Oxy Auth web flow
-  const handleOpenAuth = (0, _react.useCallback)(async () => {
-    if (!authSession) return;
-    const authBaseUrl = resolveAuthWebBaseUrl(oxyServices.getBaseURL(), oxyServices.config?.authWebUrl);
-    const webUrl = new URL('/authorize', authBaseUrl);
-    webUrl.searchParams.set('token', authSession.sessionToken);
-    const redirectUri = await resolveAuthRedirectUri(oxyServices.config?.authRedirectUri);
-    if (redirectUri) {
-      webUrl.searchParams.set('redirect_uri', redirectUri);
-    }
-    try {
-      await _reactNative.Linking.openURL(webUrl.toString());
-    } catch (err) {
-      setError('Unable to open Oxy Auth. Please try again or use the QR code.');
-    }
-  }, [authSession, oxyServices]);
-
-  // Refresh session
-  const handleRefresh = (0, _react.useCallback)(() => {
-    cleanup();
-    generateAuthSession();
-  }, [generateAuthSession, cleanup]);
-  const handleAuthRedirect = (0, _react.useCallback)(url => {
-    const params = getRedirectParams(url);
-    if (!params) {
-      return;
-    }
-    if (params.error) {
-      cleanup();
-      setError('Authorization was denied.');
-      return;
-    }
-    if (params.sessionId) {
-      // The deep-link return carries only `session_id` — the secret
-      // `sessionToken` for this flow lives in component state (generated in
-      // `generateAuthSession`). Without it we cannot claim the first access
-      // token, so the flow would 401 in `handleAuthSuccess`. If it is somehow
-      // unavailable, fall through to the socket/poll path (which carries the
-      // token in closure) rather than attempting an unauthenticated claim.
-      const flowSessionToken = authSession?.sessionToken;
-      if (!flowSessionToken) {
-        return;
-      }
-      cleanup();
-      handleAuthSuccess(params.sessionId, flowSessionToken);
-    }
-  }, [authSession, cleanup, handleAuthSuccess]);
-  (0, _react.useEffect)(() => {
-    if (_reactNative.Platform.OS === 'web') {
-      return;
-    }
-    const subscription = _reactNative.Linking.addEventListener('url', ({
-      url
-    }) => {
-      linkingHandledRef.current = true;
-      handleAuthRedirect(url);
-    });
-    _reactNative.Linking.getInitialURL().then(url => {
-      if (url && !linkingHandledRef.current) {
-        handleAuthRedirect(url);
-      }
-    }).catch(() => {
-      // Ignore linking errors; auth will still resolve via socket/polling.
-    });
-    return () => {
-      subscription.remove();
-    };
-  }, [handleAuthRedirect]);
+  const {
+    qrData,
+    isLoading,
+    error,
+    isWaiting,
+    openAuthApproval,
+    retry
+  } = (0, _useOxyAuthSession.useOxyAuthSession)(oxyServices, clientId, switchSession, {
+    onSignedIn: onAuthenticated
+  });
   if (isLoading) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: [styles.container, {
@@ -429,11 +76,8 @@ const OxyAuthScreen = ({
         children: error
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
         variant: "primary",
-        onPress: handleRefresh,
-        style: {
-          width: '100%',
-          borderRadius: 12
-        },
+        onPress: retry,
+        style: styles.primaryButton,
         children: "Try Again"
       })]
     });
@@ -450,84 +94,57 @@ const OxyAuthScreen = ({
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: styles.title,
         className: "text-foreground",
-        children: "Sign in with Oxy"
+        children: "Sign in to Oxy"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: styles.subtitle,
         className: "text-muted-foreground",
-        children: "Use your Oxy identity to sign in securely"
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.qrContainer,
-      className: "bg-secondary border-border",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.qrWrapper,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeQrcodeSvg.default, {
-          value: getQRData(),
-          size: 200,
-          backgroundColor: "white",
-          color: "black"
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.qrHint,
-        className: "text-muted-foreground",
-        children: "Scan with Oxy Accounts app"
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.dividerContainer,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.divider,
-        className: "bg-border"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.dividerText,
-        className: "text-muted-foreground",
-        children: "or"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.divider,
-        className: "bg-border"
+        children: "Continue with your Oxy identity to sign in securely"
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
       variant: "primary",
-      onPress: handleOpenAuth,
+      onPress: openAuthApproval,
       icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyLogo.default, {
         variant: "icon",
         size: 20,
-        fillColor: bloomTheme.colors.card,
+        fillColor: bloomTheme.colors.primaryForeground,
         style: styles.buttonIcon
       }),
-      style: {
-        width: '100%',
-        borderRadius: 12
-      },
-      children: "Open Oxy Auth"
+      style: styles.primaryButton,
+      children: "Continue with Oxy"
     }), isWaiting && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.statusContainer,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_loading.Loading, {
         size: "small",
-        style: {
-          flex: undefined
-        }
+        style: styles.statusSpinner
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: styles.statusText,
         className: "text-muted-foreground",
         children: "Waiting for authorization..."
       })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.qrSection,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AnotherDeviceQR.default, {
+        qrData: qrData
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.footer,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
         style: styles.footerText,
         className: "text-muted-foreground",
-        children: ["Don't have Oxy Accounts?", ' ']
+        children: ["Don't have an Oxy account?", ' ']
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        onPress: () => _reactNative.Linking.openURL(OXY_ACCOUNTS_WEB_URL),
+        onPress: () => _reactNative.Linking.openURL(_useOxyAuthSession.OXY_ACCOUNTS_WEB_URL),
+        accessibilityRole: "link",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.footerLink,
           className: "text-primary",
-          children: "Get it here"
+          children: "Create one"
         })
       })]
     }), goBack && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
       style: styles.cancelButton,
       onPress: goBack,
+      accessibilityRole: "button",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: styles.cancelText,
         className: "text-muted-foreground",
@@ -545,62 +162,47 @@ const styles = _reactNative.StyleSheet.create({
   },
   header: {
     alignItems: 'center',
-    marginBottom: 32
+    marginBottom: 28
   },
   title: {
     fontSize: 24,
     fontWeight: 'bold',
-    marginTop: 16
+    marginTop: 16,
+    textAlign: 'center'
   },
   subtitle: {
     fontSize: 14,
     marginTop: 8,
     textAlign: 'center'
   },
-  qrContainer: {
-    padding: 24,
-    borderRadius: 16,
-    borderWidth: 1,
-    alignItems: 'center'
-  },
-  qrWrapper: {
-    padding: 16,
-    backgroundColor: 'white',
+  primaryButton: {
+    width: '100%',
     borderRadius: 12
   },
-  qrHint: {
-    marginTop: 16,
-    fontSize: 12
-  },
-  dividerContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginVertical: 24,
-    width: '100%'
-  },
-  divider: {
-    flex: 1,
-    height: 1
-  },
-  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
   },
+  qrSection: {
+    width: '100%',
+    marginTop: 24
+  },
   footer: {
     flexDirection: 'row',
-    marginTop: 32
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    marginTop: 28
   },
   footerText: {
     fontSize: 14