@oxyhq/services 5.18.5 → 5.19.0

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

@@ -3,10 +3,12 @@
  *
  * This provider is specifically for web environments and doesn't include
  * React Native-specific dependencies. It provides:
- * - Automatic cross-domain SSO via hidden iframe
+ * - Automatic cross-domain SSO via FedCM (Chrome 108+, Safari 16.4+, Edge 108+)
  * - Session management
  * - All useOxy/useAuth functionality
  *
+ * Zero-config: Just wrap your app and SSO works automatically across domains.
+ *
  * Usage:
  * ```tsx
  * import { WebOxyProvider, useAuth } from '@oxyhq/services';
@@ -18,6 +20,12 @@
  *     </WebOxyProvider>
  *   );
  * }
+ *
+ * function LoginButton() {
+ *   const { isAuthenticated, signIn, user } = useAuth();
+ *   if (isAuthenticated) return <span>Welcome, {user?.username}!</span>;
+ *   return <button onClick={() => signIn()}>Sign In</button>;
+ * }
  * ```
  */
 
@@ -40,7 +48,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();

package/src/ui/hooks/useWebSSO.ts

@@ -1,11 +1,18 @@
 /**
  * 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 { useEffect, useRef, useCallback } from 'react';
@@ -15,78 +22,115 @@ 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)
  */
 function isWebBrowser(): boolean {
-  // Check for browser globals and that we have a real DOM (React Native has window but not documentElement)
   return typeof window !== 'undefined' &&
          typeof document !== 'undefined' &&
          typeof document.documentElement !== 'undefined';
 }
 
 /**
- * Hook for automatic web SSO
+ * Hook for automatic cross-domain web SSO
  *
- * Automatically checks for existing cross-domain session on mount.
- * Only runs on web platforms. Uses OxyServices.silentSignIn() internally.
+ * 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
+ *
+ * For browsers without FedCM (Firefox, older browsers), automatic SSO
+ * is not possible. Users will see a sign-in button instead.
  */
 export function useWebSSO({
   oxyServices,
   onSessionFound,
+  onSSOUnavailable,
   onError,
   enabled = true,
 }: UseWebSSOOptions): UseWebSSOResult {
   const isCheckingRef = useRef(false);
   const hasCheckedRef = useRef(false);
 
+  // Check FedCM support once
+  const fedCMSupported = isWebBrowser() && (oxyServices as any).isFedCMSupported?.();
+
   const checkSSO = useCallback(async (): Promise<SessionLoginResponse | null> => {
     if (!isWebBrowser() || isCheckingRef.current) {
       return null;
     }
 
+    // FedCM is the only reliable cross-domain SSO mechanism
+    // Third-party cookies are deprecated and unreliable
+    if (!fedCMSupported) {
+      onSSOUnavailable?.();
+      return null;
+    }
+
     isCheckingRef.current = true;
 
     try {
-      // Use the existing silentSignIn method from OxyServices
-      // which handles iframe creation, postMessage, and token storage
-      const session = await (oxyServices as any).silentSignIn?.();
+      // Use FedCM for cross-domain SSO
+      // This works because browser treats IdP requests as first-party
+      const session = await (oxyServices as any).silentSignInWithFedCM?.();
 
       if (session) {
         await onSessionFound(session);
+        return session;
       }
 
-      return session;
+      // No session found - user needs to sign in
+      onSSOUnavailable?.();
+      return null;
     } catch (error) {
+      // FedCM failed - could be network error, user not signed in, etc.
+      onSSOUnavailable?.();
       onError?.(error instanceof Error ? error : new Error(String(error)));
       return null;
     } finally {
       isCheckingRef.current = false;
     }
-  }, [oxyServices, onSessionFound, onError]);
+  }, [oxyServices, onSessionFound, onSSOUnavailable, onError, fedCMSupported]);
 
-  // Auto-check SSO on mount (web only)
+  // Auto-check SSO on mount (web only, FedCM only)
   useEffect(() => {
     if (!enabled || !isWebBrowser() || hasCheckedRef.current) {
       return;
     }
 
     hasCheckedRef.current = true;
-    checkSSO();
-  }, [enabled, checkSSO]);
+
+    if (fedCMSupported) {
+      checkSSO();
+    } else {
+      // Browser doesn't support FedCM - notify caller
+      onSSOUnavailable?.();
+    }
+  }, [enabled, checkSSO, fedCMSupported, onSSOUnavailable]);
 
   return {
     checkSSO,
     isChecking: isCheckingRef.current,
+    isFedCMSupported: fedCMSupported,
   };
 }