@gately/react 1.0.0

package/dist/index.mjs

@@ -0,0 +1,391 @@
+import React, { createContext, useState, useEffect, useCallback, useContext } from 'react';
+import { GatelyClient } from '@gately/sdk';
+
+/**
+ * Gately React Context
+ * Provides authentication state and methods to React components
+ */
+const GatelyContext = createContext(undefined);
+function GatelyProvider({ projectId, apiUrl, children, autoRefresh = true }) {
+    const [client] = useState(() => {
+        if (typeof window === 'undefined')
+            return null;
+        try {
+            return new GatelyClient(projectId, { apiUrl, autoRefresh });
+        }
+        catch (error) {
+            console.error('Failed to initialize Gately client:', error);
+            return null;
+        }
+    });
+    const [user, setUser] = useState(null);
+    const [session, setSession] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        if (!client)
+            return;
+        setIsLoading(true);
+        setUser(client.getUser());
+        setSession(client.getSession());
+        setIsLoading(false);
+        const handleAuthStateChange = (newUser, newSession) => {
+            setUser(newUser);
+            setSession(newSession);
+            setError(null);
+        };
+        client.onAuthStateChange(handleAuthStateChange);
+        return () => {
+            client.offAuthStateChange(handleAuthStateChange);
+        };
+    }, [client]);
+    const login = useCallback(async (email, password) => {
+        if (!client)
+            throw new Error('Gately client not initialized');
+        setError(null);
+        try {
+            return await client.login(email, password);
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error(String(err));
+            setError(error);
+            throw error;
+        }
+    }, [client]);
+    const signup = useCallback(async (email, password, metadata) => {
+        if (!client)
+            throw new Error('Gately client not initialized');
+        setError(null);
+        try {
+            return await client.signup(email, password, metadata);
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error(String(err));
+            setError(error);
+            throw error;
+        }
+    }, [client]);
+    const logout = useCallback(async () => {
+        if (!client)
+            throw new Error('Gately client not initialized');
+        setError(null);
+        try {
+            await client.logout();
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error(String(err));
+            setError(error);
+            throw error;
+        }
+    }, [client]);
+    const sendMagicLink = useCallback(async (email, redirectTo) => {
+        if (!client)
+            throw new Error('Gately client not initialized');
+        setError(null);
+        try {
+            await client.sendMagicLink(email, { redirectTo });
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error(String(err));
+            setError(error);
+            throw error;
+        }
+    }, [client]);
+    const resetPassword = useCallback(async (email) => {
+        if (!client)
+            throw new Error('Gately client not initialized');
+        setError(null);
+        try {
+            await client.resetPassword(email);
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error(String(err));
+            setError(error);
+            throw error;
+        }
+    }, [client]);
+    const fetchSession = useCallback(async () => {
+        if (!client)
+            throw new Error('Gately client not initialized');
+        setError(null);
+        try {
+            return await client.fetchSession();
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error(String(err));
+            setError(error);
+            throw error;
+        }
+    }, [client]);
+    const getUserProfile = useCallback(async () => {
+        if (!client)
+            throw new Error('Gately client not initialized');
+        setError(null);
+        try {
+            return await client.getUserProfile();
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error(String(err));
+            setError(error);
+            throw error;
+        }
+    }, [client]);
+    const updateUserProfile = useCallback(async (updates) => {
+        if (!client)
+            throw new Error('Gately client not initialized');
+        setError(null);
+        try {
+            return await client.updateUserProfile(updates);
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error(String(err));
+            setError(error);
+            throw error;
+        }
+    }, [client]);
+    const deleteUserAccount = useCallback(async () => {
+        if (!client)
+            throw new Error('Gately client not initialized');
+        setError(null);
+        try {
+            await client.deleteUserAccount();
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error(String(err));
+            setError(error);
+            throw error;
+        }
+    }, [client]);
+    const changePassword = useCallback(async (current, newPassword) => {
+        if (!client)
+            throw new Error('Gately client not initialized');
+        setError(null);
+        try {
+            await client.changePassword(current, newPassword);
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error(String(err));
+            setError(error);
+            throw error;
+        }
+    }, [client]);
+    const value = {
+        user,
+        session,
+        isLoading,
+        isAuthenticated: !!session && new Date(session.expires_at) > new Date(),
+        error,
+        login,
+        signup,
+        logout,
+        sendMagicLink,
+        resetPassword,
+        fetchSession,
+        getUserProfile,
+        updateUserProfile,
+        deleteUserAccount,
+        changePassword,
+        client
+    };
+    return React.createElement(GatelyContext.Provider, { value }, children);
+}
+
+/**
+ * useAuth Hook
+ * Main hook for accessing Gately auth context
+ */
+/**
+ * Hook to access Gately authentication context
+ * Must be used inside a GatelyProvider
+ *
+ * @returns {GatelyContextValue} Auth context with user, session, and auth methods
+ *
+ * @example
+ * ```tsx
+ * function LoginForm() {
+ *   const { login, isLoading, error } = useAuth()
+ *
+ *   const handleSubmit = async (email, password) => {
+ *     try {
+ *       await login(email, password)
+ *     } catch (err) {
+ *       console.error(err)
+ *     }
+ *   }
+ *
+ *   return (
+ *     <>
+ *       {error && <p>{error.message}</p>}
+ *       <button disabled={isLoading} onClick={() => handleSubmit('test@example.com', 'pass')}>
+ *         {isLoading ? 'Logging in...' : 'Log In'}
+ *       </button>
+ *     </>
+ *   )
+ * }
+ * ```
+ */
+function useAuth() {
+    const context = useContext(GatelyContext);
+    if (context === undefined) {
+        throw new Error('useAuth must be used within a GatelyProvider');
+    }
+    return context;
+}
+
+/**
+ * useUser Hook
+ * Dedicated hook for accessing user information
+ */
+/**
+ * Hook to access and manage user information
+ *
+ * @returns {UseUserReturn} User data with loading and error states
+ *
+ * @example
+ * ```tsx
+ * function UserProfile() {
+ *   const { user, profile, isLoading, error, update } = useUser()
+ *
+ *   if (isLoading) return <p>Loading...</p>
+ *   if (error) return <p>Error: {error.message}</p>
+ *   if (!user) return <p>Not logged in</p>
+ *
+ *   return (
+ *     <div>
+ *       <p>Email: {user.email}</p>
+ *       <button onClick={() => update({ name: 'New Name' })}>
+ *         Update Profile
+ *       </button>
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+function useUser() {
+    const { user, isAuthenticated, getUserProfile, updateUserProfile, deleteUserAccount } = useAuth();
+    const [profile, setProfile] = useState(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    // Fetch user profile on mount or when auth state changes
+    useEffect(() => {
+        if (!isAuthenticated || !user) {
+            setProfile(null);
+            return;
+        }
+        const fetchProfile = async () => {
+            setIsLoading(true);
+            setError(null);
+            try {
+                const profileData = await getUserProfile();
+                setProfile(profileData);
+            }
+            catch (err) {
+                setError(err instanceof Error ? err : new Error(String(err)));
+                setProfile(null);
+            }
+            finally {
+                setIsLoading(false);
+            }
+        };
+        fetchProfile();
+    }, [isAuthenticated, user, getUserProfile]);
+    const refetch = useCallback(async () => {
+        if (!isAuthenticated) {
+            throw new Error('User must be authenticated to fetch profile');
+        }
+        setIsLoading(true);
+        setError(null);
+        try {
+            const profileData = await getUserProfile();
+            setProfile(profileData);
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error(String(err));
+            setError(error);
+            throw error;
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [isAuthenticated, getUserProfile]);
+    const update = useCallback(async (updates) => {
+        if (!isAuthenticated) {
+            throw new Error('User must be authenticated to update profile');
+        }
+        setIsLoading(true);
+        setError(null);
+        try {
+            const updatedProfile = await updateUserProfile(updates);
+            setProfile(updatedProfile);
+            return updatedProfile;
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error(String(err));
+            setError(error);
+            throw error;
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [isAuthenticated, updateUserProfile]);
+    const deleteUser = useCallback(async () => {
+        if (!isAuthenticated) {
+            throw new Error('User must be authenticated to delete account');
+        }
+        setIsLoading(true);
+        setError(null);
+        try {
+            await deleteUserAccount();
+            setProfile(null);
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error(String(err));
+            setError(error);
+            throw error;
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [isAuthenticated, deleteUserAccount]);
+    return {
+        user,
+        profile,
+        isLoading,
+        error,
+        refetch,
+        update,
+        delete: deleteUser
+    };
+}
+
+/**
+ * useProtected Hook
+ * Hook for protecting components that require authentication
+ */
+/**
+ * Hook to check if user is authenticated and protect a component
+ *
+ * @returns {UseProtectedReturn} Authentication status
+ *
+ * @example
+ * ```tsx
+ * function ProtectedPage() {
+ *   const { isAuthenticated, isLoading } = useProtected()
+ *
+ *   if (isLoading) return <p>Loading...</p>
+ *   if (!isAuthenticated) return <p>Please log in to access this page</p>
+ *
+ *   return <div>Protected content</div>
+ * }
+ * ```
+ */
+function useProtected() {
+    const { isAuthenticated, isLoading, user } = useAuth();
+    return {
+        isAuthenticated,
+        isLoading,
+        user
+    };
+}
+
+export { GatelyContext, GatelyProvider, useAuth, useProtected, useUser };

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@gately/react",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "React SDK for Gately - authentication, user management, and more",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./context": {
+      "types": "./dist/context.d.ts",
+      "import": "./dist/context.mjs",
+      "require": "./dist/context.js"
+    },
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "import": "./dist/hooks/index.mjs",
+      "require": "./dist/hooks/index.js"
+    }
+  },
+  "files": [
+    "dist/**/*"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "build:watch": "rollup -c -w",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint src/**/*.{ts,tsx}",
+    "test": "jest",
+    "clean": "rimraf dist"
+  },
+  "keywords": [
+    "gately",
+    "authentication",
+    "react",
+    "hooks",
+    "auth",
+    "user-management"
+  ],
+  "author": "Gately Team",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "dependencies": {
+    "@gately/sdk": "^2.0.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.0",
+    "@rollup/plugin-typescript": "^11.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "eslint": "^8.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "rollup": "^3.0.0",
+    "rollup-plugin-dts": "^5.0.0",
+    "tslib": "^2.8.1",
+    "typescript": "^5.9.2"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  }
+}