@gately/react 1.0.0

package/README.md

@@ -0,0 +1,277 @@
+# @gately/react
+
+React SDK for Gately authentication and user management.
+
+## Installation
+
+```bash
+npm install @gately/react @gately/sdk
+```
+
+## Quick Start
+
+Wrap your app with `GatelyProvider`:
+
+```tsx
+import { GatelyProvider } from '@gately/react'
+
+function App() {
+  return (
+    <GatelyProvider projectId="your-project-id">
+      <YourApp />
+    </GatelyProvider>
+  )
+}
+```
+
+Use the hooks in your components:
+
+```tsx
+import { useAuth, useUser, useProtected } from '@gately/react'
+
+function LoginForm() {
+  const { login, isLoading, error } = useAuth()
+
+  const handleLogin = async (email: string, password: string) => {
+    try {
+      await login(email, password)
+    } catch (err) {
+      console.error('Login failed:', err)
+    }
+  }
+
+  return (
+    <form onSubmit={(e) => {
+      e.preventDefault()
+      handleLogin('user@example.com', 'password')
+    }}>
+      {error && <p>{error.message}</p>}
+      <button disabled={isLoading}>
+        {isLoading ? 'Logging in...' : 'Log In'}
+      </button>
+    </form>
+  )
+}
+```
+
+## Hooks
+
+### `useAuth()`
+
+Main hook for accessing authentication context.
+
+```tsx
+const {
+  user,              // Current user or null
+  session,           // Current session or null
+  isLoading,         // Loading state
+  isAuthenticated,   // Is user authenticated
+  error,             // Any error from auth operations
+  
+  // Auth methods
+  login,
+  signup,
+  logout,
+  sendMagicLink,
+  resetPassword,
+  fetchSession,
+  
+  // User methods
+  getUserProfile,
+  updateUserProfile,
+  deleteUserAccount,
+  changePassword,
+  
+  // Direct client access
+  client
+} = useAuth()
+```
+
+### `useUser()`
+
+Hook for accessing and managing user profile data.
+
+```tsx
+const {
+  user,              // Current user
+  profile,           // User profile data
+  isLoading,         // Loading state
+  error,             // Any error from operations
+  refetch,           // Refetch profile
+  update,            // Update profile
+  delete             // Delete user account
+} = useUser()
+```
+
+### `useProtected()`
+
+Hook for protecting components that require authentication.
+
+```tsx
+const {
+  isAuthenticated,   // Is user authenticated
+  isLoading,         // Loading state
+  user               // Current user
+} = useProtected()
+
+if (!isAuthenticated) {
+  return <p>Please log in</p>
+}
+```
+
+## Examples
+
+### Login Form
+
+```tsx
+function LoginForm() {
+  const { login, isLoading, error } = useAuth()
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    try {
+      await login(email, password)
+    } catch (err) {
+      console.error('Login failed:', err)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      {error && <p style={{ color: 'red' }}>{error.message}</p>}
+      <input
+        type="email"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+        placeholder="Email"
+        disabled={isLoading}
+      />
+      <input
+        type="password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+        placeholder="Password"
+        disabled={isLoading}
+      />
+      <button type="submit" disabled={isLoading}>
+        {isLoading ? 'Logging in...' : 'Log In'}
+      </button>
+    </form>
+  )
+}
+```
+
+### User Profile
+
+```tsx
+function UserProfile() {
+  const { user, profile, isLoading, update } = useUser()
+
+  if (isLoading) return <p>Loading...</p>
+  if (!user) return <p>Not logged in</p>
+
+  const handleUpdateName = async () => {
+    const newName = prompt('Enter new name:')
+    if (newName) {
+      await update({ name: newName })
+    }
+  }
+
+  return (
+    <div>
+      <p>Email: {user.email}</p>
+      <p>Name: {profile?.name || 'Not set'}</p>
+      <button onClick={handleUpdateName}>Update Name</button>
+    </div>
+  )
+}
+```
+
+### Protected Route
+
+```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>
+}
+```
+
+### Sign Up
+
+```tsx
+function SignUpForm() {
+  const { signup, isLoading, error } = useAuth()
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    try {
+      await signup(email, password, {
+        name: 'New User'
+      })
+    } catch (err) {
+      console.error('Signup failed:', err)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      {error && <p style={{ color: 'red' }}>{error.message}</p>}
+      <input
+        type="email"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+        placeholder="Email"
+        disabled={isLoading}
+      />
+      <input
+        type="password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+        placeholder="Password"
+        disabled={isLoading}
+      />
+      <button type="submit" disabled={isLoading}>
+        {isLoading ? 'Signing up...' : 'Sign Up'}
+      </button>
+    </form>
+  )
+}
+```
+
+## Configuration
+
+Pass options to `GatelyProvider`:
+
+```tsx
+<GatelyProvider
+  projectId="your-project-id"
+  apiUrl="https://api.yourdomain.com"  // Optional
+  autoRefresh={true}                     // Optional, default: true
+>
+  <App />
+</GatelyProvider>
+```
+
+## Building
+
+```bash
+npm run build
+```
+
+## Testing
+
+```bash
+npm run test
+```
+
+## License
+
+MIT

package/dist/context.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Gately React Context
+ * Provides authentication state and methods to React components
+ */
+import React, { ReactNode } from 'react';
+import { GatelyClient } from '@gately/sdk';
+import type { Session, User } from '@gately/sdk';
+export interface GatelyContextValue {
+    user: User | null;
+    session: Session | null;
+    isLoading: boolean;
+    isAuthenticated: boolean;
+    error: Error | null;
+    login: (email: string, password: string) => Promise<any>;
+    signup: (email: string, password: string, metadata?: any) => Promise<any>;
+    logout: () => Promise<void>;
+    sendMagicLink: (email: string, redirectTo?: string) => Promise<void>;
+    resetPassword: (email: string) => Promise<void>;
+    fetchSession: () => Promise<Session | null>;
+    getUserProfile: () => Promise<any>;
+    updateUserProfile: (updates: any) => Promise<any>;
+    deleteUserAccount: () => Promise<void>;
+    changePassword: (current: string, newPassword: string) => Promise<void>;
+    client: GatelyClient | null;
+}
+export declare const GatelyContext: React.Context<GatelyContextValue | undefined>;
+export interface GatelyProviderProps {
+    projectId: string;
+    apiUrl?: string;
+    children: ReactNode;
+    autoRefresh?: boolean;
+}
+export declare function GatelyProvider({ projectId, apiUrl, children, autoRefresh }: GatelyProviderProps): React.FunctionComponentElement<React.ProviderProps<GatelyContextValue | undefined>>;
+export default GatelyProvider;
+//# sourceMappingURL=context.d.ts.map

package/dist/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,EAAiB,SAAS,EAAoC,MAAM,OAAO,CAAA;AACzF,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAC1C,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAA;AAEhD,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,IAAI,GAAG,IAAI,CAAA;IACjB,OAAO,EAAE,OAAO,GAAG,IAAI,CAAA;IACvB,SAAS,EAAE,OAAO,CAAA;IAClB,eAAe,EAAE,OAAO,CAAA;IACxB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;IACnB,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC,CAAA;IACxD,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,CAAC,CAAA;IACzE,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IAC3B,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACpE,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAC/C,YAAY,EAAE,MAAM,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IAC3C,cAAc,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,CAAA;IAClC,iBAAiB,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,CAAC,CAAA;IACjD,iBAAiB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IACtC,cAAc,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACvE,MAAM,EAAE,YAAY,GAAG,IAAI,CAAA;CAC5B;AAED,eAAO,MAAM,aAAa,+CAA2D,CAAA;AAErF,MAAM,WAAW,mBAAmB;IAClC,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,EAAE,SAAS,CAAA;IACnB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,MAAM,EACN,QAAQ,EACR,WAAkB,EACnB,EAAE,mBAAmB,uFA+KrB;AAED,eAAe,cAAc,CAAA"}

package/dist/context.js

@@ -0,0 +1,199 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var sdk = require('@gately/sdk');
+
+/**
+ * Gately React Context
+ * Provides authentication state and methods to React components
+ */
+const GatelyContext = React.createContext(undefined);
+function GatelyProvider({ projectId, apiUrl, children, autoRefresh = true }) {
+    const [client] = React.useState(() => {
+        if (typeof window === 'undefined')
+            return null;
+        try {
+            return new sdk.GatelyClient(projectId, { apiUrl, autoRefresh });
+        }
+        catch (error) {
+            console.error('Failed to initialize Gately client:', error);
+            return null;
+        }
+    });
+    const [user, setUser] = React.useState(null);
+    const [session, setSession] = React.useState(null);
+    const [isLoading, setIsLoading] = React.useState(true);
+    const [error, setError] = React.useState(null);
+    React.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 = React.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 = React.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 = React.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 = React.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 = React.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 = React.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 = React.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 = React.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 = React.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 = React.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);
+}
+
+exports.GatelyContext = GatelyContext;
+exports.GatelyProvider = GatelyProvider;
+exports.default = GatelyProvider;

package/dist/context.mjs

@@ -0,0 +1,193 @@
+import React, { createContext, useState, useEffect, useCallback } 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);
+}
+
+export { GatelyContext, GatelyProvider, GatelyProvider as default };