@oxyhq/services 5.22.0 → 5.23.0

package/src/web/WebOxyContext.tsx

@@ -0,0 +1,257 @@
+/**
+ * Web-Only Oxy Context
+ * Clean implementation with ZERO React Native dependencies
+ */
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+  type ReactNode,
+} from 'react';
+import { OxyServices } from '../core';
+import type { User } from '../models/interfaces';
+import type { ClientSession } from '../models/session';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { createQueryClient } from '../ui/hooks/queryClient';
+
+export interface WebAuthState {
+  user: User | null;
+  isAuthenticated: boolean;
+  isLoading: boolean;
+  error: string | null;
+}
+
+export interface WebAuthActions {
+  signIn: () => Promise<void>;
+  signOut: () => Promise<void>;
+}
+
+export interface WebOxyContextValue extends WebAuthState, WebAuthActions {
+  oxyServices: OxyServices;
+}
+
+const WebOxyContext = createContext<WebOxyContextValue | null>(null);
+
+export interface WebOxyProviderProps {
+  children: ReactNode;
+  baseURL: string;
+  authWebUrl?: string;
+  onAuthStateChange?: (user: User | null) => void;
+}
+
+/**
+ * Web-only Oxy Provider
+ * Minimal, clean implementation for web apps
+ */
+export function WebOxyProvider({
+  children,
+  baseURL,
+  authWebUrl,
+  onAuthStateChange,
+}: WebOxyProviderProps) {
+  const [oxyServices] = useState(() => new OxyServices({ baseURL, authWebUrl }));
+  const [user, setUser] = useState<User | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [queryClient] = useState(() => createQueryClient());
+
+  const isAuthenticated = !!user;
+
+  // Initialize - check for existing session
+  useEffect(() => {
+    let mounted = true;
+
+    const initAuth = async () => {
+      try {
+        // Try to get sessions from storage (localStorage)
+        const sessions = await oxyServices.getAllSessions();
+
+        if (sessions && sessions.length > 0) {
+          const activeSession = sessions.find((s: ClientSession) => s.isCurrent) || sessions[0];
+
+          // Try to get user info from the active session's userId
+          if (activeSession && activeSession.userId) {
+            try {
+              const userProfile = await oxyServices.getProfile(activeSession.userId);
+              if (mounted && userProfile) {
+                setUser(userProfile as User);
+                setIsLoading(false);
+                return;
+              }
+            } catch (err) {
+              console.log('[WebOxy] Could not fetch user profile:', err);
+            }
+          }
+        }
+
+        // No active session - check for cross-domain SSO via FedCM
+        if (typeof window !== 'undefined' && 'IdentityCredential' in window) {
+          try {
+            const credential = await navigator.credentials.get({
+              // @ts-expect-error - FedCM identity property is not in standard types
+              identity: {
+                providers: [{
+                  configURL: `${authWebUrl || 'https://auth.oxy.so'}/fedcm.json`,
+                  clientId: window.location.origin,
+                }]
+              }
+            });
+
+            if (credential && 'token' in credential) {
+              // Use the token to authenticate
+              const session = await oxyServices.authenticateWithToken(credential.token);
+              if (mounted && session.user) {
+                setUser(session.user);
+              }
+            }
+          } catch (fedcmError) {
+            // FedCM not available or user cancelled - this is fine
+            console.log('[WebOxy] FedCM SSO not available:', fedcmError);
+          }
+        }
+      } catch (err) {
+        console.error('[WebOxy] Init error:', err);
+        if (mounted) {
+          setError(err instanceof Error ? err.message : 'Failed to initialize auth');
+        }
+      } finally {
+        if (mounted) {
+          setIsLoading(false);
+        }
+      }
+    };
+
+    initAuth();
+
+    return () => {
+      mounted = false;
+    };
+  }, [oxyServices, authWebUrl]);
+
+  // Notify parent of auth state changes
+  useEffect(() => {
+    onAuthStateChange?.(user);
+  }, [user, onAuthStateChange]);
+
+  const signIn = useCallback(async () => {
+    setError(null);
+    setIsLoading(true);
+
+    try {
+      // Open popup to auth.oxy.so
+      const popup = window.open(
+        `${authWebUrl || 'https://auth.oxy.so'}/login?origin=${encodeURIComponent(window.location.origin)}`,
+        'oxy-auth',
+        'width=500,height=700,popup=yes'
+      );
+
+      if (!popup) {
+        throw new Error('Popup blocked. Please allow popups for this site.');
+      }
+
+      // Listen for message from popup
+      const handleMessage = async (event: MessageEvent) => {
+        if (event.origin !== (authWebUrl || 'https://auth.oxy.so')) {
+          return;
+        }
+
+        if (event.data.type === 'oxy-auth-success') {
+          const { sessionId, accessToken, user: authUser } = event.data;
+
+          // Store session (note: user property doesn't exist in ClientSession type)
+          const session: ClientSession = {
+            sessionId,
+            deviceId: event.data.deviceId || '',
+            expiresAt: event.data.expiresAt || '',
+            lastActive: new Date().toISOString(),
+            userId: authUser.id,
+            isCurrent: true,
+          };
+          await oxyServices.storeSession(session);
+
+          setUser(authUser);
+          setIsLoading(false);
+
+          window.removeEventListener('message', handleMessage);
+          popup.close();
+        } else if (event.data.type === 'oxy-auth-error') {
+          setError(event.data.error || 'Authentication failed');
+          setIsLoading(false);
+          window.removeEventListener('message', handleMessage);
+          popup.close();
+        }
+      };
+
+      window.addEventListener('message', handleMessage);
+
+      // Check if popup was closed
+      const checkClosed = setInterval(() => {
+        if (popup.closed) {
+          clearInterval(checkClosed);
+          window.removeEventListener('message', handleMessage);
+          setIsLoading(false);
+        }
+      }, 500);
+    } catch (err) {
+      console.error('[WebOxy] Sign in error:', err);
+      setError(err instanceof Error ? err.message : 'Sign in failed');
+      setIsLoading(false);
+    }
+  }, [oxyServices, authWebUrl]);
+
+  const signOut = useCallback(async () => {
+    setError(null);
+
+    try {
+      await oxyServices.logout();
+      setUser(null);
+    } catch (err) {
+      console.error('[WebOxy] Sign out error:', err);
+      setError(err instanceof Error ? err.message : 'Sign out failed');
+    }
+  }, [oxyServices]);
+
+  const contextValue: WebOxyContextValue = {
+    user,
+    isAuthenticated,
+    isLoading,
+    error,
+    signIn,
+    signOut,
+    oxyServices,
+  };
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <WebOxyContext.Provider value={contextValue}>
+        {children}
+      </WebOxyContext.Provider>
+    </QueryClientProvider>
+  );
+}
+
+export function useWebOxy() {
+  const context = useContext(WebOxyContext);
+  if (!context) {
+    throw new Error('useWebOxy must be used within WebOxyProvider');
+  }
+  return context;
+}
+
+export function useAuth() {
+  const { user, isAuthenticated, isLoading, error, signIn, signOut, oxyServices } = useWebOxy();
+
+  return {
+    user,
+    isAuthenticated,
+    isLoading,
+    isReady: !isLoading,
+    error,
+    signIn,
+    signOut,
+    oxyServices,
+  };
+}

package/src/web/index.ts

@@ -0,0 +1,87 @@
+/**
+ * @oxyhq/services/web - Web-Only Module
+ *
+ * Clean, professional web module with ZERO React Native dependencies.
+ * Perfect for Next.js, Vite, Create React App, and other pure React web apps.
+ *
+ * Features:
+ * - WebOxyProvider for React context
+ * - useAuth hook for authentication
+ * - Cross-domain SSO via FedCM
+ * - Full TypeScript support
+ * - Zero bundler configuration needed
+ *
+ * Usage:
+ * ```tsx
+ * import { WebOxyProvider, useAuth } from '@oxyhq/services/web';
+ *
+ * function App() {
+ *   return (
+ *     <WebOxyProvider baseURL="https://api.oxy.so">
+ *       <YourApp />
+ *     </WebOxyProvider>
+ *   );
+ * }
+ *
+ * function YourApp() {
+ *   const { user, isAuthenticated, signIn, signOut } = useAuth();
+ *   // ... your app logic
+ * }
+ * ```
+ */
+
+// ==================== Core API ====================
+// Re-export core services (zero React Native deps)
+export {
+  OxyServices,
+  OxyAuthenticationError,
+  OxyAuthenticationTimeoutError,
+  OXY_CLOUD_URL,
+  oxyClient,
+  CrossDomainAuth,
+  createCrossDomainAuth,
+  DeviceManager,
+} from '../core';
+
+export type {
+  CrossDomainAuthOptions,
+  DeviceFingerprint,
+  StoredDeviceInfo,
+} from '../core';
+
+// ==================== Web Components ====================
+export { WebOxyProvider, useWebOxy, useAuth } from './WebOxyContext';
+export type { WebOxyProviderProps, WebAuthState, WebAuthActions, WebOxyContextValue } from './WebOxyContext';
+
+// ==================== Models & Types ====================
+// Re-export commonly used types
+export type {
+  User,
+  ApiError,
+  Notification,
+  FileMetadata,
+  AssetUploadProgress,
+  PaymentMethod,
+  KarmaLeaderboardEntry,
+  KarmaRule,
+  Transaction,
+  DeviceSession,
+} from '../models/interfaces';
+
+// Re-export session types
+export type { ClientSession } from '../models/session';
+
+// ==================== Utilities ====================
+export {
+  SUPPORTED_LANGUAGES,
+  getLanguageMetadata,
+  getLanguageName,
+  getNativeLanguageName,
+  normalizeLanguageCode,
+} from '../utils/languageUtils';
+
+export type { LanguageMetadata } from '../utils/languageUtils';
+
+// Default export for convenience
+import { WebOxyProvider } from './WebOxyContext';
+export default WebOxyProvider;

package/src/web.ts

@@ -200,9 +200,9 @@ export type { HandleApiErrorOptions } from './ui/utils/authHelpers';
 export { useFileFiltering } from './ui/hooks/useFileFiltering';
 export type { ViewMode, SortBy, SortOrder } from './ui/hooks/useFileFiltering';
 
-// Web-compatible UI components (no React Native dependencies)
-export { OxySignInButton } from './ui/components/OxySignInButton';
-export { OxyLogo } from './ui/components/OxyLogo';
+// Note: UI components like OxySignInButton and OxyLogo use React Native
+// and are not included in the /web entry point. For pure web apps, use the
+// useAuth hook and create your own sign-in button.
 
 // Utilities
 export * from './utils/apiUtils';
@@ -217,7 +217,6 @@ export * from './utils/validationUtils';
 export {
   logger,
   LogLevel,
-  LogContext,
   logAuth,
   logApi,
   logSession,
@@ -226,5 +225,6 @@ export {
   logPayment,
   logPerformance
 } from './utils/loggerUtils';
+export type { LogContext } from './utils/loggerUtils';
 export * from './utils/asyncUtils';
 export * from './utils/hookUtils';