@oxyhq/auth 1.0.0

package/src/WebOxyProvider.tsx

@@ -0,0 +1,372 @@
+/**
+ * @oxyhq/auth — Web Authentication Provider
+ *
+ * Clean implementation with ZERO React Native dependencies.
+ * Provides FedCM, popup, and redirect authentication methods.
+ * Uses centralized AuthManager for token and session management.
+ */
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react';
+import {
+  OxyServices,
+  CrossDomainAuth,
+  AuthManager,
+  createAuthManager,
+} from '@oxyhq/core';
+import type {
+  User,
+  SessionLoginResponse,
+  ClientSession,
+} from '@oxyhq/core';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { createQueryClient } from './hooks/queryClient';
+
+export interface WebAuthState {
+  user: User | null;
+  isAuthenticated: boolean;
+  isLoading: boolean;
+  error: string | null;
+  activeSessionId: string | null;
+  sessions: ClientSession[];
+}
+
+export interface WebAuthActions {
+  signIn: () => Promise<void>;
+  signInWithFedCM: () => Promise<void>;
+  signInWithPopup: () => Promise<void>;
+  signInWithRedirect: () => void;
+  signOut: () => Promise<void>;
+  isFedCMSupported: () => boolean;
+  switchSession: (sessionId: string) => Promise<void>;
+  clearSessionState: () => Promise<void>;
+}
+
+export interface WebOxyContextValue extends WebAuthState, WebAuthActions {
+  oxyServices: OxyServices;
+  crossDomainAuth: CrossDomainAuth;
+  authManager: AuthManager;
+}
+
+const WebOxyContext = createContext<WebOxyContextValue | null>(null);
+
+export interface WebOxyProviderProps {
+  children: ReactNode;
+  baseURL: string;
+  authWebUrl?: string;
+  onAuthStateChange?: (user: User | null) => void;
+  onError?: (error: Error) => void;
+  preferredAuthMethod?: 'auto' | 'fedcm' | 'popup' | 'redirect';
+  skipAutoCheck?: boolean;
+}
+
+/**
+ * Web-only Oxy Provider
+ *
+ * Provides authentication context for pure web applications (React, Next.js, Vite).
+ * Supports FedCM, popup, and redirect authentication methods.
+ *
+ * @example
+ * ```tsx
+ * import { WebOxyProvider, useAuth } from '@oxyhq/auth';
+ *
+ * function App() {
+ *   return (
+ *     <WebOxyProvider baseURL="https://api.oxy.so">
+ *       <YourApp />
+ *     </WebOxyProvider>
+ *   );
+ * }
+ * ```
+ */
+export function WebOxyProvider({
+  children,
+  baseURL,
+  authWebUrl,
+  onAuthStateChange,
+  onError,
+  preferredAuthMethod = 'auto',
+  skipAutoCheck = false,
+}: WebOxyProviderProps) {
+  const [oxyServices] = useState(() => new OxyServices({ baseURL, authWebUrl }));
+  const [crossDomainAuth] = useState(() => new CrossDomainAuth(oxyServices));
+  const [authManager] = useState(() => createAuthManager(oxyServices, { autoRefresh: true }));
+  const [queryClient] = useState(() => createQueryClient());
+
+  // Auth state
+  const [user, setUser] = useState<User | null>(null);
+  const [isLoading, setIsLoading] = useState(!skipAutoCheck);
+  const [error, setError] = useState<string | null>(null);
+  const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
+  const [sessions, setSessions] = useState<ClientSession[]>([]);
+
+  const isAuthenticated = !!user;
+
+  const handleAuthSuccess = useCallback(async (
+    session: SessionLoginResponse,
+    method: 'fedcm' | 'popup' | 'redirect' | 'credentials' = 'credentials'
+  ) => {
+    await authManager.handleAuthSuccess(session, method);
+
+    // Set active session
+    if (session.sessionId) {
+      setActiveSessionId(session.sessionId);
+    }
+
+    // Fetch full user profile
+    try {
+      const fullUser = await oxyServices.getCurrentUser();
+      if (fullUser) {
+        setUser(fullUser);
+      } else {
+        setUser(session.user as User);
+      }
+    } catch {
+      setUser(session.user as User);
+    }
+
+    setError(null);
+    setIsLoading(false);
+  }, [authManager, oxyServices]);
+
+  const handleAuthError = useCallback((err: unknown) => {
+    const errorMessage = err instanceof Error ? err.message : 'Authentication failed';
+    setError(errorMessage);
+    setIsLoading(false);
+    onError?.(err instanceof Error ? err : new Error(errorMessage));
+  }, [onError]);
+
+  // Initialize
+  useEffect(() => {
+    if (skipAutoCheck) return;
+
+    let mounted = true;
+
+    const initAuth = async () => {
+      try {
+        const callbackSession = crossDomainAuth.handleRedirectCallback();
+        if (callbackSession && mounted) {
+          await handleAuthSuccess(callbackSession, 'redirect');
+          return;
+        }
+
+        const restoredUser = await authManager.initialize();
+        if (restoredUser && mounted) {
+          try {
+            const currentUser = await oxyServices.getCurrentUser();
+            if (mounted && currentUser) {
+              setUser(currentUser);
+              setIsLoading(false);
+              return;
+            }
+          } catch {
+            await authManager.signOut();
+          }
+        }
+
+        try {
+          const session = await crossDomainAuth.silentSignIn();
+          if (mounted && session?.user) {
+            await handleAuthSuccess(session, 'fedcm');
+            return;
+          }
+        } catch {
+          // Silent sign-in failed
+        }
+
+        if (mounted) setIsLoading(false);
+      } catch {
+        if (mounted) setIsLoading(false);
+      }
+    };
+
+    initAuth();
+    return () => { mounted = false; };
+  }, [oxyServices, crossDomainAuth, authManager, skipAutoCheck, handleAuthSuccess]);
+
+  useEffect(() => {
+    onAuthStateChange?.(user);
+  }, [user, onAuthStateChange]);
+
+  const signIn = useCallback(async () => {
+    setError(null);
+    setIsLoading(true);
+
+    let selectedMethod: 'fedcm' | 'popup' | 'redirect' = 'popup';
+
+    try {
+      const session = await crossDomainAuth.signIn({
+        method: preferredAuthMethod,
+        onMethodSelected: (method) => {
+          selectedMethod = method as 'fedcm' | 'popup' | 'redirect';
+        },
+      });
+
+      if (session) {
+        await handleAuthSuccess(session, selectedMethod);
+      } else {
+        setIsLoading(false);
+      }
+    } catch (err) {
+      handleAuthError(err);
+    }
+  }, [crossDomainAuth, preferredAuthMethod, handleAuthSuccess, handleAuthError]);
+
+  const signInWithFedCM = useCallback(async () => {
+    setError(null);
+    setIsLoading(true);
+    try {
+      const session = await crossDomainAuth.signInWithFedCM();
+      await handleAuthSuccess(session, 'fedcm');
+    } catch (err) {
+      handleAuthError(err);
+    }
+  }, [crossDomainAuth, handleAuthSuccess, handleAuthError]);
+
+  const signInWithPopup = useCallback(async () => {
+    setError(null);
+    setIsLoading(true);
+    try {
+      const session = await crossDomainAuth.signInWithPopup();
+      await handleAuthSuccess(session, 'popup');
+    } catch (err) {
+      handleAuthError(err);
+    }
+  }, [crossDomainAuth, handleAuthSuccess, handleAuthError]);
+
+  const signInWithRedirect = useCallback(() => {
+    setError(null);
+    crossDomainAuth.signInWithRedirect({
+      redirectUri: typeof window !== 'undefined' ? window.location.href : undefined,
+    });
+  }, [crossDomainAuth]);
+
+  const isFedCMSupported = useCallback(() => {
+    return crossDomainAuth.isFedCMSupported();
+  }, [crossDomainAuth]);
+
+  const signOut = useCallback(async () => {
+    setError(null);
+    try {
+      await authManager.signOut();
+      setUser(null);
+      setActiveSessionId(null);
+      setSessions([]);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Sign out failed';
+      setError(errorMessage);
+      onError?.(err instanceof Error ? err : new Error(errorMessage));
+    }
+  }, [authManager, onError]);
+
+  const switchSession = useCallback(async (sessionId: string) => {
+    try {
+      const result = await oxyServices.getTokenBySession(sessionId);
+      if (result) {
+        setActiveSessionId(sessionId);
+        const currentUser = await oxyServices.getCurrentUser();
+        if (currentUser) setUser(currentUser);
+      }
+    } catch (err) {
+      handleAuthError(err);
+    }
+  }, [oxyServices, handleAuthError]);
+
+  const clearSessionState = useCallback(async () => {
+    await authManager.signOut();
+    setUser(null);
+    setActiveSessionId(null);
+    setSessions([]);
+  }, [authManager]);
+
+  useEffect(() => {
+    return () => { authManager.destroy(); };
+  }, [authManager]);
+
+  const contextValue = useMemo<WebOxyContextValue>(() => ({
+    user,
+    isAuthenticated,
+    isLoading,
+    error,
+    activeSessionId,
+    sessions,
+    oxyServices,
+    crossDomainAuth,
+    authManager,
+    signIn,
+    signInWithFedCM,
+    signInWithPopup,
+    signInWithRedirect,
+    signOut,
+    isFedCMSupported,
+    switchSession,
+    clearSessionState,
+  }), [
+    user, isAuthenticated, isLoading, error, activeSessionId, sessions,
+    oxyServices, crossDomainAuth, authManager,
+    signIn, signInWithFedCM, signInWithPopup, signInWithRedirect,
+    signOut, isFedCMSupported, switchSession, clearSessionState,
+  ]);
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <WebOxyContext.Provider value={contextValue}>
+        {children}
+      </WebOxyContext.Provider>
+    </QueryClientProvider>
+  );
+}
+
+/**
+ * Hook to access the full Web Oxy context.
+ */
+export function useWebOxy(): WebOxyContextValue {
+  const context = useContext(WebOxyContext);
+  if (!context) {
+    throw new Error('useWebOxy must be used within WebOxyProvider');
+  }
+  return context;
+}
+
+/**
+ * Hook for authentication in web apps.
+ *
+ * @example
+ * ```tsx
+ * function LoginPage() {
+ *   const { user, isAuthenticated, signIn, signOut } = useAuth();
+ *   if (!isAuthenticated) return <button onClick={signIn}>Sign in</button>;
+ *   return <button onClick={signOut}>Sign out</button>;
+ * }
+ * ```
+ */
+export function useAuth() {
+  const ctx = useWebOxy();
+  return {
+    user: ctx.user,
+    isAuthenticated: ctx.isAuthenticated,
+    isLoading: ctx.isLoading,
+    isReady: !ctx.isLoading,
+    error: ctx.error,
+    activeSessionId: ctx.activeSessionId,
+    sessions: ctx.sessions,
+    signIn: ctx.signIn,
+    signInWithFedCM: ctx.signInWithFedCM,
+    signInWithPopup: ctx.signInWithPopup,
+    signInWithRedirect: ctx.signInWithRedirect,
+    signOut: ctx.signOut,
+    isFedCMSupported: ctx.isFedCMSupported,
+    switchSession: ctx.switchSession,
+    oxyServices: ctx.oxyServices,
+    authManager: ctx.authManager,
+  };
+}
+
+export default WebOxyProvider;

package/src/global.d.ts

@@ -0,0 +1 @@
+declare const __DEV__: boolean;

package/src/hooks/mutations/index.ts

@@ -0,0 +1,25 @@
+/**
+ * Mutation Hooks
+ * 
+ * TanStack Query mutation hooks for updating Oxy services data.
+ * All mutations handle authentication, error handling, and query invalidation.
+ */
+
+// Account mutation hooks
+export {
+  useUpdateProfile,
+  useUploadAvatar,
+  useUpdateAccountSettings,
+  useUpdatePrivacySettings,
+  useUploadFile,
+} from './useAccountMutations';
+
+// Service mutation hooks (sessions, devices)
+export {
+  useSwitchSession,
+  useLogoutSession,
+  useLogoutAll,
+  useUpdateDeviceName,
+  useRemoveDevice,
+} from './useServicesMutations';
+

package/src/hooks/mutations/mutationFactory.ts

@@ -0,0 +1,215 @@
+/**
+ * Mutation Factory - Creates standardized mutations with optimistic updates
+ *
+ * This factory reduces boilerplate code for mutations that follow the common pattern:
+ * 1. Cancel outgoing queries
+ * 2. Snapshot previous data
+ * 3. Apply optimistic update
+ * 4. On error: rollback and show toast
+ * 5. On success: update cache, stores, and invalidate queries
+ */
+
+import { QueryClient, UseMutationOptions } from '@tanstack/react-query';
+import type { User } from '@oxyhq/core';
+import { queryKeys, invalidateAccountQueries, invalidateUserQueries } from '../queries/queryKeys';
+import { toast } from 'sonner';
+import { useAuthStore } from '../../stores/authStore';
+
+/**
+ * Configuration for creating a standard profile mutation
+ */
+export interface ProfileMutationConfig<TData, TVariables> {
+  /** The mutation function that makes the API call */
+  mutationFn: (variables: TVariables) => Promise<TData>;
+  /** Query keys to cancel before mutation */
+  cancelQueryKeys?: unknown[][];
+  /** Function to apply optimistic update to the user data */
+  optimisticUpdate?: (previousUser: User, variables: TVariables) => Partial<User>;
+  /** Error message to show on failure */
+  errorMessage?: string | ((error: Error) => string);
+  /** Success message to show (optional) */
+  successMessage?: string;
+  /** Whether to update authStore on success (default: true) */
+  updateAuthStore?: boolean;
+  /** Whether to invalidate user queries on success (default: true) */
+  invalidateUserQueries?: boolean;
+  /** Whether to invalidate account queries on success (default: true) */
+  invalidateAccountQueries?: boolean;
+  /** Custom onSuccess handler */
+  onSuccess?: (data: TData, variables: TVariables, queryClient: QueryClient) => void;
+}
+
+/**
+ * Creates a standard profile mutation with optimistic updates
+ *
+ * @example
+ * ```ts
+ * const updateProfile = createProfileMutation({
+ *   mutationFn: (updates) => oxyServices.updateProfile(updates),
+ *   optimisticUpdate: (user, updates) => updates,
+ *   errorMessage: 'Failed to update profile',
+ * });
+ * ```
+ */
+export function createProfileMutation<TVariables>(
+  config: ProfileMutationConfig<User, TVariables>,
+  queryClient: QueryClient,
+  activeSessionId: string | null
+): UseMutationOptions<User, Error, TVariables, { previousUser?: User }> {
+  const {
+    mutationFn,
+    cancelQueryKeys = [],
+    optimisticUpdate,
+    errorMessage = 'Operation failed',
+    successMessage,
+    updateAuthStore = true,
+    invalidateUserQueries: shouldInvalidateUserQueries = true,
+    invalidateAccountQueries: shouldInvalidateAccountQueries = true,
+    onSuccess: customOnSuccess,
+  } = config;
+
+  return {
+    mutationFn,
+
+    onMutate: async (variables) => {
+      // Cancel queries that might conflict
+      await queryClient.cancelQueries({ queryKey: queryKeys.accounts.current() });
+      for (const key of cancelQueryKeys) {
+        await queryClient.cancelQueries({ queryKey: key });
+      }
+
+      // Snapshot previous user data
+      const previousUser = queryClient.getQueryData<User>(queryKeys.accounts.current());
+
+      // Apply optimistic update if provided
+      if (previousUser && optimisticUpdate) {
+        const updates = optimisticUpdate(previousUser, variables);
+        const optimisticUser = { ...previousUser, ...updates };
+
+        queryClient.setQueryData<User>(queryKeys.accounts.current(), optimisticUser);
+
+        if (activeSessionId) {
+          queryClient.setQueryData<User>(queryKeys.users.profile(activeSessionId), optimisticUser);
+        }
+      }
+
+      return { previousUser };
+    },
+
+    onError: (error, _variables, context) => {
+      // Rollback optimistic update
+      if (context?.previousUser) {
+        queryClient.setQueryData(queryKeys.accounts.current(), context.previousUser);
+        if (activeSessionId) {
+          queryClient.setQueryData(queryKeys.users.profile(activeSessionId), context.previousUser);
+        }
+      }
+
+      // Show error toast
+      const message = typeof errorMessage === 'function'
+        ? errorMessage(error)
+        : (error instanceof Error ? error.message : errorMessage);
+      toast.error(message);
+    },
+
+    onSuccess: (data, variables) => {
+      // Update cache with server response
+      queryClient.setQueryData(queryKeys.accounts.current(), data);
+      if (activeSessionId) {
+        queryClient.setQueryData(queryKeys.users.profile(activeSessionId), data);
+      }
+
+      // Update authStore for immediate UI updates
+      if (updateAuthStore) {
+        useAuthStore.getState().setUser(data);
+      }
+
+      // Invalidate related queries
+      if (shouldInvalidateUserQueries) {
+        invalidateUserQueries(queryClient);
+      }
+      if (shouldInvalidateAccountQueries) {
+        invalidateAccountQueries(queryClient);
+      }
+
+      // Show success toast if configured
+      if (successMessage) {
+        toast.success(successMessage);
+      }
+
+      // Call custom onSuccess handler
+      if (customOnSuccess) {
+        customOnSuccess(data, variables, queryClient);
+      }
+    },
+  };
+}
+
+/**
+ * Configuration for creating a generic mutation (non-profile)
+ */
+export interface GenericMutationConfig<TData, TVariables, TContext> {
+  /** The mutation function */
+  mutationFn: (variables: TVariables) => Promise<TData>;
+  /** Query key for optimistic data */
+  queryKey: unknown[];
+  /** Function to create optimistic data */
+  optimisticData?: (previous: TData | undefined, variables: TVariables) => TData;
+  /** Error message */
+  errorMessage?: string;
+  /** Success message */
+  successMessage?: string;
+  /** Additional queries to invalidate on success */
+  invalidateQueries?: unknown[][];
+}
+
+/**
+ * Creates a generic mutation with optimistic updates
+ */
+export function createGenericMutation<TData, TVariables>(
+  config: GenericMutationConfig<TData, TVariables, { previous?: TData }>,
+  queryClient: QueryClient
+): UseMutationOptions<TData, Error, TVariables, { previous?: TData }> {
+  const {
+    mutationFn,
+    queryKey,
+    optimisticData,
+    errorMessage = 'Operation failed',
+    successMessage,
+    invalidateQueries = [],
+  } = config;
+
+  return {
+    mutationFn,
+
+    onMutate: async (variables) => {
+      await queryClient.cancelQueries({ queryKey });
+      const previous = queryClient.getQueryData<TData>(queryKey);
+
+      if (optimisticData) {
+        queryClient.setQueryData<TData>(queryKey, optimisticData(previous, variables));
+      }
+
+      return { previous };
+    },
+
+    onError: (error, _variables, context) => {
+      if (context?.previous !== undefined) {
+        queryClient.setQueryData(queryKey, context.previous);
+      }
+      toast.error(error instanceof Error ? error.message : errorMessage);
+    },
+
+    onSuccess: (data) => {
+      queryClient.setQueryData(queryKey, data);
+
+      for (const key of invalidateQueries) {
+        queryClient.invalidateQueries({ queryKey: key });
+      }
+
+      if (successMessage) {
+        toast.success(successMessage);
+      }
+    },
+  };
+}