@oxyhq/services 6.9.46 → 6.10.2

package/src/ui/components/SignInModal.tsx

@@ -19,7 +19,6 @@ import {
     Dimensions,
     Platform,
     Linking,
-    useWindowDimensions,
 } from 'react-native';
 import Animated, {
     useSharedValue,
@@ -33,7 +32,6 @@ 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 { BottomSheet, type BottomSheetRef } from '@oxyhq/bloom/bottom-sheet';
 import { useOxy } from '../context/OxyContext';
 import OxyLogo from './OxyLogo';
 import { createDebugLogger } from '@oxyhq/core';
@@ -86,11 +84,8 @@ export const subscribeToSignInModal = (listener: (visible: boolean) => void): ((
     return () => visibilityListeners.delete(listener);
 };
 
-type ModalView = 'main' | 'qr';
-
 const SignInModal: React.FC = () => {
     const [visible, setVisible] = useState(false);
-    const [view, setView] = useState<ModalView>('main');
     const [authSession, setAuthSession] = useState<AuthSession | null>(null);
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState<string | null>(null);
@@ -98,14 +93,11 @@ const SignInModal: React.FC = () => {
 
     const insets = useSafeAreaInsets();
     const theme = useTheme();
-    const { width: windowWidth } = useWindowDimensions();
-    const isWide = windowWidth >= 768;
     const { oxyServices, switchSession } = useOxy();
 
     const socketRef = useRef<Socket | null>(null);
     const pollingIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
     const isProcessingRef = useRef(false);
-    const sheetRef = useRef<BottomSheetRef>(null);
 
     // Animation values
     const opacity = useSharedValue(0);
@@ -125,15 +117,12 @@ const SignInModal: React.FC = () => {
         if (visible) {
             opacity.value = withTiming(1, { duration: 250 });
             scale.value = withTiming(1, { duration: 250 });
-            setView('main');
             generateAuthSession();
-            if (!isWide) sheetRef.current?.present();
         } else {
             opacity.value = withTiming(0, { duration: 200 });
             scale.value = withTiming(0.9, { duration: 200 });
-            if (!isWide) sheetRef.current?.dismiss();
         }
-    }, [visible, isWide]);
+    }, [visible]);
 
     const backdropStyle = useAnimatedStyle(() => ({
         opacity: opacity.value,
@@ -144,27 +133,37 @@ const SignInModal: React.FC = () => {
         transform: [{ scale: scale.value }],
     }));
 
-    // Handle successful authorization
-    const handleAuthSuccess = useCallback(async (sessionId: string) => {
+    // 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 every
+    // subsequent call (including `switchSession` -> `getTokenBySession`)
+    // would 401 against the C1-hardened API. 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: string, sessionToken: string) => {
         if (isProcessingRef.current) return;
         isProcessingRef.current = true;
 
-        // Dismiss the in-app browser (if any) so the user returns to the app.
-        if (Platform.OS !== 'web') {
-            try {
-                const WebBrowser = await import('expo-web-browser');
-                WebBrowser.dismissBrowser();
-            } catch {
-                /* expo-web-browser not available */
-            }
-        }
-
         try {
+            // Plant the bearer + refresh tokens for this newly-authorized
+            // session. Single-use — replay attempts on this sessionToken
+            // are rejected by the API.
+            await oxyServices.claimSessionByToken(sessionToken);
+
+            // Now the SDK has a bearer token, the normal session
+            // management path can hydrate state from the sessionId.
             if (switchSession) {
                 await switchSession(sessionId);
-            } else {
-                await oxyServices.getTokenBySession(sessionId);
             }
+
             hideSignInModal();
         } catch (err) {
             debug.error('Error completing auth:', err);
@@ -190,11 +189,6 @@ const SignInModal: React.FC = () => {
 
     // Connect to socket for real-time updates
     const connectSocket = useCallback((sessionToken: string) => {
-        // Disconnect any pre-existing socket to avoid duplicates on re-renders.
-        if (socketRef.current) {
-            socketRef.current.disconnect();
-            socketRef.current = null;
-        }
         const baseURL = oxyServices.getBaseURL();
 
         const socket = io(`${baseURL}/auth-session`, {
@@ -216,7 +210,10 @@ const SignInModal: React.FC = () => {
 
             if (payload.status === 'authorized' && payload.sessionId) {
                 cleanup();
-                handleAuthSuccess(payload.sessionId);
+                // `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.');
@@ -247,7 +244,9 @@ const SignInModal: React.FC = () => {
 
                 if (response.authorized && response.sessionId) {
                     cleanup();
-                    handleAuthSuccess(response.sessionId);
+                    // 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.');
@@ -287,14 +286,14 @@ const SignInModal: React.FC = () => {
         }
     }, [oxyServices, connectSocket]);
 
-    // Generate a random session token
+    // 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 = (): string => {
-        const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-        let result = '';
-        for (let i = 0; i < 32; i++) {
-            result += chars.charAt(Math.floor(Math.random() * chars.length));
-        }
-        return result;
+        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
@@ -344,17 +343,8 @@ const SignInModal: React.FC = () => {
                 `width=${width},height=${height},left=${left},top=${top},popup=1`
             );
         } else {
-            // Open in in-app browser on native via expo-web-browser. Falls back
-            // to system browser if expo-web-browser is not available.
-            try {
-                const WebBrowser = await import('expo-web-browser');
-                await WebBrowser.openBrowserAsync(webUrl.toString(), {
-                    presentationStyle: WebBrowser.WebBrowserPresentationStyle.PAGE_SHEET,
-                    dismissButtonStyle: 'close',
-                });
-            } catch {
-                Linking.openURL(webUrl.toString());
-            }
+            // Open in browser on native
+            Linking.openURL(webUrl.toString());
         }
     }, [authSession, oxyServices]);
 
@@ -377,24 +367,30 @@ const SignInModal: React.FC = () => {
         };
     }, [cleanup]);
 
-    if (!visible && isWide) return null;
-
-    const innerContent = (
-        <>
-            {!isWide && view === 'qr' ? (
-                <TouchableOpacity style={styles.backButton} onPress={() => setView('main')} accessibilityLabel="Back">
-                    <Text style={styles.backButtonText}>‹</Text>
-                </TouchableOpacity>
-            ) : null}
-            {isWide ? (
-                <TouchableOpacity style={styles.closeButton} onPress={handleClose} accessibilityLabel="Close">
-                    <Text style={styles.closeButtonText}>×</Text>
-                </TouchableOpacity>
-            ) : null}
-
-            {isLoading ? (
+    if (!visible) return null;
+
+    return (
+        <Modal visible={visible} transparent animationType="none" statusBarTranslucent onRequestClose={handleClose}>
+            <Animated.View style={[styles.backdrop, { backgroundColor: theme.colors.overlay }, backdropStyle]}>
+                <TouchableOpacity style={StyleSheet.absoluteFill} onPress={handleClose} activeOpacity={1} />
+
+                <Animated.View style={[styles.content, contentStyle, { paddingTop: insets.top + 20, paddingBottom: insets.bottom + 20 }]}>
+                    {/* Close button */}
+                    <TouchableOpacity style={styles.closeButton} onPress={handleClose}>
+                        <Text style={styles.closeButtonText}>×</Text>
+                    </TouchableOpacity>
+
+                    {/* Header */}
+                    <View style={styles.header}>
+                        <OxyLogo variant="icon" size={56} />
+                        <Text className="text-foreground" style={styles.title}>Sign in with Oxy</Text>
+                        <Text className="text-muted-foreground" style={styles.subtitle}>
+                            Scan with Oxy Accounts app or use the button below
+                        </Text>
+                    </View>
+
+                    {isLoading ? (
                         <View style={styles.loadingContainer}>
-                            <OxyLogo variant="icon" size={56} />
                             <Loading size="large" />
                             <Text className="text-muted-foreground" style={styles.loadingText}>
                                 Preparing sign in...
@@ -402,20 +398,12 @@ const SignInModal: React.FC = () => {
                         </View>
                     ) : error ? (
                         <View style={styles.errorContainer}>
-                            <OxyLogo variant="icon" size={56} />
                             <Text className="text-destructive" style={styles.errorText}>{error}</Text>
                             <Button onPress={handleRefresh}>Try Again</Button>
                         </View>
-                    ) : isWide ? (
+                    ) : (
                         <>
-                            <View style={styles.header}>
-                                <OxyLogo variant="icon" size={56} />
-                                <Text style={[styles.title, { color: theme.colors.text }]}>Sign in with Oxy</Text>
-                                <Text style={[styles.subtitle, { color: theme.colors.textSecondary }]}>
-                                    Scan with Oxy Accounts app or use the button below
-                                </Text>
-                            </View>
-
+                            {/* QR Code */}
                             <View style={[styles.qrContainer, { backgroundColor: 'white' }]}>
                                 {authSession ? (
                                     <QRCode
@@ -429,12 +417,14 @@ const SignInModal: React.FC = () => {
                                 )}
                             </View>
 
+                            {/* Divider */}
                             <View style={styles.dividerContainer}>
-                                <View style={[styles.divider, { backgroundColor: theme.colors.border }]} />
-                                <Text style={[styles.dividerText, { color: theme.colors.textTertiary }]}>or</Text>
-                                <View style={[styles.divider, { backgroundColor: theme.colors.border }]} />
+                                <View style={[styles.divider, { backgroundColor: 'rgba(255,255,255,0.3)' }]} />
+                                <Text style={[styles.dividerText, { color: 'rgba(255,255,255,0.7)' }]}>or</Text>
+                                <View style={[styles.divider, { backgroundColor: 'rgba(255,255,255,0.3)' }]} />
                             </View>
 
+                            {/* Open Auth Popup Button */}
                             <Button
                                 onPress={handleOpenAuthPopup}
                                 icon={<OxyLogo variant="icon" size={20} fillColor={theme.colors.card} />}
@@ -442,94 +432,17 @@ const SignInModal: React.FC = () => {
                                 Open Oxy Auth
                             </Button>
 
+                            {/* Status */}
                             {isWaiting && (
                                 <View style={styles.statusContainer}>
                                     <Loading size="small" />
-                                    <Text style={[styles.statusText, { color: theme.colors.textSecondary }]}>
-                                        Waiting for authorization…
-                                    </Text>
-                                </View>
-                            )}
-                        </>
-                    ) : view === 'main' ? (
-                        <>
-                            <View style={styles.header}>
-                                <OxyLogo variant="icon" size={56} />
-                                <Text style={[styles.title, { color: theme.colors.text }]}>Sign in with Oxy</Text>
-                                <Text style={[styles.subtitle, { color: theme.colors.textSecondary }]}>
-                                    One account for the whole Oxy ecosystem. Continue to authorize this device.
-                                </Text>
-                            </View>
-
-                            <View style={styles.actions}>
-                                <Button
-                                    onPress={handleOpenAuthPopup}
-                                    icon={<OxyLogo variant="icon" size={20} fillColor={theme.colors.card} />}
-                                >
-                                    Continue with Oxy
-                                </Button>
-
-                                <Button variant="ghost" onPress={() => setView('qr')}>
-                                    Scan QR code instead
-                                </Button>
-                            </View>
-                        </>
-                    ) : (
-                        <>
-                            <View style={styles.header}>
-                                <Text style={[styles.title, { color: theme.colors.text }]}>Scan QR</Text>
-                                <Text style={[styles.subtitle, { color: theme.colors.textSecondary }]}>
-                                    Open the Oxy Accounts app on another device and scan this code.
-                                </Text>
-                            </View>
-
-                            <View style={[styles.qrContainer, { backgroundColor: 'white' }]}>
-                                {authSession ? (
-                                    <QRCode
-                                        value={getQRData()}
-                                        size={220}
-                                        backgroundColor="white"
-                                        color="black"
-                                    />
-                                ) : (
-                                    <Loading size="large" />
-                                )}
-                            </View>
-
-                            {isWaiting && (
-                                <View style={styles.statusContainer}>
-                                    <Loading size="small" />
-                                    <Text style={[styles.statusText, { color: theme.colors.textSecondary }]}>
-                                        Waiting for authorization…
+                                    <Text style={styles.statusText}>
+                                        Waiting for authorization...
                                     </Text>
                                 </View>
                             )}
                         </>
                     )}
-        </>
-    );
-
-    if (!isWide) {
-        return (
-            <BottomSheet
-                ref={sheetRef}
-                onDismiss={handleClose}
-                enablePanDownToClose
-            >
-                <View style={[styles.sheetContent, { paddingBottom: insets.bottom + 24 }]}>
-                    {innerContent}
-                </View>
-            </BottomSheet>
-        );
-    }
-
-    return (
-        <Modal visible={visible} transparent animationType="none" statusBarTranslucent onRequestClose={handleClose}>
-            <Animated.View style={[styles.backdrop, { backgroundColor: theme.colors.overlay }, backdropStyle]}>
-                <TouchableOpacity style={StyleSheet.absoluteFill} onPress={handleClose} activeOpacity={1} />
-
-                <Animated.View style={[styles.content, contentStyle, { paddingTop: insets.top + 20, paddingBottom: insets.bottom + 20 }]}>
-                    {innerContent}
                 </Animated.View>
             </Animated.View>
         </Modal>
@@ -566,51 +479,19 @@ const styles = StyleSheet.create({
         fontWeight: '300',
         lineHeight: 32,
     },
-    backButton: {
-        position: 'absolute',
-        top: 16,
-        left: 16,
-        width: 40,
-        height: 40,
-        borderRadius: 20,
-        backgroundColor: 'rgba(255, 255, 255, 0.1)',
-        justifyContent: 'center',
-        alignItems: 'center',
-        zIndex: 10,
-    },
-    backButtonText: {
-        color: 'white',
-        fontSize: 32,
-        fontWeight: '300',
-        lineHeight: 32,
-        marginRight: 2,
-    },
-    actions: {
-        width: '100%',
-        gap: 12,
-    },
-    sheetContent: {
-        paddingHorizontal: 24,
-        paddingTop: 48,
-        paddingBottom: 32,
-        alignItems: 'center',
-        gap: 24,
-        width: '100%',
-    },
     header: {
         alignItems: 'center',
-        gap: 8,
+        marginBottom: 32,
     },
     title: {
-        fontSize: 24,
-        fontWeight: '700',
-        marginTop: 8,
+        fontSize: 28,
+        fontWeight: 'bold',
+        marginTop: 16,
     },
     subtitle: {
-        fontSize: 14,
+        fontSize: 15,
+        marginTop: 8,
         textAlign: 'center',
-        lineHeight: 20,
-        maxWidth: 320,
     },
     qrContainer: {
         padding: 20,

package/src/ui/components/StepBasedScreen.tsx

@@ -14,7 +14,6 @@ import Animated, {
 import { useTheme } from '@oxyhq/bloom/theme';
 import type { ThemeColors } from '@oxyhq/bloom/theme';
 import { createAuthStyles } from '../styles';
-import { fontFamilies } from '../styles/fonts';
 import type { BaseScreenProps, StepController } from '../types/navigation';
 import type { RouteName } from '../types/navigation';
 import { screenContentStyle } from '../constants/spacing';
@@ -163,7 +162,6 @@ const StepBasedScreen: React.FC<StepBasedScreenProps> = ({
             marginBottom: 24,
         },
         modernTitle: {
-            fontFamily: fontFamilies.interBold,
             fontWeight: Platform.OS === 'web' ? 'bold' as const : undefined,
             fontSize: 42,
             lineHeight: 50.4, // 42 * 1.2

package/src/ui/components/TextField/Addons/Outline.tsx

@@ -7,7 +7,7 @@ import {
   type ViewStyle,
 } from 'react-native';
 
-import type { TextInputLabelProp } from '../types';
+import type { TextFieldLabelProp } from '../types';
 
 type OutlineProps = {
   isV3: boolean;
@@ -17,7 +17,7 @@ type OutlineProps = {
   focused?: boolean;
   outlineColor?: string;
   roundness?: number;
-  label?: TextInputLabelProp;
+  label?: TextFieldLabelProp;
   style?: StyleProp<ViewStyle>;
 };
 

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

@@ -26,7 +26,7 @@ import {
   MD3_MIN_HEIGHT,
   MD3_OUTLINED_INPUT_OFFSET,
 } from './constants';
-import type { TextInputLabelProp } from './types';
+import type { TextFieldLabelProp } from './types';
 import type { InternalTheme } from "../types";
 
 type PaddingProps = {
@@ -37,7 +37,7 @@ type PaddingProps = {
   topPosition: number;
   fontSize: number;
   lineHeight?: number;
-  label?: TextInputLabelProp | null;
+  label?: TextFieldLabelProp | null;
   scale: number;
   offset: number;
   isAndroid: boolean;

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

@@ -15,7 +15,6 @@ import type {
 import type { $Omit, InternalTheme, ThemeProp } from '../types';
 
 export type TextFieldLabelProp = string | React.ReactElement;
-export type TextInputLabelProp = TextFieldLabelProp; // Alias for backward compatibility
 
 type TextInputProps = React.ComponentPropsWithRef<typeof NativeTextInput> & {
   mode?: 'flat' | 'outlined';

package/src/ui/components/TextField.tsx

@@ -185,7 +185,7 @@ interface CompoundedComponent
     Props & React.RefAttributes<TextFieldHandles>
   > {
   Icon: React.FunctionComponent<TextFieldIconProps>;
-  Affix: React.FunctionComponent<Partial<TextFieldAffixProps>>;
+  Affix: React.FunctionComponent<TextFieldAffixProps>;
 }
 
 type TextFieldHandles = Pick<
@@ -568,7 +568,6 @@ const TextField = forwardRef<TextFieldHandles, Props>(
 TextField.Icon = TextFieldIcon;
 
 // @component ./TextField/Adornment/TextFieldAffix.tsx
-// @ts-ignore Types of property 'theme' are incompatible.
 TextField.Affix = TextFieldAffix;
 
 export default TextField;

package/src/ui/components/TouchableRipple/TouchableRipple.native.tsx

@@ -136,7 +136,7 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
   },
   underlay: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     zIndex: 2,
   },
 });

package/src/ui/components/feedback/feedbackStyles.ts

@@ -1,6 +1,5 @@
 import { StyleSheet, Platform, Dimensions } from 'react-native';
 import { screenContentStyle } from '../../constants/spacing';
-import { fontFamilies } from '../../styles/fonts';
 import type { FeedbackColors } from './types';
 
 export const createFeedbackStyles = (colors: FeedbackColors) => StyleSheet.create({
@@ -26,7 +25,6 @@ export const createFeedbackStyles = (colors: FeedbackColors) => StyleSheet.creat
         marginBottom: 24,
     },
     stepTitle: {
-        fontFamily: fontFamilies.interBold,
         fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
         fontSize: 42,
         lineHeight: 48,

package/src/ui/components/fileManagement/AnimatedButton.tsx

@@ -1,7 +1,6 @@
 import type React from 'react';
 import { useEffect, useRef } from 'react';
 import { TouchableOpacity, Animated, Easing } from 'react-native';
-// @ts-ignore - MaterialCommunityIcons is available at runtime
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 
 interface AnimatedButtonProps {