@oxyhq/services 5.18.5 → 5.20.0

package/lib/typescript/module/ui/hooks/useAuth.d.ts

@@ -16,6 +16,11 @@
  *   return <Welcome user={user} />;
  * }
  * ```
+ *
+ * Cross-domain SSO:
+ * - Web: Automatic via FedCM (Chrome 108+, Safari 16.4+)
+ * - Native: Automatic via shared Keychain/Account Manager
+ * - Manual sign-in: signIn() opens popup (web) or auth sheet (native)
  */
 import { useOxy } from '../context/OxyContext';
 import type { User } from '../../models/interfaces';
@@ -33,9 +38,9 @@ export interface AuthState {
 }
 export interface AuthActions {
     /**
-     * Sign in with cryptographic identity
-     * On native: Uses device keychain
-     * On web: Opens auth popup/redirect
+     * Sign in
+     * - Web: Opens popup to auth.oxy.so (no public key needed)
+     * - Native: Uses cryptographic identity from keychain
      */
     signIn: (publicKey?: string) => Promise<User>;
     /**

package/lib/typescript/module/ui/hooks/useAuth.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAuth.d.ts","sourceRoot":"","sources":["../../../../../src/ui/hooks/useAuth.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAGH,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEpD,MAAM,WAAW,SAAS;IACxB,4DAA4D;IAC5D,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAElB,oCAAoC;IACpC,eAAe,EAAE,OAAO,CAAC;IAEzB,4DAA4D;IAC5D,SAAS,EAAE,OAAO,CAAC;IAEnB,oDAAoD;IACpD,OAAO,EAAE,OAAO,CAAC;IAEjB,oCAAoC;IACpC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,WAAW;IAC1B;;;;OAIG;IACH,MAAM,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAE9C;;OAEG;IACH,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAE7B;;OAEG;IACH,UAAU,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAEhC;;OAEG;IACH,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,EAAE,WAAW;IAC3D,6DAA6D;IAC7D,WAAW,EAAE,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC,aAAa,CAAC,CAAC;CACvD;AAED;;;;;;;;GAQG;AACH,wBAAgB,OAAO,IAAI,aAAa,CA4EvC;AAGD,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"useAuth.d.ts","sourceRoot":"","sources":["../../../../../src/ui/hooks/useAuth.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAGH,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGpD,MAAM,WAAW,SAAS;IACxB,4DAA4D;IAC5D,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAElB,oCAAoC;IACpC,eAAe,EAAE,OAAO,CAAC;IAEzB,4DAA4D;IAC5D,SAAS,EAAE,OAAO,CAAC;IAEnB,oDAAoD;IACpD,OAAO,EAAE,OAAO,CAAC;IAEjB,oCAAoC;IACpC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,WAAW;IAC1B;;;;OAIG;IACH,MAAM,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAE9C;;OAEG;IACH,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAE7B;;OAEG;IACH,UAAU,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAEhC;;OAEG;IACH,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,EAAE,WAAW;IAC3D,6DAA6D;IAC7D,WAAW,EAAE,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC,aAAa,CAAC,CAAC;CACvD;AAED;;;;;;;;GAQG;AACH,wBAAgB,OAAO,IAAI,aAAa,CAoGvC;AAGD,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC"}

package/lib/typescript/module/ui/hooks/useWebSSO.d.ts

@@ -1,34 +1,56 @@
 /**
  * Web SSO Hook
  *
- * Automatically handles cross-domain SSO for web apps.
- * Uses the OxyServices.silentSignIn() method which loads a hidden iframe
- * to check for existing session at auth.oxy.so.
+ * Handles cross-domain SSO for web apps using FedCM (Federated Credential Management).
+ *
+ * FedCM is the modern, privacy-preserving standard for cross-domain identity federation.
+ * It works across completely different TLDs (alia.onl, mention.earth, homiio.com, etc.)
+ * without relying on third-party cookies.
+ *
+ * For browsers without FedCM support, users will need to click a sign-in button
+ * which triggers a popup-based authentication flow.
  *
  * This is called automatically by OxyContext on web platforms.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/FedCM_API
  */
 import type { OxyServices } from '../../core/OxyServices';
 import type { SessionLoginResponse } from '../../models/session';
 interface UseWebSSOOptions {
     oxyServices: OxyServices;
     onSessionFound: (session: SessionLoginResponse) => Promise<void>;
+    onSSOUnavailable?: () => void;
     onError?: (error: Error) => void;
     enabled?: boolean;
 }
 interface UseWebSSOResult {
+    /** Manually trigger SSO check */
     checkSSO: () => Promise<SessionLoginResponse | null>;
+    /** Whether SSO check is in progress */
     isChecking: boolean;
+    /** Whether FedCM is supported in this browser */
+    isFedCMSupported: boolean;
 }
 /**
  * Check if we're running in a web browser environment (not React Native)
  */
 declare function isWebBrowser(): boolean;
 /**
- * Hook for automatic web SSO
+ * Hook for automatic cross-domain web SSO
+ *
+ * Uses FedCM (Federated Credential Management) - the modern browser-native
+ * identity federation API. This is the same technology that powers
+ * Google's cross-domain SSO (YouTube, Gmail, Maps, etc.).
+ *
+ * Key benefits:
+ * - Works across different TLDs (alia.onl ↔ mention.earth ↔ homiio.com)
+ * - No third-party cookies required
+ * - Privacy-preserving (browser mediates identity, IdP can't track)
+ * - Automatic silent sign-in after initial authentication
  *
- * Automatically checks for existing cross-domain session on mount.
- * Only runs on web platforms. Uses OxyServices.silentSignIn() internally.
+ * For browsers without FedCM (Firefox, older browsers), automatic SSO
+ * is not possible. Users will see a sign-in button instead.
  */
-export declare function useWebSSO({ oxyServices, onSessionFound, onError, enabled, }: UseWebSSOOptions): UseWebSSOResult;
+export declare function useWebSSO({ oxyServices, onSessionFound, onSSOUnavailable, onError, enabled, }: UseWebSSOOptions): UseWebSSOResult;
 export { isWebBrowser };
 //# sourceMappingURL=useWebSSO.d.ts.map

package/lib/typescript/module/ui/hooks/useWebSSO.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useWebSSO.d.ts","sourceRoot":"","sources":["../../../../../src/ui/hooks/useWebSSO.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAEjE,UAAU,gBAAgB;IACxB,WAAW,EAAE,WAAW,CAAC;IACzB,cAAc,EAAE,CAAC,OAAO,EAAE,oBAAoB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACjE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,UAAU,eAAe;IACvB,QAAQ,EAAE,MAAM,OAAO,CAAC,oBAAoB,GAAG,IAAI,CAAC,CAAC;IACrD,UAAU,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,iBAAS,YAAY,IAAI,OAAO,CAK/B;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,EACxB,WAAW,EACX,cAAc,EACd,OAAO,EACP,OAAc,GACf,EAAE,gBAAgB,GAAG,eAAe,CA2CpC;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"useWebSSO.d.ts","sourceRoot":"","sources":["../../../../../src/ui/hooks/useWebSSO.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAEjE,UAAU,gBAAgB;IACxB,WAAW,EAAE,WAAW,CAAC;IACzB,cAAc,EAAE,CAAC,OAAO,EAAE,oBAAoB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACjE,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,UAAU,eAAe;IACvB,iCAAiC;IACjC,QAAQ,EAAE,MAAM,OAAO,CAAC,oBAAoB,GAAG,IAAI,CAAC,CAAC;IACrD,uCAAuC;IACvC,UAAU,EAAE,OAAO,CAAC;IACpB,iDAAiD;IACjD,gBAAgB,EAAE,OAAO,CAAC;CAC3B;AAED;;GAEG;AACH,iBAAS,YAAY,IAAI,OAAO,CAI/B;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,SAAS,CAAC,EACxB,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,OAAO,EACP,OAAc,GACf,EAAE,gBAAgB,GAAG,eAAe,CAiEpC;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/services",
-  "version": "5.18.5",
+  "version": "5.20.0",
   "description": "Reusable OxyHQ module to handle authentication, user management, karma system, device-based session management and more 🚀",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",

package/src/core/mixins/OxyServices.fedcm.ts

@@ -240,7 +240,7 @@ export function OxyServicesFedCMMixin<T extends typeof OxyServicesBase>(Base: T)
   public async exchangeIdTokenForSession(idToken: string): Promise<SessionLoginResponse> {
     return this.makeRequest<SessionLoginResponse>(
       'POST',
-      '/api/auth/fedcm/exchange',
+      '/api/fedcm/exchange',
       { id_token: idToken },
       { cache: false }
     );

package/src/ui/components/OxyProvider.tsx

@@ -1,13 +1,11 @@
 import { useEffect, useRef, useState, type FC } from 'react';
-import { AppState } from 'react-native';
+import { AppState, Platform } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
-import { KeyboardProvider } from 'react-native-keyboard-controller';
 import type { OxyProviderProps } from '../types/navigation';
 import { OxyContextProvider } from '../context/OxyContext';
 import { QueryClientProvider, focusManager, onlineManager } from '@tanstack/react-query';
 import { setupFonts } from './FontLoader';
-import BottomSheetRouter from './BottomSheetRouter';
 import { Toaster } from '../../lib/sonner';
 import { createQueryClient } from '../hooks/queryClient';
 import { createPlatformStorage, type StorageInterface } from '../utils/storageHelpers';
@@ -15,11 +13,51 @@ import { createPlatformStorage, type StorageInterface } from '../utils/storageHe
 // Initialize fonts automatically
 setupFonts();
 
+// Detect if running on web
+const isWeb = Platform.OS === 'web';
+
+// Conditionally import native-only components
+let KeyboardProvider: any = ({ children }: any) => children;
+let BottomSheetRouter: any = () => null;
+
+if (!isWeb) {
+    try {
+        // Only import on native platforms
+        KeyboardProvider = require('react-native-keyboard-controller').KeyboardProvider;
+        BottomSheetRouter = require('./BottomSheetRouter').default;
+    } catch {
+        // Fallback if imports fail
+    }
+}
+
 /**
- * OxyProvider component
+ * OxyProvider - Universal provider for Expo apps (native + web)
+ *
+ * Zero-config authentication and session management:
+ * - Native (iOS/Android): Keychain-based identity, bottom sheet auth UI
+ * - Web: FedCM cross-domain SSO, popup fallback
  *
- * Provides the authentication/session context used across the app.
- * UI composition (e.g. OxyRouter inside a bottom sheet) can be added externally.
+ * Usage:
+ * ```tsx
+ * import { OxyProvider, useAuth } from '@oxyhq/services';
+ *
+ * function App() {
+ *   return (
+ *     <OxyProvider baseURL="https://api.oxy.so">
+ *       <YourApp />
+ *     </OxyProvider>
+ *   );
+ * }
+ *
+ * function MyComponent() {
+ *   const { isAuthenticated, user, signIn, signOut } = useAuth();
+ *
+ *   if (!isAuthenticated) {
+ *     return <OxySignInButton />;
+ *   }
+ *   return <Text>Welcome, {user?.username}!</Text>;
+ * }
+ * ```
  */
 const OxyProvider: FC<OxyProviderProps> = ({
     oxyServices,
@@ -72,14 +110,26 @@ const OxyProvider: FC<OxyProviderProps> = ({
         };
     }, [providedQueryClient]);
 
-    // Hook React Query focus manager into React Native AppState
+    // Hook React Query focus manager into app state (native) or visibility (web)
     useEffect(() => {
-        const subscription = AppState.addEventListener('change', (state) => {
-            focusManager.setFocused(state === 'active');
-        });
-        return () => {
-            subscription.remove();
-        };
+        if (isWeb) {
+            // Web: use document visibility
+            const handleVisibilityChange = () => {
+                focusManager.setFocused(document.visibilityState === 'visible');
+            };
+            document.addEventListener('visibilitychange', handleVisibilityChange);
+            return () => {
+                document.removeEventListener('visibilitychange', handleVisibilityChange);
+            };
+        } else {
+            // Native: use AppState
+            const subscription = AppState.addEventListener('change', (state) => {
+                focusManager.setFocused(state === 'active');
+            });
+            return () => {
+                subscription.remove();
+            };
+        }
     }, []);
 
     // Setup network status monitoring for offline detection
@@ -88,35 +138,35 @@ const OxyProvider: FC<OxyProviderProps> = ({
 
         const setupNetworkMonitoring = async () => {
             try {
-                // For React Native, try to use NetInfo
-                if (typeof window === 'undefined' || (typeof navigator !== 'undefined' && navigator.product === 'ReactNative')) {
+                if (isWeb) {
+                    // Web: use navigator.onLine
+                    onlineManager.setOnline(navigator.onLine);
+                    const handleOnline = () => onlineManager.setOnline(true);
+                    const handleOffline = () => onlineManager.setOnline(false);
+
+                    window.addEventListener('online', handleOnline);
+                    window.addEventListener('offline', handleOffline);
+
+                    cleanup = () => {
+                        window.removeEventListener('online', handleOnline);
+                        window.removeEventListener('offline', handleOffline);
+                    };
+                } else {
+                    // Native: try to use NetInfo
                     try {
                         const NetInfo = await import('@react-native-community/netinfo');
                         const state = await NetInfo.default.fetch();
                         onlineManager.setOnline(state.isConnected ?? true);
-                        
+
                         const unsubscribe = NetInfo.default.addEventListener((state: { isConnected: boolean | null }) => {
                             onlineManager.setOnline(state.isConnected ?? true);
                         });
-                        
+
                         cleanup = () => unsubscribe();
                     } catch {
                         // NetInfo not available, default to online
                         onlineManager.setOnline(true);
                     }
-                } else {
-                    // For web, use navigator.onLine
-                    onlineManager.setOnline(navigator.onLine);
-                    const handleOnline = () => onlineManager.setOnline(true);
-                    const handleOffline = () => onlineManager.setOnline(false);
-                    
-                    window.addEventListener('online', handleOnline);
-                    window.addEventListener('offline', handleOffline);
-                    
-                    cleanup = () => {
-                        window.removeEventListener('online', handleOnline);
-                        window.removeEventListener('offline', handleOffline);
-                    };
                 }
             } catch (error) {
                 // Default to online if detection fails
@@ -133,30 +183,45 @@ const OxyProvider: FC<OxyProviderProps> = ({
 
     // Ensure we have a valid QueryClient
     if (!queryClient) {
-        // Return loading state or fallback
         return null;
     }
 
+    // Core content that works on all platforms
+    const coreContent = (
+        <QueryClientProvider client={queryClient}>
+            <OxyContextProvider
+                oxyServices={oxyServices as any}
+                baseURL={baseURL}
+                authWebUrl={authWebUrl}
+                authRedirectUri={authRedirectUri}
+                storageKeyPrefix={storageKeyPrefix}
+                onAuthStateChange={onAuthStateChange as any}
+            >
+                {children}
+                {/* Only render bottom sheet router on native */}
+                {!isWeb && <BottomSheetRouter />}
+                <Toaster />
+            </OxyContextProvider>
+        </QueryClientProvider>
+    );
+
+    // On web, minimal wrappers (GestureHandler and SafeArea work via react-native-web)
+    if (isWeb) {
+        return (
+            <SafeAreaProvider>
+                <GestureHandlerRootView style={{ flex: 1 }}>
+                    {coreContent}
+                </GestureHandlerRootView>
+            </SafeAreaProvider>
+        );
+    }
+
+    // On native, full wrappers including KeyboardProvider
     return (
         <SafeAreaProvider>
             <GestureHandlerRootView style={{ flex: 1 }}>
                 <KeyboardProvider>
-                    {queryClient && (
-                        <QueryClientProvider client={queryClient}>
-                            <OxyContextProvider
-                                oxyServices={oxyServices as any}
-                                baseURL={baseURL}
-                                authWebUrl={authWebUrl}
-                                authRedirectUri={authRedirectUri}
-                                storageKeyPrefix={storageKeyPrefix}
-                                onAuthStateChange={onAuthStateChange as any}
-                            >
-                                {children}
-                                <BottomSheetRouter />
-                                <Toaster />
-                            </OxyContextProvider>
-                        </QueryClientProvider>
-                    )}
+                    {coreContent}
                 </KeyboardProvider>
             </GestureHandlerRootView>
         </SafeAreaProvider>

package/src/ui/components/OxySignInButton.tsx

@@ -1,6 +1,7 @@
 import type React from 'react';
+import { useState } from 'react';
 import { TouchableOpacity, Text, View, StyleSheet, type ViewStyle, type TextStyle, type StyleProp, Platform } from 'react-native';
-import { useOxy } from '../context/OxyContext';
+import { useAuth } from '../hooks/useAuth';
 import OxyLogo from './OxyLogo';
 
 export interface OxySignInButtonProps {
@@ -79,31 +80,37 @@ export const OxySignInButton: React.FC<OxySignInButtonProps> = ({
     disabled = false,
     showWhenAuthenticated = false,
 }) => {
-    // Get all needed values from context in a single call
-    const { isAuthenticated, showBottomSheet } = useOxy();
+    const { isAuthenticated, signIn, isLoading } = useAuth();
+    const [isSigningIn, setIsSigningIn] = useState(false);
 
     // Don't show the button if already authenticated (unless explicitly overridden)
     if (isAuthenticated && !showWhenAuthenticated) return null;
 
-    // Default handler that uses the context methods
-    const handlePress = () => {
+    // Default handler that uses useAuth's signIn method
+    // This works for both web (popup) and native (bottom sheet)
+    const handlePress = async () => {
         if (onPress) {
             onPress();
             return;
         }
 
-        // Use the new bottom sheet system to show the OxyAuth screen
-        if (showBottomSheet) {
-            showBottomSheet('OxyAuth');
-        } else {
+        if (isSigningIn) return;
+
+        setIsSigningIn(true);
+        try {
+            await signIn();
+        } catch (error) {
+            // Sign-in handled by the auth flow
             if (__DEV__) {
-                console.warn(
-                    `OxySignInButton: showBottomSheet is not available. Make sure OxyProvider is set up correctly.`
-                );
+                console.log('OxySignInButton: Sign-in flow initiated', error);
             }
+        } finally {
+            setIsSigningIn(false);
         }
     };
 
+    const isButtonDisabled = disabled || isLoading || isSigningIn;
+
     // Determine the button style based on the variant
     const getButtonStyle = () => {
         switch (variant) {
@@ -130,9 +137,9 @@ export const OxySignInButton: React.FC<OxySignInButtonProps> = ({
 
     return (
         <TouchableOpacity
-            style={[styles.button, getButtonStyle(), disabled && styles.buttonDisabled]}
+            style={[styles.button, getButtonStyle(), isButtonDisabled && styles.buttonDisabled]}
             onPress={handlePress}
-            disabled={disabled}
+            disabled={isButtonDisabled}
         >
             <View style={styles.buttonContent}>
                 <OxyLogo
@@ -140,10 +147,10 @@ export const OxySignInButton: React.FC<OxySignInButtonProps> = ({
                     height={20}
                     fillColor={variant === 'contained' ? 'white' : '#d169e5'}
                     secondaryFillColor={variant === 'contained' ? '#d169e5' : undefined}
-                    style={disabled ? { opacity: 0.6 } : undefined}
+                    style={isButtonDisabled ? { opacity: 0.6 } : undefined}
                 />
-                <Text style={[styles.text, getTextStyle(), disabled && styles.textDisabled]}>
-                    {text}
+                <Text style={[styles.text, getTextStyle(), isButtonDisabled && styles.textDisabled]}>
+                    {isSigningIn ? 'Signing in...' : text}
                 </Text>
             </View>
         </TouchableOpacity>

package/src/ui/components/WebOxyProvider.tsx

@@ -1,14 +1,18 @@
 /**
- * WebOxyProvider - OxyProvider for web apps (Next.js, React)
+ * WebOxyProvider - Lightweight provider for pure React/Next.js apps
  *
- * This provider is specifically for web environments and doesn't include
- * React Native-specific dependencies. It provides:
- * - Automatic cross-domain SSO via hidden iframe
+ * Use this provider for web apps that DON'T use Expo/React Native.
+ * For Expo apps (native + web), use `OxyProvider` instead - it works on all platforms.
+ *
+ * Features:
+ * - Automatic cross-domain SSO via FedCM (Chrome 108+, Safari 16.4+, Edge 108+)
+ * - No React Native dependencies
  * - Session management
  * - All useOxy/useAuth functionality
  *
  * Usage:
  * ```tsx
+ * // For pure React/Next.js apps (no Expo):
  * import { WebOxyProvider, useAuth } from '@oxyhq/services';
  *
  * function App() {
@@ -18,6 +22,9 @@
  *     </WebOxyProvider>
  *   );
  * }
+ *
+ * // For Expo apps (native + web), use OxyProvider instead:
+ * import { OxyProvider, useAuth } from '@oxyhq/services';
  * ```
  */
 
@@ -40,7 +47,8 @@ export interface WebOxyProviderProps {
  * OxyProvider for web applications
  *
  * Features:
- * - Automatic cross-domain SSO (checks auth.oxy.so/auth/silent on mount)
+ * - Automatic cross-domain SSO via FedCM (browser-native identity API)
+ * - Works across different TLDs (alia.onl, mention.earth, homiio.com, etc.)
  * - Session persistence in localStorage
  * - TanStack Query for data fetching
  * - No React Native dependencies

package/src/ui/hooks/useAuth.ts

@@ -16,11 +16,17 @@
  *   return <Welcome user={user} />;
  * }
  * ```
+ *
+ * Cross-domain SSO:
+ * - Web: Automatic via FedCM (Chrome 108+, Safari 16.4+)
+ * - Native: Automatic via shared Keychain/Account Manager
+ * - Manual sign-in: signIn() opens popup (web) or auth sheet (native)
  */
 
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import { useOxy } from '../context/OxyContext';
 import type { User } from '../../models/interfaces';
+import { isWebBrowser } from './useWebSSO';
 
 export interface AuthState {
   /** Current authenticated user, null if not authenticated */
@@ -41,9 +47,9 @@ export interface AuthState {
 
 export interface AuthActions {
   /**
-   * Sign in with cryptographic identity
-   * On native: Uses device keychain
-   * On web: Opens auth popup/redirect
+   * Sign in
+   * - Web: Opens popup to auth.oxy.so (no public key needed)
+   * - Native: Uses cryptographic identity from keychain
    */
   signIn: (publicKey?: string) => Promise<User>;
 
@@ -95,6 +101,35 @@ export function useAuth(): UseAuthReturn {
   } = useOxy();
 
   const signIn = useCallback(async (publicKey?: string): Promise<User> => {
+    // Web: Use popup-based authentication
+    if (isWebBrowser() && !publicKey) {
+      try {
+        // Try FedCM first (instant if user already signed in)
+        if ((oxyServices as any).isFedCMSupported?.()) {
+          const fedcmSession = await (oxyServices as any).signInWithFedCM?.();
+          if (fedcmSession?.user) {
+            return fedcmSession.user;
+          }
+        }
+
+        // Fallback to popup (opens auth.oxy.so in popup window)
+        const popupSession = await (oxyServices as any).signInWithPopup?.();
+        if (popupSession?.user) {
+          return popupSession.user;
+        }
+
+        throw new Error('Sign-in failed');
+      } catch (error) {
+        // If popup blocked or FedCM failed, suggest redirect
+        throw new Error(
+          error instanceof Error && error.message.includes('blocked')
+            ? 'Popup blocked. Please allow popups or try again.'
+            : 'Sign-in failed. Please try again.'
+        );
+      }
+    }
+
+    // Native: Use cryptographic identity
     // If public key provided, use it directly
     if (publicKey) {
       return oxySignIn(publicKey);
@@ -110,19 +145,14 @@ export function useAuth(): UseAuthReturn {
       }
     }
 
-    // No identity - show auth UI
-    // On native: shows bottom sheet for identity creation
-    // On web: could trigger popup auth
+    // No identity - show auth UI (native bottom sheet)
     showBottomSheet?.('OxyAuth');
 
     // Return a promise that resolves when auth completes
-    // This is a simplified version - real implementation would
-    // wait for the auth flow to complete
-    return new Promise((resolve, reject) => {
-      // For now, just reject - the bottom sheet handles the flow
+    return new Promise((_, reject) => {
       reject(new Error('Please complete sign-in in the auth sheet'));
     });
-  }, [oxySignIn, hasIdentity, getPublicKey, showBottomSheet]);
+  }, [oxySignIn, hasIdentity, getPublicKey, showBottomSheet, oxyServices]);
 
   const signOut = useCallback(async (): Promise<void> => {
     await logout();