@oxyhq/auth 1.0.0

package/README.md

@@ -0,0 +1,56 @@
+# @oxyhq/auth
+
+OxyHQ Web Auth SDK. Headless React hooks for web applications. Zero React Native or Expo dependencies.
+
+## Installation
+
+```bash
+npm install @oxyhq/auth
+```
+
+### Peer Dependencies
+
+- `@oxyhq/core`
+- `react`
+
+### Dependencies
+
+- `@tanstack/react-query`
+- `zustand`
+- `socket.io-client`
+- `sonner`
+
+## Contents
+
+- **WebOxyProvider** — React context provider with auth state
+- **useAuth** — hook for signIn, signOut, user, isAuthenticated
+- **useWebOxy** — full context access including sessions, switchSession, clearSessionState
+- **Query hooks** — useCurrentUser, useUserProfile, usePrivacySettings, useSecurityActivity, and more
+- **Mutation hooks** — useUpdateProfile, useUploadAvatar, useSwitchSession, useLogoutSession, and more
+- **Stores** — authStore, assetStore, accountStore, followStore (zustand)
+- **Session management utilities**
+
+## Usage
+
+```tsx
+import { WebOxyProvider, useAuth } from '@oxyhq/auth';
+import type { User } from '@oxyhq/core';
+
+function App() {
+  return (
+    <WebOxyProvider baseURL="https://api.oxy.so">
+      <YourApp />
+    </WebOxyProvider>
+  );
+}
+
+function YourApp() {
+  const { user, isAuthenticated, signIn, signOut } = useAuth();
+
+  if (!isAuthenticated) {
+    return <button onClick={() => signIn()}>Sign In</button>;
+  }
+
+  return <p>Welcome, {user?.name}</p>;
+}
+```

package/dist/cjs/WebOxyProvider.js

@@ -0,0 +1,287 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WebOxyProvider = WebOxyProvider;
+exports.useWebOxy = useWebOxy;
+exports.useAuth = useAuth;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * @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.
+ */
+const react_1 = require("react");
+const core_1 = require("@oxyhq/core");
+const react_query_1 = require("@tanstack/react-query");
+const queryClient_1 = require("./hooks/queryClient");
+const WebOxyContext = (0, react_1.createContext)(null);
+/**
+ * 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>
+ *   );
+ * }
+ * ```
+ */
+function WebOxyProvider({ children, baseURL, authWebUrl, onAuthStateChange, onError, preferredAuthMethod = 'auto', skipAutoCheck = false, }) {
+    const [oxyServices] = (0, react_1.useState)(() => new core_1.OxyServices({ baseURL, authWebUrl }));
+    const [crossDomainAuth] = (0, react_1.useState)(() => new core_1.CrossDomainAuth(oxyServices));
+    const [authManager] = (0, react_1.useState)(() => (0, core_1.createAuthManager)(oxyServices, { autoRefresh: true }));
+    const [queryClient] = (0, react_1.useState)(() => (0, queryClient_1.createQueryClient)());
+    // Auth state
+    const [user, setUser] = (0, react_1.useState)(null);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(!skipAutoCheck);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [activeSessionId, setActiveSessionId] = (0, react_1.useState)(null);
+    const [sessions, setSessions] = (0, react_1.useState)([]);
+    const isAuthenticated = !!user;
+    const handleAuthSuccess = (0, react_1.useCallback)(async (session, method = '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);
+            }
+        }
+        catch {
+            setUser(session.user);
+        }
+        setError(null);
+        setIsLoading(false);
+    }, [authManager, oxyServices]);
+    const handleAuthError = (0, react_1.useCallback)((err) => {
+        const errorMessage = err instanceof Error ? err.message : 'Authentication failed';
+        setError(errorMessage);
+        setIsLoading(false);
+        onError?.(err instanceof Error ? err : new Error(errorMessage));
+    }, [onError]);
+    // Initialize
+    (0, react_1.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]);
+    (0, react_1.useEffect)(() => {
+        onAuthStateChange?.(user);
+    }, [user, onAuthStateChange]);
+    const signIn = (0, react_1.useCallback)(async () => {
+        setError(null);
+        setIsLoading(true);
+        let selectedMethod = 'popup';
+        try {
+            const session = await crossDomainAuth.signIn({
+                method: preferredAuthMethod,
+                onMethodSelected: (method) => {
+                    selectedMethod = method;
+                },
+            });
+            if (session) {
+                await handleAuthSuccess(session, selectedMethod);
+            }
+            else {
+                setIsLoading(false);
+            }
+        }
+        catch (err) {
+            handleAuthError(err);
+        }
+    }, [crossDomainAuth, preferredAuthMethod, handleAuthSuccess, handleAuthError]);
+    const signInWithFedCM = (0, react_1.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 = (0, react_1.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 = (0, react_1.useCallback)(() => {
+        setError(null);
+        crossDomainAuth.signInWithRedirect({
+            redirectUri: typeof window !== 'undefined' ? window.location.href : undefined,
+        });
+    }, [crossDomainAuth]);
+    const isFedCMSupported = (0, react_1.useCallback)(() => {
+        return crossDomainAuth.isFedCMSupported();
+    }, [crossDomainAuth]);
+    const signOut = (0, react_1.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 = (0, react_1.useCallback)(async (sessionId) => {
+        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 = (0, react_1.useCallback)(async () => {
+        await authManager.signOut();
+        setUser(null);
+        setActiveSessionId(null);
+        setSessions([]);
+    }, [authManager]);
+    (0, react_1.useEffect)(() => {
+        return () => { authManager.destroy(); };
+    }, [authManager]);
+    const contextValue = (0, react_1.useMemo)(() => ({
+        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 ((0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient, children: (0, jsx_runtime_1.jsx)(WebOxyContext.Provider, { value: contextValue, children: children }) }));
+}
+/**
+ * Hook to access the full Web Oxy context.
+ */
+function useWebOxy() {
+    const context = (0, react_1.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>;
+ * }
+ * ```
+ */
+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,
+    };
+}
+exports.default = WebOxyProvider;

package/dist/cjs/hooks/mutations/index.js

@@ -0,0 +1,23 @@
+"use strict";
+/**
+ * Mutation Hooks
+ *
+ * TanStack Query mutation hooks for updating Oxy services data.
+ * All mutations handle authentication, error handling, and query invalidation.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRemoveDevice = exports.useUpdateDeviceName = exports.useLogoutAll = exports.useLogoutSession = exports.useSwitchSession = exports.useUploadFile = exports.useUpdatePrivacySettings = exports.useUpdateAccountSettings = exports.useUploadAvatar = exports.useUpdateProfile = void 0;
+// Account mutation hooks
+var useAccountMutations_1 = require("./useAccountMutations");
+Object.defineProperty(exports, "useUpdateProfile", { enumerable: true, get: function () { return useAccountMutations_1.useUpdateProfile; } });
+Object.defineProperty(exports, "useUploadAvatar", { enumerable: true, get: function () { return useAccountMutations_1.useUploadAvatar; } });
+Object.defineProperty(exports, "useUpdateAccountSettings", { enumerable: true, get: function () { return useAccountMutations_1.useUpdateAccountSettings; } });
+Object.defineProperty(exports, "useUpdatePrivacySettings", { enumerable: true, get: function () { return useAccountMutations_1.useUpdatePrivacySettings; } });
+Object.defineProperty(exports, "useUploadFile", { enumerable: true, get: function () { return useAccountMutations_1.useUploadFile; } });
+// Service mutation hooks (sessions, devices)
+var useServicesMutations_1 = require("./useServicesMutations");
+Object.defineProperty(exports, "useSwitchSession", { enumerable: true, get: function () { return useServicesMutations_1.useSwitchSession; } });
+Object.defineProperty(exports, "useLogoutSession", { enumerable: true, get: function () { return useServicesMutations_1.useLogoutSession; } });
+Object.defineProperty(exports, "useLogoutAll", { enumerable: true, get: function () { return useServicesMutations_1.useLogoutAll; } });
+Object.defineProperty(exports, "useUpdateDeviceName", { enumerable: true, get: function () { return useServicesMutations_1.useUpdateDeviceName; } });
+Object.defineProperty(exports, "useRemoveDevice", { enumerable: true, get: function () { return useServicesMutations_1.useRemoveDevice; } });

package/dist/cjs/hooks/mutations/mutationFactory.js

@@ -0,0 +1,126 @@
+"use strict";
+/**
+ * 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
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createProfileMutation = createProfileMutation;
+exports.createGenericMutation = createGenericMutation;
+const queryKeys_1 = require("../queries/queryKeys");
+const sonner_1 = require("sonner");
+const authStore_1 = require("../../stores/authStore");
+/**
+ * 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',
+ * });
+ * ```
+ */
+function createProfileMutation(config, queryClient, activeSessionId) {
+    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_1.queryKeys.accounts.current() });
+            for (const key of cancelQueryKeys) {
+                await queryClient.cancelQueries({ queryKey: key });
+            }
+            // Snapshot previous user data
+            const previousUser = queryClient.getQueryData(queryKeys_1.queryKeys.accounts.current());
+            // Apply optimistic update if provided
+            if (previousUser && optimisticUpdate) {
+                const updates = optimisticUpdate(previousUser, variables);
+                const optimisticUser = { ...previousUser, ...updates };
+                queryClient.setQueryData(queryKeys_1.queryKeys.accounts.current(), optimisticUser);
+                if (activeSessionId) {
+                    queryClient.setQueryData(queryKeys_1.queryKeys.users.profile(activeSessionId), optimisticUser);
+                }
+            }
+            return { previousUser };
+        },
+        onError: (error, _variables, context) => {
+            // Rollback optimistic update
+            if (context?.previousUser) {
+                queryClient.setQueryData(queryKeys_1.queryKeys.accounts.current(), context.previousUser);
+                if (activeSessionId) {
+                    queryClient.setQueryData(queryKeys_1.queryKeys.users.profile(activeSessionId), context.previousUser);
+                }
+            }
+            // Show error toast
+            const message = typeof errorMessage === 'function'
+                ? errorMessage(error)
+                : (error instanceof Error ? error.message : errorMessage);
+            sonner_1.toast.error(message);
+        },
+        onSuccess: (data, variables) => {
+            // Update cache with server response
+            queryClient.setQueryData(queryKeys_1.queryKeys.accounts.current(), data);
+            if (activeSessionId) {
+                queryClient.setQueryData(queryKeys_1.queryKeys.users.profile(activeSessionId), data);
+            }
+            // Update authStore for immediate UI updates
+            if (updateAuthStore) {
+                authStore_1.useAuthStore.getState().setUser(data);
+            }
+            // Invalidate related queries
+            if (shouldInvalidateUserQueries) {
+                (0, queryKeys_1.invalidateUserQueries)(queryClient);
+            }
+            if (shouldInvalidateAccountQueries) {
+                (0, queryKeys_1.invalidateAccountQueries)(queryClient);
+            }
+            // Show success toast if configured
+            if (successMessage) {
+                sonner_1.toast.success(successMessage);
+            }
+            // Call custom onSuccess handler
+            if (customOnSuccess) {
+                customOnSuccess(data, variables, queryClient);
+            }
+        },
+    };
+}
+/**
+ * Creates a generic mutation with optimistic updates
+ */
+function createGenericMutation(config, queryClient) {
+    const { mutationFn, queryKey, optimisticData, errorMessage = 'Operation failed', successMessage, invalidateQueries = [], } = config;
+    return {
+        mutationFn,
+        onMutate: async (variables) => {
+            await queryClient.cancelQueries({ queryKey });
+            const previous = queryClient.getQueryData(queryKey);
+            if (optimisticData) {
+                queryClient.setQueryData(queryKey, optimisticData(previous, variables));
+            }
+            return { previous };
+        },
+        onError: (error, _variables, context) => {
+            if (context?.previous !== undefined) {
+                queryClient.setQueryData(queryKey, context.previous);
+            }
+            sonner_1.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) {
+                sonner_1.toast.success(successMessage);
+            }
+        },
+    };
+}