@cohostvip/cohost-react 0.2.4 → 0.3.4

package/dist/__tests__/setup.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom/vitest';
+//# sourceMappingURL=setup.d.ts.map

package/dist/__tests__/setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../src/__tests__/setup.ts"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAC"}

package/dist/__tests__/setup.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

package/dist/auth/AuthContext.d.ts

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { AuthClient, type AuthConfig, type AuthState, type AuthUser, type OTPType, type SetAuthenticatedInput } from '@cohostvip/cohost-auth';
+/**
+ * Value provided by AuthContext
+ */
+export interface AuthContextValue {
+    /** Current auth state */
+    state: AuthState;
+    /** The underlying AuthClient instance */
+    client: AuthClient;
+    /** Request OTP to be sent to contact (email or phone) */
+    requestOTP: (contact: string, type?: OTPType) => Promise<boolean>;
+    /** Verify OTP and sign in */
+    verifyOTP: (contact: string, code: string) => Promise<AuthUser>;
+    /** Sign out the current user */
+    signOut: () => Promise<void>;
+    /** Get current access token (refreshing if needed) */
+    getToken: () => Promise<string | null>;
+    /** Manually set authenticated state (for custom auth flows like passkey) */
+    setAuthenticated: (input: SetAuthenticatedInput) => void;
+}
+/**
+ * Props for AuthProvider
+ */
+export type AuthProviderProps = {
+    /** Children to render */
+    children: React.ReactNode;
+} & ({
+    /** Auth configuration (creates a new client) */
+    config: AuthConfig;
+    /** Pre-existing client (mutually exclusive with config) */
+    client?: never;
+} | {
+    /** Auth configuration */
+    config?: never;
+    /** Pre-existing AuthClient instance */
+    client: AuthClient;
+});
+export declare const AuthContext: React.Context<AuthContextValue | null>;
+/**
+ * Provider component that wraps your app and provides auth context
+ *
+ * @example
+ * ```tsx
+ * import { AuthProvider } from '@cohostvip/cohost-react';
+ *
+ * function App() {
+ *   return (
+ *     <AuthProvider config={{ apiUrl: '/api' }}>
+ *       <MyApp />
+ *     </AuthProvider>
+ *   );
+ * }
+ * ```
+ */
+export declare const AuthProvider: React.FC<AuthProviderProps>;
+//# sourceMappingURL=AuthContext.d.ts.map

package/dist/auth/AuthContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthContext.d.ts","sourceRoot":"","sources":["../../src/auth/AuthContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,UAAU,EAEV,KAAK,UAAU,EACf,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,OAAO,EACZ,KAAK,qBAAqB,EAC3B,MAAM,wBAAwB,CAAC;AAEhC;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,yBAAyB;IACzB,KAAK,EAAE,SAAS,CAAC;IACjB,yCAAyC;IACzC,MAAM,EAAE,UAAU,CAAC;IACnB,yDAAyD;IACzD,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAClE,6BAA6B;IAC7B,SAAS,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAC;IAChE,gCAAgC;IAChC,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7B,sDAAsD;IACtD,QAAQ,EAAE,MAAM,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACvC,4EAA4E;IAC5E,gBAAgB,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;CAC1D;AAED;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,yBAAyB;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GAAG,CACA;IACE,gDAAgD;IAChD,MAAM,EAAE,UAAU,CAAC;IACnB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB,GACD;IACE,yBAAyB;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,uCAAuC;IACvC,MAAM,EAAE,UAAU,CAAC;CACpB,CACJ,CAAC;AAEF,eAAO,MAAM,WAAW,wCAA+C,CAAC;AAExE;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA6CpD,CAAC"}

package/dist/auth/AuthContext.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useEffect, useMemo, useRef, useState } from 'react';
+import { createAuthClient, } from '@cohostvip/cohost-auth';
+export const AuthContext = createContext(null);
+/**
+ * Provider component that wraps your app and provides auth context
+ *
+ * @example
+ * ```tsx
+ * import { AuthProvider } from '@cohostvip/cohost-react';
+ *
+ * function App() {
+ *   return (
+ *     <AuthProvider config={{ apiUrl: '/api' }}>
+ *       <MyApp />
+ *     </AuthProvider>
+ *   );
+ * }
+ * ```
+ */
+export const AuthProvider = ({ children, config, client: providedClient, }) => {
+    // Create or use provided client (stable reference)
+    const clientRef = useRef(null);
+    if (!clientRef.current) {
+        clientRef.current = providedClient ?? createAuthClient(config);
+    }
+    const client = clientRef.current;
+    // Track auth state
+    const [state, setState] = useState(() => client.getState());
+    // Initialize client and subscribe to state changes
+    useEffect(() => {
+        // Initialize on mount
+        client.initialize();
+        // Subscribe to state changes
+        const unsubscribe = client.onAuthStateChanged((newState) => {
+            setState(newState);
+        });
+        return () => {
+            unsubscribe();
+        };
+    }, [client]);
+    // Memoize context value to prevent unnecessary re-renders
+    const value = useMemo(() => ({
+        state,
+        client,
+        requestOTP: (contact, type) => client.requestOTP(contact, type),
+        verifyOTP: (contact, code) => client.verifyOTP(contact, code),
+        signOut: () => client.signOut(),
+        getToken: () => client.getToken(),
+        setAuthenticated: (input) => client.setAuthenticated(input),
+    }), [state, client]);
+    return _jsx(AuthContext.Provider, { value: value, children: children });
+};

package/dist/auth/AuthGuard.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+/**
+ * Props for AuthGuard component
+ */
+export interface AuthGuardProps {
+    /** Content to render when authenticated */
+    children: React.ReactNode;
+    /** Content to render while loading auth state (default: null) */
+    loadingFallback?: React.ReactNode;
+    /** Content to render when not authenticated (default: null) */
+    unauthenticatedFallback?: React.ReactNode;
+    /** Callback when user is not authenticated (e.g., for redirects) */
+    onUnauthenticated?: () => void;
+}
+/**
+ * Component that only renders children when authenticated
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <AuthGuard>
+ *   <ProtectedContent />
+ * </AuthGuard>
+ *
+ * // With fallbacks
+ * <AuthGuard
+ *   loadingFallback={<Spinner />}
+ *   unauthenticatedFallback={<LoginPrompt />}
+ * >
+ *   <Dashboard />
+ * </AuthGuard>
+ *
+ * // With redirect callback
+ * <AuthGuard
+ *   onUnauthenticated={() => router.push('/login')}
+ *   loadingFallback={<Spinner />}
+ * >
+ *   <AdminPanel />
+ * </AuthGuard>
+ * ```
+ */
+export declare const AuthGuard: React.FC<AuthGuardProps>;
+//# sourceMappingURL=AuthGuard.d.ts.map

package/dist/auth/AuthGuard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthGuard.d.ts","sourceRoot":"","sources":["../../src/auth/AuthGuard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,2CAA2C;IAC3C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iEAAiE;IACjE,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,+DAA+D;IAC/D,uBAAuB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1C,oEAAoE;IACpE,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAwB9C,CAAC"}

package/dist/auth/AuthGuard.js

@@ -0,0 +1,46 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useAuth } from './hooks';
+/**
+ * Component that only renders children when authenticated
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <AuthGuard>
+ *   <ProtectedContent />
+ * </AuthGuard>
+ *
+ * // With fallbacks
+ * <AuthGuard
+ *   loadingFallback={<Spinner />}
+ *   unauthenticatedFallback={<LoginPrompt />}
+ * >
+ *   <Dashboard />
+ * </AuthGuard>
+ *
+ * // With redirect callback
+ * <AuthGuard
+ *   onUnauthenticated={() => router.push('/login')}
+ *   loadingFallback={<Spinner />}
+ * >
+ *   <AdminPanel />
+ * </AuthGuard>
+ * ```
+ */
+export const AuthGuard = ({ children, loadingFallback = null, unauthenticatedFallback = null, onUnauthenticated, }) => {
+    const { state } = useAuth();
+    // Show loading fallback while auth state is being determined
+    if (state.isLoading) {
+        return _jsx(_Fragment, { children: loadingFallback });
+    }
+    // Handle unauthenticated state
+    if (!state.isAuthenticated) {
+        // Call redirect callback if provided
+        if (onUnauthenticated) {
+            onUnauthenticated();
+        }
+        return _jsx(_Fragment, { children: unauthenticatedFallback });
+    }
+    // User is authenticated, render children
+    return _jsx(_Fragment, { children: children });
+};

package/dist/auth/__tests__/auth.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=auth.test.d.ts.map

package/dist/auth/__tests__/auth.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auth.test.d.ts","sourceRoot":"","sources":["../../../src/auth/__tests__/auth.test.tsx"],"names":[],"mappings":""}

package/dist/auth/__tests__/auth.test.js

@@ -0,0 +1,241 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import * as React from 'react';
+import { AuthProvider, useAuth, useUser, useAuthClient, AuthGuard } from '../index';
+// Mock fetch globally
+const mockFetch = vi.fn();
+global.fetch = mockFetch;
+const mockOkResponse = (data) => ({
+    ok: true,
+    status: 200,
+    headers: new Headers({ 'content-type': 'application/json' }),
+    json: async () => ({ status: 'ok', data }),
+});
+const defaultConfig = {
+    apiUrl: 'https://api.example.com',
+    storage: 'memory',
+    autoRefresh: false,
+};
+describe('AuthProvider', () => {
+    beforeEach(() => {
+        mockFetch.mockReset();
+    });
+    it('should render children', () => {
+        render(_jsx(AuthProvider, { config: defaultConfig, children: _jsx("div", { "data-testid": "child", children: "Hello" }) }));
+        expect(screen.getByTestId('child')).toBeInTheDocument();
+    });
+    it('should provide auth context to children', () => {
+        function TestComponent() {
+            const auth = useAuth();
+            return _jsx("div", { "data-testid": "has-auth", children: auth ? 'yes' : 'no' });
+        }
+        render(_jsx(AuthProvider, { config: defaultConfig, children: _jsx(TestComponent, {}) }));
+        expect(screen.getByTestId('has-auth')).toHaveTextContent('yes');
+    });
+    it('should initialize and eventually set not authenticated', async () => {
+        function TestComponent() {
+            const { state } = useAuth();
+            return (_jsxs("div", { children: [_jsx("span", { "data-testid": "loading", children: state.isLoading ? 'yes' : 'no' }), _jsx("span", { "data-testid": "authenticated", children: state.isAuthenticated ? 'yes' : 'no' })] }));
+        }
+        render(_jsx(AuthProvider, { config: defaultConfig, children: _jsx(TestComponent, {}) }));
+        // Wait for initialization to complete
+        await waitFor(() => {
+            expect(screen.getByTestId('loading')).toHaveTextContent('no');
+        });
+        expect(screen.getByTestId('authenticated')).toHaveTextContent('no');
+    });
+});
+describe('useAuth', () => {
+    beforeEach(() => {
+        mockFetch.mockReset();
+    });
+    it('should throw if used outside AuthProvider', () => {
+        // Suppress console.error for this test
+        const spy = vi.spyOn(console, 'error').mockImplementation(() => { });
+        function TestComponent() {
+            useAuth();
+            return null;
+        }
+        expect(() => render(_jsx(TestComponent, {}))).toThrow('useAuth must be used within an AuthProvider');
+        spy.mockRestore();
+    });
+    it('should provide auth methods', () => {
+        function TestComponent() {
+            const { requestOTP, verifyOTP, signOut, getToken } = useAuth();
+            return (_jsx("div", { "data-testid": "has-methods", children: typeof requestOTP === 'function' &&
+                    typeof verifyOTP === 'function' &&
+                    typeof signOut === 'function' &&
+                    typeof getToken === 'function'
+                    ? 'yes'
+                    : 'no' }));
+        }
+        render(_jsx(AuthProvider, { config: defaultConfig, children: _jsx(TestComponent, {}) }));
+        expect(screen.getByTestId('has-methods')).toHaveTextContent('yes');
+    });
+    it('should call requestOTP successfully', async () => {
+        mockFetch.mockResolvedValue(mockOkResponse({ sent: true }));
+        let requestResult = null;
+        function TestComponent() {
+            const { requestOTP } = useAuth();
+            React.useEffect(() => {
+                requestOTP('test@example.com').then((result) => {
+                    requestResult = result;
+                });
+            }, [requestOTP]);
+            return null;
+        }
+        render(_jsx(AuthProvider, { config: defaultConfig, children: _jsx(TestComponent, {}) }));
+        await waitFor(() => {
+            expect(requestResult).toBe(true);
+        });
+        expect(mockFetch).toHaveBeenCalledWith('https://api.example.com/otp/request', expect.objectContaining({
+            method: 'POST',
+            body: expect.stringContaining('test@example.com'),
+        }));
+    });
+    it('should authenticate user with verifyOTP', async () => {
+        const authResult = {
+            user: {
+                uid: '123',
+                email: 'test@example.com',
+                emailVerified: true,
+                provider: 'otp',
+                providerId: 'cohost',
+            },
+            customToken: 'jwt-token',
+            isNewUser: false,
+        };
+        mockFetch.mockResolvedValue(mockOkResponse(authResult));
+        function TestComponent() {
+            const { state, verifyOTP } = useAuth();
+            const [verified, setVerified] = React.useState(false);
+            React.useEffect(() => {
+                if (!verified) {
+                    setVerified(true);
+                    verifyOTP('test@example.com', '123456');
+                }
+            }, [verified, verifyOTP]);
+            return (_jsxs("div", { children: [_jsx("span", { "data-testid": "authenticated", children: state.isAuthenticated ? 'yes' : 'no' }), _jsx("span", { "data-testid": "email", children: state.user?.email || 'none' })] }));
+        }
+        render(_jsx(AuthProvider, { config: defaultConfig, children: _jsx(TestComponent, {}) }));
+        await waitFor(() => {
+            expect(screen.getByTestId('authenticated')).toHaveTextContent('yes');
+        });
+        expect(screen.getByTestId('email')).toHaveTextContent('test@example.com');
+    });
+});
+describe('useUser', () => {
+    beforeEach(() => {
+        mockFetch.mockReset();
+    });
+    it('should return null when not authenticated', async () => {
+        function TestComponent() {
+            const user = useUser();
+            const { state } = useAuth();
+            return (_jsxs("div", { children: [_jsx("span", { "data-testid": "loading", children: state.isLoading ? 'yes' : 'no' }), _jsx("span", { "data-testid": "user", children: user ? user.email : 'null' })] }));
+        }
+        render(_jsx(AuthProvider, { config: defaultConfig, children: _jsx(TestComponent, {}) }));
+        await waitFor(() => {
+            expect(screen.getByTestId('loading')).toHaveTextContent('no');
+        });
+        expect(screen.getByTestId('user')).toHaveTextContent('null');
+    });
+    it('should return user when authenticated', async () => {
+        const authResult = {
+            user: {
+                uid: '123',
+                email: 'test@example.com',
+                emailVerified: true,
+                provider: 'otp',
+                providerId: 'cohost',
+            },
+            customToken: 'jwt-token',
+            isNewUser: false,
+        };
+        mockFetch.mockResolvedValue(mockOkResponse(authResult));
+        function TestComponent() {
+            const { verifyOTP } = useAuth();
+            const user = useUser();
+            const [verified, setVerified] = React.useState(false);
+            React.useEffect(() => {
+                if (!verified) {
+                    setVerified(true);
+                    verifyOTP('test@example.com', '123456');
+                }
+            }, [verified, verifyOTP]);
+            return _jsx("div", { "data-testid": "user", children: user ? user.email : 'null' });
+        }
+        render(_jsx(AuthProvider, { config: defaultConfig, children: _jsx(TestComponent, {}) }));
+        await waitFor(() => {
+            expect(screen.getByTestId('user')).toHaveTextContent('test@example.com');
+        });
+    });
+});
+describe('useAuthClient', () => {
+    it('should return the AuthClient instance', () => {
+        function TestComponent() {
+            const client = useAuthClient();
+            return (_jsx("div", { "data-testid": "has-client", children: client && typeof client.initialize === 'function' ? 'yes' : 'no' }));
+        }
+        render(_jsx(AuthProvider, { config: defaultConfig, children: _jsx(TestComponent, {}) }));
+        expect(screen.getByTestId('has-client')).toHaveTextContent('yes');
+    });
+});
+describe('AuthGuard', () => {
+    beforeEach(() => {
+        mockFetch.mockReset();
+    });
+    it('should show unauthenticated fallback when not authenticated', async () => {
+        function TestComponent() {
+            return (_jsx(AuthGuard, { loadingFallback: _jsx("div", { "data-testid": "loading", children: "Loading..." }), unauthenticatedFallback: _jsx("div", { "data-testid": "login", children: "Please log in" }), children: _jsx("div", { "data-testid": "protected", children: "Protected Content" }) }));
+        }
+        render(_jsx(AuthProvider, { config: defaultConfig, children: _jsx(TestComponent, {}) }));
+        // Wait for initialization to complete
+        await waitFor(() => {
+            expect(screen.queryByTestId('loading')).not.toBeInTheDocument();
+        });
+        expect(screen.getByTestId('login')).toBeInTheDocument();
+        expect(screen.queryByTestId('protected')).not.toBeInTheDocument();
+    });
+    it('should call onUnauthenticated callback when not authenticated', async () => {
+        const onUnauthenticated = vi.fn();
+        function TestComponent() {
+            return (_jsx(AuthGuard, { onUnauthenticated: onUnauthenticated, children: _jsx("div", { "data-testid": "protected", children: "Protected Content" }) }));
+        }
+        render(_jsx(AuthProvider, { config: defaultConfig, children: _jsx(TestComponent, {}) }));
+        await waitFor(() => {
+            expect(onUnauthenticated).toHaveBeenCalled();
+        });
+    });
+    it('should show children when authenticated', async () => {
+        const authResult = {
+            user: {
+                uid: '123',
+                email: 'test@example.com',
+                emailVerified: true,
+                provider: 'otp',
+                providerId: 'cohost',
+            },
+            customToken: 'jwt-token',
+            isNewUser: false,
+        };
+        mockFetch.mockResolvedValue(mockOkResponse(authResult));
+        function Wrapper() {
+            const { verifyOTP, state } = useAuth();
+            const [verified, setVerified] = React.useState(false);
+            React.useEffect(() => {
+                if (!verified && !state.isAuthenticated) {
+                    setVerified(true);
+                    verifyOTP('test@example.com', '123456');
+                }
+            }, [verified, verifyOTP, state.isAuthenticated]);
+            return (_jsx(AuthGuard, { loadingFallback: _jsx("div", { "data-testid": "loading", children: "Loading..." }), unauthenticatedFallback: _jsx("div", { "data-testid": "login", children: "Please log in" }), children: _jsx("div", { "data-testid": "protected", children: "Protected Content" }) }));
+        }
+        render(_jsx(AuthProvider, { config: defaultConfig, children: _jsx(Wrapper, {}) }));
+        await waitFor(() => {
+            expect(screen.getByTestId('protected')).toBeInTheDocument();
+        });
+        expect(screen.queryByTestId('login')).not.toBeInTheDocument();
+    });
+});

package/dist/auth/hooks.d.ts

@@ -0,0 +1,60 @@
+import type { AuthClient, AuthUser } from '@cohostvip/cohost-auth';
+import { type AuthContextValue } from './AuthContext';
+/**
+ * Hook to access auth state and methods
+ *
+ * @throws Error if used outside of AuthProvider
+ *
+ * @example
+ * ```tsx
+ * function LoginButton() {
+ *   const { state, requestOTP, verifyOTP, signOut } = useAuth();
+ *
+ *   if (state.isLoading) return <Loading />;
+ *   if (state.isAuthenticated) {
+ *     return <button onClick={signOut}>Sign Out</button>;
+ *   }
+ *   return <button onClick={() => requestOTP('user@example.com')}>Sign In</button>;
+ * }
+ * ```
+ */
+export declare function useAuth(): AuthContextValue;
+/**
+ * Hook to access the current user
+ * Returns null if not authenticated
+ *
+ * @throws Error if used outside of AuthProvider
+ *
+ * @example
+ * ```tsx
+ * function Profile() {
+ *   const user = useUser();
+ *
+ *   if (!user) return <div>Not logged in</div>;
+ *   return <div>Welcome, {user.displayName || user.email}</div>;
+ * }
+ * ```
+ */
+export declare function useUser(): AuthUser | null;
+/**
+ * Hook to access the raw AuthClient instance
+ * Useful for advanced use cases or accessing methods not exposed by useAuth
+ *
+ * @throws Error if used outside of AuthProvider
+ *
+ * @example
+ * ```tsx
+ * function TokenDisplay() {
+ *   const client = useAuthClient();
+ *   const [token, setToken] = useState<string | null>(null);
+ *
+ *   useEffect(() => {
+ *     client.getToken().then(setToken);
+ *   }, [client]);
+ *
+ *   return <div>Token: {token}</div>;
+ * }
+ * ```
+ */
+export declare function useAuthClient(): AuthClient;
+//# sourceMappingURL=hooks.d.ts.map

package/dist/auth/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/auth/hooks.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEnE;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,OAAO,IAAI,gBAAgB,CAM1C;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,OAAO,IAAI,QAAQ,GAAG,IAAI,CAGzC;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,aAAa,IAAI,UAAU,CAG1C"}

package/dist/auth/hooks.js

@@ -0,0 +1,71 @@
+import { useContext } from 'react';
+import { AuthContext } from './AuthContext';
+/**
+ * Hook to access auth state and methods
+ *
+ * @throws Error if used outside of AuthProvider
+ *
+ * @example
+ * ```tsx
+ * function LoginButton() {
+ *   const { state, requestOTP, verifyOTP, signOut } = useAuth();
+ *
+ *   if (state.isLoading) return <Loading />;
+ *   if (state.isAuthenticated) {
+ *     return <button onClick={signOut}>Sign Out</button>;
+ *   }
+ *   return <button onClick={() => requestOTP('user@example.com')}>Sign In</button>;
+ * }
+ * ```
+ */
+export function useAuth() {
+    const ctx = useContext(AuthContext);
+    if (!ctx) {
+        throw new Error('useAuth must be used within an AuthProvider');
+    }
+    return ctx;
+}
+/**
+ * Hook to access the current user
+ * Returns null if not authenticated
+ *
+ * @throws Error if used outside of AuthProvider
+ *
+ * @example
+ * ```tsx
+ * function Profile() {
+ *   const user = useUser();
+ *
+ *   if (!user) return <div>Not logged in</div>;
+ *   return <div>Welcome, {user.displayName || user.email}</div>;
+ * }
+ * ```
+ */
+export function useUser() {
+    const { state } = useAuth();
+    return state.user;
+}
+/**
+ * Hook to access the raw AuthClient instance
+ * Useful for advanced use cases or accessing methods not exposed by useAuth
+ *
+ * @throws Error if used outside of AuthProvider
+ *
+ * @example
+ * ```tsx
+ * function TokenDisplay() {
+ *   const client = useAuthClient();
+ *   const [token, setToken] = useState<string | null>(null);
+ *
+ *   useEffect(() => {
+ *     client.getToken().then(setToken);
+ *   }, [client]);
+ *
+ *   return <div>Token: {token}</div>;
+ * }
+ * ```
+ */
+export function useAuthClient() {
+    const { client } = useAuth();
+    return client;
+}

package/dist/auth/index.d.ts

@@ -0,0 +1,4 @@
+export { AuthProvider, type AuthProviderProps, type AuthContextValue } from './AuthContext';
+export { useAuth, useUser, useAuthClient } from './hooks';
+export { AuthGuard, type AuthGuardProps } from './AuthGuard';
+//# sourceMappingURL=index.d.ts.map

package/dist/auth/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/auth/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAG5F,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAG1D,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/dist/auth/index.js

@@ -0,0 +1,6 @@
+// Auth context and provider
+export { AuthProvider } from './AuthContext';
+// Hooks
+export { useAuth, useUser, useAuthClient } from './hooks';
+// Components
+export { AuthGuard } from './AuthGuard';

package/dist/context/PaymentElementContext.d.ts

@@ -5,6 +5,8 @@ export type PaymentElementProviderProps = {
 };
 export type PaymentElementContextType = {
     tokenizeCard: (cardInfo: CreditCardInformation) => Promise<any>;
+    paymentIntent: any | null;
+    isLoading: boolean;
 };
 export declare const PaymentElementProvider: React.FC<PaymentElementProviderProps>;
 /**

package/dist/context/PaymentElementContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentElementContext.d.ts","sourceRoot":"","sources":["../../src/context/PaymentElementContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAE9E,OAAO,EAAE,qBAAqB,EAAa,MAAM,yBAAyB,CAAC;AAG3E,MAAM,MAAM,2BAA2B,GAAG;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACpC,YAAY,EAAE,CAAC,QAAQ,EAAE,qBAAqB,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;CACnE,CAAC;AAUF,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAkDxE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,QAAO,yBAIpC,CAAC"}
+{"version":3,"file":"PaymentElementContext.d.ts","sourceRoot":"","sources":["../../src/context/PaymentElementContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiE,MAAM,OAAO,CAAC;AAGtF,OAAO,EAAE,qBAAqB,EAAa,MAAM,yBAAyB,CAAC;AAG3E,MAAM,MAAM,2BAA2B,GAAG;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACpC,YAAY,EAAE,CAAC,QAAQ,EAAE,qBAAqB,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IAChE,aAAa,EAAE,GAAG,GAAG,IAAI,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAC;CACtB,CAAC;AAUF,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CA2ExE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,QAAO,yBAIpC,CAAC"}

package/dist/context/PaymentElementContext.js

@@ -1,20 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useState } from 'react';
+import { createContext, useContext, useEffect, useState, useRef } from 'react';
 import { useCohostCheckout } from './CohostCheckoutContext';
+import { useCohostClient } from './CohostContext';
 import { authnetTokenizer } from '../lib/tokenizers/authnet';
 const PaymentElementContext = createContext(null);
 const tokenizers = {
     'authnet': authnetTokenizer
 };
 export const PaymentElementProvider = ({ children }) => {
-    const { cartSession } = useCohostCheckout();
+    const { cartSession, cartSessionId } = useCohostCheckout();
+    const { client } = useCohostClient();
     const [paymentIntent, setPaymentIntent] = useState(null);
     const [tokenizer, setTokenizer] = useState(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const fetchAttemptedRef = useRef(false);
     const tokenizeCard = async (cardInfo) => {
         if (!tokenizer) {
             throw new Error("Tokenizer not found");
         }
-        const paymentIntent = cartSession?.meta?.paymentIntent;
         if (!paymentIntent) {
             throw new Error("Payment intent not found");
         }
@@ -32,10 +35,35 @@ export const PaymentElementProvider = ({ children }) => {
         }
     }, [paymentIntent]);
     useEffect(() => {
-        setPaymentIntent(cartSession?.meta?.paymentIntent || null);
-    }, [cartSession]);
+        if (!cartSession) {
+            return;
+        }
+        // If cart session has payment intent, use it
+        if (cartSession.meta?.paymentIntent) {
+            setPaymentIntent(cartSession.meta.paymentIntent);
+            return;
+        }
+        // Only fetch once per mount
+        if (fetchAttemptedRef.current) {
+            return;
+        }
+        fetchAttemptedRef.current = true;
+        setIsLoading(true);
+        client.cart.getPaymentIntent(cartSessionId)
+            .then((result) => {
+            setPaymentIntent(result);
+        })
+            .catch((error) => {
+            console.error("Error fetching payment intent:", error);
+        })
+            .finally(() => {
+            setIsLoading(false);
+        });
+    }, [cartSession, cartSessionId, client]);
     return (_jsx(PaymentElementContext.Provider, { value: {
-            tokenizeCard
+            tokenizeCard,
+            paymentIntent,
+            isLoading,
         }, children: children }));
 };
 /**

package/dist/index.d.ts

@@ -6,4 +6,5 @@ export { CohostStartCheckoutProvider } from './provider/CohostStartCheckoutProvi
 export { CreditCardInformation } from './lib/tokenizers/types';
 export { useCohost } from './hooks/useCohost';
 export { formatCurrency } from './lib/utils';
+export { AuthProvider, type AuthProviderProps, type AuthContextValue, useAuth, useUser, useAuthClient, AuthGuard, type AuthGuardProps, } from './auth';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACnH,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AACnF,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,KAAK,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AACpG,OAAO,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AAC5F,OAAO,EAAE,2BAA2B,EAAE,MAAM,wCAAwC,CAAC;AACrF,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACnH,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AACnF,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,KAAK,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AACpG,OAAO,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AAC5F,OAAO,EAAE,2BAA2B,EAAE,MAAM,wCAAwC,CAAC;AACrF,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG7C,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,OAAO,EACP,OAAO,EACP,aAAa,EACb,SAAS,EACT,KAAK,cAAc,GACpB,MAAM,QAAQ,CAAC"}

package/dist/index.js

@@ -5,3 +5,5 @@ export { PaymentElementProvider, usePaymentElement } from './context/PaymentElem
 export { CohostStartCheckoutProvider } from './provider/CohostStartCheckoutProvider';
 export { useCohost } from './hooks/useCohost';
 export { formatCurrency } from './lib/utils';
+// Auth bindings
+export { AuthProvider, useAuth, useUser, useAuthClient, AuthGuard, } from './auth';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cohostvip/cohost-react",
-  "version": "0.2.4",
+  "version": "0.3.4",
   "description": "React bindings for the Cohost API",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -27,7 +27,8 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@cohostvip/cohost-node": "^0.2.4"
+    "@cohostvip/cohost-node": "workspace:^",
+    "@cohostvip/cohost-auth": "workspace:*"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "6.6.3",