@robosystems/core 0.3.0

package/auth-components/SignInForm.js

@@ -0,0 +1,139 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { RoboSystemsAuthClient } from '../auth-core/client';
+import { getAppConfig } from '../auth-core/config';
+import { useSSO } from '../auth-core/sso';
+import { LogoBadge, Spinner } from '../ui-components';
+/**
+ * Map a login failure to a user-facing message. A connectivity failure (the
+ * request never reached the server — `fetch` throws a `TypeError`) must NOT be
+ * reported as bad credentials: that sends users to reset a password that is
+ * actually correct. Reached-server auth rejection (401/403, or an empty/invalid
+ * auth body) stays "Invalid email or password"; 5xx gets its own message.
+ */
+export function loginErrorMessage(error) {
+    var _a, _b, _c;
+    const err = error;
+    const status = (_a = err === null || err === void 0 ? void 0 : err.status) !== null && _a !== void 0 ? _a : (_b = err === null || err === void 0 ? void 0 : err.response) === null || _b === void 0 ? void 0 : _b.status;
+    const message = String((_c = err === null || err === void 0 ? void 0 : err.message) !== null && _c !== void 0 ? _c : '');
+    if (error instanceof TypeError ||
+        /failed to fetch|networkerror|load failed|fetch failed|err_(connection|network|name_not_resolved)/i.test(message)) {
+        return 'Unable to reach the server. Check your connection and try again.';
+    }
+    if (typeof status === 'number' && status >= 500) {
+        return 'The server ran into a problem. Please try again in a moment.';
+    }
+    return 'Invalid email or password';
+}
+export function SignInForm({ onSuccess, onRedirect, redirectTo = '/home', className = '', apiUrl, enableSSO = true, currentApp, }) {
+    const [formData, setFormData] = useState({
+        email: '',
+        password: '',
+    });
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState('');
+    const [ssoChecking, setSSOChecking] = useState(enableSSO);
+    const [redirecting, setRedirecting] = useState(false);
+    const authClient = useMemo(() => new RoboSystemsAuthClient(apiUrl), [apiUrl]);
+    const { checkSSOAuthentication, handleSSOLogin } = useSSO(apiUrl);
+    // Check for existing authentication or SSO login on mount
+    useEffect(() => {
+        if (!enableSSO)
+            return;
+        const checkAuth = async () => {
+            try {
+                // Capture returnUrl before handleSSOLogin cleans up URL params
+                const urlParams = new URLSearchParams(window.location.search);
+                const ssoReturnUrl = urlParams.get('returnUrl');
+                // Check for SSO login from URL parameters
+                const ssoUser = await handleSSOLogin();
+                if (ssoUser) {
+                    setRedirecting(true);
+                    if (onSuccess) {
+                        onSuccess(ssoUser);
+                    }
+                    // handleSSOLogin schedules navigation to returnUrl if present;
+                    // only redirect to the default if no returnUrl was specified
+                    if (!ssoReturnUrl) {
+                        window.location.href = redirectTo;
+                    }
+                    return;
+                }
+                // Check if user is already authenticated via regular session
+                try {
+                    const existingUser = await checkSSOAuthentication();
+                    if (existingUser) {
+                        setRedirecting(true);
+                        if (onSuccess) {
+                            onSuccess(existingUser);
+                        }
+                        window.location.href = redirectTo;
+                        return;
+                    }
+                }
+                catch (_a) {
+                    // User not authenticated, continue to login form
+                }
+                // Only hide spinner if authentication failed
+                setSSOChecking(false);
+            }
+            catch (error) {
+                if (process.env.NODE_ENV === 'development') {
+                    console.error('Auth check failed:', error);
+                }
+                setSSOChecking(false);
+            }
+        };
+        checkAuth();
+    }, [
+        enableSSO,
+        redirectTo,
+        onSuccess,
+        handleSSOLogin,
+        checkSSOAuthentication,
+        authClient,
+    ]);
+    const handleInputChange = (e) => {
+        const { name, value } = e.target;
+        setFormData((prev) => (Object.assign(Object.assign({}, prev), { [name]: value })));
+    };
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setLoading(true);
+        setError('');
+        try {
+            const result = await authClient.login(formData.email, formData.password);
+            // Call onSuccess callback if provided
+            if (onSuccess) {
+                onSuccess(result.user);
+            }
+            // Set redirecting state to keep showing loading
+            setRedirecting(true);
+            // Use window.location.href for reliable redirect
+            window.location.href = redirectTo;
+        }
+        catch (error) {
+            setError(loginErrorMessage(error));
+            setLoading(false);
+        }
+    };
+    const handleSignUpClick = () => {
+        if (onRedirect) {
+            onRedirect('/register');
+        }
+        else {
+            window.location.href = '/register';
+        }
+    };
+    // Determine app name based on currentApp prop
+    const appName = getAppConfig(currentApp || 'robosystems').displayName;
+    if (ssoChecking || redirecting) {
+        return (_jsx("div", { className: "via-primary-950 flex min-h-screen items-center justify-center bg-linear-to-br from-black to-zinc-900 p-6", children: _jsx("div", { className: "w-full max-w-md", children: _jsxs("div", { className: "text-center", children: [_jsx(LogoBadge, { animate: "loop", className: "mx-auto h-16 w-16" }), _jsx("h1", { className: "font-heading mt-4 text-center text-2xl font-semibold tracking-tight text-white", children: appName })] }) }) }));
+    }
+    return (_jsx("div", { className: "via-primary-950 flex min-h-screen items-center justify-center bg-linear-to-br from-black to-zinc-900 px-4 py-12 sm:px-6 lg:px-8", children: _jsxs("div", { className: "w-full max-w-lg space-y-8", children: [_jsxs("div", { className: "text-center", children: [_jsx(LogoBadge, { animate: "once", className: "mx-auto h-14 w-14" }), _jsx("h1", { className: "font-heading mt-4 text-center text-2xl font-semibold tracking-tight text-white", children: appName }), _jsx("h2", { className: "mt-2 text-center text-xl font-semibold tracking-tight text-gray-300", children: "Sign in to your account" })] }), _jsxs("form", { className: ['mt-8 space-y-6', className].filter(Boolean).join(' '), onSubmit: handleSubmit, children: [error && (_jsx("div", { className: "rounded-md border border-red-800 bg-red-900/50 p-4", children: _jsx("div", { className: "text-sm text-red-300", children: error }) })), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "email", className: "sr-only", children: "Email address" }), _jsx("input", { id: "email", name: "email", type: "email", autoComplete: "email", required: true, value: formData.email, onChange: handleInputChange, className: "focus:ring-primary-500 relative block w-full rounded-md border-0 bg-gray-800 px-5 py-4 text-base leading-7 text-white ring-1 ring-gray-600 ring-inset placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset", placeholder: "Email address", disabled: loading || redirecting })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "password", className: "sr-only", children: "Password" }), _jsx("input", { id: "password", name: "password", type: "password", autoComplete: "current-password", required: true, value: formData.password, onChange: handleInputChange, className: "focus:ring-primary-500 relative block w-full rounded-md border-0 bg-gray-800 px-5 py-4 text-base leading-7 text-white ring-1 ring-gray-600 ring-inset placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset", placeholder: "Password", disabled: loading || redirecting })] })] }), _jsx("div", { children: _jsxs("button", { type: "submit", disabled: loading || redirecting, className: "group bg-primary-600 hover:bg-primary-700 focus-visible:outline-primary-500 relative flex w-full justify-center rounded-md px-4 py-3 text-sm font-semibold text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid disabled:cursor-not-allowed disabled:opacity-50", children: [loading && _jsx(Spinner, { size: "sm", className: "mr-2 text-white" }), redirecting
+                                        ? 'Redirecting...'
+                                        : loading
+                                            ? 'Signing in...'
+                                            : 'Sign in'] }) }), _jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx("a", { href: "/auth/forgot-password", className: "hover:text-primary-400 text-sm text-gray-300", children: "Forgot password?" }), _jsx("button", { type: "button", onClick: handleSignUpClick, className: "hover:text-primary-400 text-sm font-medium text-gray-300", children: "Don't have an account? Sign up" })] })] })] }) }));
+}

package/auth-components/SignUpForm.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { AuthUser } from '../auth-core/types';
+export interface SignUpFormProps {
+    onSuccess?: (user: AuthUser) => void;
+    onRedirect?: (url: string) => void;
+    redirectTo?: string;
+    className?: string;
+    showConfirmPassword?: boolean;
+    showTermsAcceptance?: boolean;
+    autoSignIn?: boolean;
+    apiUrl: string;
+    currentApp?: string;
+    turnstileSiteKey?: string;
+}
+export declare function SignUpForm({ onSuccess, onRedirect, redirectTo, className, showConfirmPassword, showTermsAcceptance, autoSignIn, apiUrl, currentApp, turnstileSiteKey, }: SignUpFormProps): React.JSX.Element;

package/auth-components/SignUpForm.js

@@ -0,0 +1,167 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { RoboSystemsAuthClient } from '../auth-core/client';
+import { getAppConfig } from '../auth-core/config';
+import { LogoBadge, Spinner } from '../ui-components';
+import { TurnstileWidget } from './TurnstileWidget';
+export function SignUpForm({ onSuccess, onRedirect, redirectTo = '/login', className = '', showConfirmPassword = true, showTermsAcceptance = true, autoSignIn = false, apiUrl, currentApp, turnstileSiteKey, }) {
+    const [formData, setFormData] = useState({
+        name: '',
+        email: '',
+        password: '',
+        confirmPassword: '',
+    });
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState('');
+    const [captchaToken, setCaptchaToken] = useState(null);
+    const [captchaError, setCaptchaError] = useState(null);
+    const [passwordStrength, setPasswordStrength] = useState(null);
+    const [checkingPassword, setCheckingPassword] = useState(false);
+    const debounceRef = useRef(null);
+    const authClientRef = useRef(new RoboSystemsAuthClient(apiUrl));
+    const checkPassword = useCallback(async (password, email) => {
+        if (password.length < 4) {
+            setPasswordStrength(null);
+            return;
+        }
+        setCheckingPassword(true);
+        try {
+            const result = await authClientRef.current.checkPasswordStrength(password, email || undefined);
+            setPasswordStrength(result);
+        }
+        catch (_a) {
+            setPasswordStrength(null);
+        }
+        finally {
+            setCheckingPassword(false);
+        }
+    }, []);
+    useEffect(() => {
+        if (debounceRef.current)
+            clearTimeout(debounceRef.current);
+        if (formData.password.length < 4) {
+            setPasswordStrength(null);
+            return;
+        }
+        debounceRef.current = setTimeout(() => {
+            checkPassword(formData.password, formData.email);
+        }, 400);
+        return () => {
+            if (debounceRef.current)
+                clearTimeout(debounceRef.current);
+        };
+    }, [formData.password, formData.email, checkPassword]);
+    const handleInputChange = (e) => {
+        const { name, value } = e.target;
+        setFormData((prev) => (Object.assign(Object.assign({}, prev), { [name]: value })));
+    };
+    const handleCaptchaVerify = (token) => {
+        setCaptchaToken(token);
+        setCaptchaError(null);
+    };
+    const handleCaptchaError = (error) => {
+        setCaptchaError(error);
+        setCaptchaToken(null);
+    };
+    const handleCaptchaExpire = () => {
+        setCaptchaToken(null);
+        setCaptchaError('CAPTCHA expired. Please verify again.');
+    };
+    const handleSubmit = async (e) => {
+        var _a, _b;
+        e.preventDefault();
+        setLoading(true);
+        setError('');
+        setCaptchaError(null);
+        // Validate confirm password if enabled
+        if (showConfirmPassword && formData.password !== formData.confirmPassword) {
+            setError('Passwords do not match');
+            setLoading(false);
+            return;
+        }
+        // Validate password strength
+        if (checkingPassword) {
+            setError('Checking password strength, please wait...');
+            setLoading(false);
+            return;
+        }
+        if (passwordStrength && !passwordStrength.is_valid) {
+            setError(passwordStrength.errors.length > 0
+                ? passwordStrength.errors.join('. ')
+                : 'Password does not meet requirements');
+            setLoading(false);
+            return;
+        }
+        // Check CAPTCHA if site key is provided (production mode)
+        if (turnstileSiteKey && !captchaToken) {
+            setError('Please complete the security verification to continue');
+            setLoading(false);
+            return;
+        }
+        try {
+            const result = await authClientRef.current.register(formData.email, formData.password, formData.name, captchaToken || undefined);
+            // Call onSuccess callback if provided
+            if (onSuccess) {
+                onSuccess(result.user);
+            }
+            // Use window.location.href for reliable redirect
+            window.location.href = redirectTo;
+        }
+        catch (error) {
+            // Check if it's a CAPTCHA-related error
+            if (((_a = error === null || error === void 0 ? void 0 : error.message) === null || _a === void 0 ? void 0 : _a.includes('CAPTCHA')) ||
+                ((_b = error === null || error === void 0 ? void 0 : error.message) === null || _b === void 0 ? void 0 : _b.includes('captcha'))) {
+                setError(error.message || 'CAPTCHA verification failed. Please try again.');
+                // Reset CAPTCHA on failure
+                setCaptchaToken(null);
+            }
+            else {
+                setError((error === null || error === void 0 ? void 0 : error.message) || 'Registration failed. Please try again.');
+            }
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const handleSignInClick = () => {
+        if (onRedirect) {
+            onRedirect('/login');
+        }
+        else {
+            window.location.href = '/login';
+        }
+    };
+    const handleTermsClick = (link) => {
+        if (onRedirect) {
+            onRedirect(link);
+        }
+        else {
+            window.location.href = link;
+        }
+    };
+    // Determine app name based on currentApp prop
+    const appName = getAppConfig(currentApp || 'robosystems').displayName;
+    return (_jsx("div", { className: "via-primary-950 flex min-h-screen items-center justify-center bg-linear-to-br from-black to-zinc-900 px-4 py-12 sm:px-6 lg:px-8", children: _jsxs("div", { className: "w-full max-w-lg space-y-8", children: [_jsxs("div", { className: "text-center", children: [_jsx(LogoBadge, { animate: "once", className: "mx-auto h-14 w-14" }), _jsx("h1", { className: "font-heading mt-4 text-center text-2xl font-semibold tracking-tight text-white", children: appName }), _jsx("h2", { className: "mt-6 text-center text-xl font-semibold tracking-tight text-gray-300", children: "Create your account" })] }), _jsxs("form", { className: ['mt-8 space-y-6', className].filter(Boolean).join(' '), onSubmit: handleSubmit, children: [error && (_jsx("div", { className: "rounded-md border border-red-800 bg-red-900/50 p-4", children: _jsx("div", { className: "text-sm text-red-300", children: error }) })), captchaError && (_jsx("div", { className: "rounded-md border border-red-800 bg-red-900/50 p-4", children: _jsx("div", { className: "text-sm text-red-300", children: captchaError }) })), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "name", className: "sr-only", children: "Full name" }), _jsx("input", { id: "name", name: "name", type: "text", autoComplete: "name", required: true, value: formData.name, onChange: handleInputChange, className: "focus:ring-primary-500 relative block w-full rounded-md border-0 bg-gray-800 px-5 py-4 text-base leading-7 text-white ring-1 ring-gray-600 ring-inset placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset", placeholder: "Full name", disabled: loading })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "email", className: "sr-only", children: "Email address" }), _jsx("input", { id: "email", name: "email", type: "email", autoComplete: "email", required: true, value: formData.email, onChange: handleInputChange, className: "focus:ring-primary-500 relative block w-full rounded-md border-0 bg-gray-800 px-5 py-4 text-base leading-7 text-white ring-1 ring-gray-600 ring-inset placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset", placeholder: "Email address", disabled: loading })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "password", className: "sr-only", children: "Password" }), _jsx("input", { id: "password", name: "password", type: "password", autoComplete: "new-password", required: true, value: formData.password, onChange: handleInputChange, className: "focus:ring-primary-500 relative block w-full rounded-md border-0 bg-gray-800 px-5 py-4 text-base leading-7 text-white ring-1 ring-gray-600 ring-inset placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset", placeholder: "Password", disabled: loading })] }), showConfirmPassword && (_jsxs("div", { children: [_jsx("label", { htmlFor: "confirmPassword", className: "sr-only", children: "Confirm password" }), _jsx("input", { id: "confirmPassword", name: "confirmPassword", type: "password", autoComplete: "new-password", required: true, value: formData.confirmPassword, onChange: handleInputChange, className: "focus:ring-primary-500 relative block w-full rounded-md border-0 bg-gray-800 px-5 py-4 text-base leading-7 text-white ring-1 ring-gray-600 ring-inset placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset", placeholder: "Confirm password", disabled: loading })] })), _jsx("div", { className: "min-h-[2.75rem]", children: passwordStrength && (_jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-1.5 flex-1 overflow-hidden rounded-full bg-gray-700", children: _jsx("div", { className: [
+                                                                'h-full rounded-full transition-all duration-300',
+                                                                passwordStrength.score < 30
+                                                                    ? 'bg-red-500'
+                                                                    : passwordStrength.score < 60
+                                                                        ? 'bg-yellow-500'
+                                                                        : passwordStrength.score < 80
+                                                                            ? 'bg-primary-400'
+                                                                            : 'bg-green-500',
+                                                            ].join(' '), style: { width: `${passwordStrength.score}%` } }) }), _jsx("span", { className: [
+                                                            'text-xs font-medium capitalize',
+                                                            passwordStrength.score < 30
+                                                                ? 'text-red-400'
+                                                                : passwordStrength.score < 60
+                                                                    ? 'text-yellow-400'
+                                                                    : passwordStrength.score < 80
+                                                                        ? 'text-primary-300'
+                                                                        : 'text-green-400',
+                                                        ].join(' '), children: passwordStrength.strength.replace('-', ' ') })] }), passwordStrength.errors.length > 0 && (_jsx("p", { className: "text-xs text-red-400", children: passwordStrength.errors[0] })), passwordStrength.errors.length === 0 &&
+                                                passwordStrength.suggestions.length > 0 && (_jsx("p", { className: "text-xs text-gray-400", children: passwordStrength.suggestions[0] }))] })) })] }), turnstileSiteKey && (_jsx("div", { className: "flex justify-center", children: _jsx(TurnstileWidget, { siteKey: turnstileSiteKey, onVerify: handleCaptchaVerify, onError: handleCaptchaError, onExpire: handleCaptchaExpire, theme: "dark", className: "flex justify-center", disabled: loading }) })), _jsx("div", { children: _jsxs("button", { type: "submit", disabled: loading ||
+                                    checkingPassword ||
+                                    (turnstileSiteKey && !captchaToken), className: "group bg-primary-600 hover:bg-primary-700 focus-visible:outline-primary-500 relative flex w-full justify-center rounded-md px-4 py-3 text-sm font-semibold text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid disabled:cursor-not-allowed disabled:opacity-50", children: [loading && _jsx(Spinner, { size: "sm", className: "mr-2 text-white" }), loading ? 'Creating account...' : 'Create account'] }) }), showTermsAcceptance && (_jsxs("div", { className: "text-center text-xs text-gray-400", children: ["By creating an account, you agree to our", ' ', _jsx("a", { href: `${process.env.NEXT_PUBLIC_ROBOSYSTEMS_APP_URL || 'https://robosystems.ai'}/pages/terms`, target: "_blank", rel: "noopener noreferrer", className: "hover:text-primary-400 font-medium text-gray-300", children: "Terms of Service" }), ' ', "and", ' ', _jsx("a", { href: `${process.env.NEXT_PUBLIC_ROBOSYSTEMS_APP_URL || 'https://robosystems.ai'}/pages/privacy`, target: "_blank", rel: "noopener noreferrer", className: "hover:text-primary-400 font-medium text-gray-300", children: "Privacy Policy" })] })), _jsx("div", { className: "text-center", children: _jsx("button", { type: "button", onClick: handleSignInClick, className: "hover:text-primary-400 font-medium text-gray-300", children: "Already have an account? Sign in" }) })] })] }) }));
+}

package/auth-components/TurnstileWidget.d.ts

@@ -0,0 +1,99 @@
+import React from 'react';
+export interface TurnstileWidgetProps {
+    /** Cloudflare Turnstile site key obtained from dashboard */
+    siteKey: string;
+    /** Callback fired when CAPTCHA verification succeeds */
+    onVerify: (token: string) => void;
+    /** Callback fired when CAPTCHA verification fails */
+    onError?: (error: string) => void;
+    /** Callback fired when CAPTCHA token expires */
+    onExpire?: () => void;
+    /** Callback fired when Turnstile script loads successfully */
+    onLoad?: () => void;
+    /** Widget theme - matches your site's color scheme */
+    theme?: 'light' | 'dark' | 'auto';
+    /** Widget size - use 'compact' for mobile-friendly layouts */
+    size?: 'normal' | 'compact';
+    /** Language code for widget text (e.g., 'en', 'es', 'fr') */
+    language?: string;
+    /** Additional CSS classes for styling the widget container */
+    className?: string;
+    /** Whether the widget should be disabled (prevents interaction) */
+    disabled?: boolean;
+}
+export interface TurnstileWidgetRef {
+    /** Reset the widget to its initial state, clearing any verification */
+    reset: () => void;
+    /** Get the current verification token if available */
+    getResponse: () => string | undefined;
+}
+declare global {
+    interface Window {
+        turnstile?: {
+            render: (element: HTMLElement | string, options: {
+                sitekey: string;
+                callback?: (token: string) => void;
+                'error-callback'?: (error: string) => void;
+                'expired-callback'?: () => void;
+                theme?: 'light' | 'dark' | 'auto';
+                size?: 'normal' | 'compact';
+                language?: string;
+            }) => string;
+            reset: (widgetId?: string) => void;
+            remove: (widgetId?: string) => void;
+            getResponse: (widgetId?: string) => string | undefined;
+        };
+    }
+}
+/**
+ * TurnstileWidget - A React component for Cloudflare Turnstile CAPTCHA
+ *
+ * This component provides a secure, privacy-focused CAPTCHA solution that:
+ * - Automatically loads the Turnstile script when needed
+ * - Handles widget lifecycle (render, reset, cleanup)
+ * - Provides TypeScript support with comprehensive types
+ * - Supports themes, languages, and different sizes
+ * - Prevents memory leaks with proper cleanup
+ *
+ * @example
+ * ```tsx
+ * <TurnstileWidget
+ *   siteKey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY}
+ *   onVerify={(token) => console.log('Verified:', token)}
+ *   theme="dark"
+ * />
+ * ```
+ */
+export declare const TurnstileWidget: React.ForwardRefExoticComponent<TurnstileWidgetProps & React.RefAttributes<TurnstileWidgetRef>>;
+/**
+ * useTurnstile - React hook for simplified Turnstile integration
+ *
+ * This hook manages the Turnstile widget state and provides:
+ * - Automatic token management
+ * - Error and expiration handling
+ * - Loading state tracking
+ * - Pre-configured TurnstileWidget component
+ *
+ * @param siteKey - Your Cloudflare Turnstile site key
+ * @returns Object containing token, error, loading state, and configured widget
+ *
+ * @example
+ * ```tsx
+ * const { token, error, isLoading, TurnstileWidget } = useTurnstile(siteKey)
+ *
+ * return (
+ *   <form onSubmit={handleSubmit}>
+ *     <TurnstileWidget theme="dark" />
+ *     <button disabled={!token}>Submit</button>
+ *   </form>
+ * )
+ * ```
+ */
+export declare function useTurnstile(siteKey: string): {
+    token: string;
+    error: string;
+    isLoading: boolean;
+    isExpired: boolean;
+    reset: () => void;
+    TurnstileWidget: (props: Omit<TurnstileWidgetProps, "siteKey" | "onVerify" | "onError" | "onExpire" | "onLoad">) => React.JSX.Element;
+};

package/auth-components/TurnstileWidget.js

@@ -0,0 +1,224 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useRef } from 'react';
+/**
+ * TurnstileWidget - A React component for Cloudflare Turnstile CAPTCHA
+ *
+ * This component provides a secure, privacy-focused CAPTCHA solution that:
+ * - Automatically loads the Turnstile script when needed
+ * - Handles widget lifecycle (render, reset, cleanup)
+ * - Provides TypeScript support with comprehensive types
+ * - Supports themes, languages, and different sizes
+ * - Prevents memory leaks with proper cleanup
+ *
+ * @example
+ * ```tsx
+ * <TurnstileWidget
+ *   siteKey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY}
+ *   onVerify={(token) => console.log('Verified:', token)}
+ *   theme="dark"
+ * />
+ * ```
+ */
+export const TurnstileWidget = React.forwardRef(({ siteKey, onVerify, onError, onExpire, onLoad, theme = 'auto', size = 'normal', language, className = '', disabled = false, }, ref) => {
+    const containerRef = useRef(null);
+    const widgetIdRef = useRef(null);
+    const scriptLoadedRef = useRef(false);
+    const loadTurnstileScript = useCallback(() => {
+        if (scriptLoadedRef.current ||
+            document.querySelector('script[src*="challenges.cloudflare.com"]')) {
+            return Promise.resolve();
+        }
+        return new Promise((resolve, reject) => {
+            const script = document.createElement('script');
+            script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js';
+            script.async = true;
+            script.defer = true;
+            script.onload = () => {
+                scriptLoadedRef.current = true;
+                onLoad === null || onLoad === void 0 ? void 0 : onLoad();
+                resolve();
+            };
+            script.onerror = () => {
+                reject(new Error('Failed to load Turnstile script'));
+            };
+            document.head.appendChild(script);
+        });
+    }, [onLoad]);
+    const renderWidget = useCallback(() => {
+        if (!containerRef.current || !window.turnstile || !siteKey || disabled) {
+            return;
+        }
+        // Remove existing widget if present
+        if (widgetIdRef.current) {
+            try {
+                window.turnstile.remove(widgetIdRef.current);
+            }
+            catch (error) {
+                console.warn('Failed to remove existing Turnstile widget:', error);
+            }
+            widgetIdRef.current = null;
+        }
+        // Clear container
+        containerRef.current.innerHTML = '';
+        try {
+            widgetIdRef.current = window.turnstile.render(containerRef.current, {
+                sitekey: siteKey,
+                callback: (token) => {
+                    onVerify(token);
+                },
+                'error-callback': (error) => {
+                    onError === null || onError === void 0 ? void 0 : onError(error);
+                },
+                'expired-callback': () => {
+                    onExpire === null || onExpire === void 0 ? void 0 : onExpire();
+                },
+                theme: theme,
+                size: size,
+                language,
+            });
+        }
+        catch (error) {
+            console.error('Failed to render Turnstile widget:', error);
+            onError === null || onError === void 0 ? void 0 : onError('Failed to render CAPTCHA widget');
+        }
+    }, [siteKey, onVerify, onError, onExpire, theme, size, language, disabled]);
+    const reset = useCallback(() => {
+        if (widgetIdRef.current && window.turnstile) {
+            try {
+                window.turnstile.reset(widgetIdRef.current);
+            }
+            catch (error) {
+                console.warn('Failed to reset Turnstile widget:', error);
+            }
+        }
+    }, []);
+    const getResponse = useCallback(() => {
+        if (widgetIdRef.current && window.turnstile) {
+            try {
+                return window.turnstile.getResponse(widgetIdRef.current);
+            }
+            catch (error) {
+                console.warn('Failed to get Turnstile response:', error);
+            }
+        }
+        return undefined;
+    }, []);
+    useEffect(() => {
+        if (!siteKey || disabled) {
+            return;
+        }
+        const initWidget = async () => {
+            try {
+                await loadTurnstileScript();
+                // Wait a bit for the script to fully initialize
+                setTimeout(() => {
+                    if (window.turnstile) {
+                        renderWidget();
+                    }
+                }, 100);
+            }
+            catch (error) {
+                console.error('Failed to initialize Turnstile:', error);
+                onError === null || onError === void 0 ? void 0 : onError('Failed to load CAPTCHA');
+            }
+        };
+        initWidget();
+        return () => {
+            if (widgetIdRef.current && window.turnstile) {
+                try {
+                    window.turnstile.remove(widgetIdRef.current);
+                }
+                catch (error) {
+                    console.warn('Failed to cleanup Turnstile widget:', error);
+                }
+            }
+            widgetIdRef.current = null;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [siteKey, disabled]);
+    // Re-render widget ONLY when theme, size, or language actually changes
+    // Remove renderWidget from dependencies to prevent infinite loop
+    useEffect(() => {
+        if (widgetIdRef.current && window.turnstile && !disabled) {
+            renderWidget();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [theme, size, language, disabled]);
+    // Expose reset and getResponse methods via ref
+    React.useImperativeHandle(ref, () => ({
+        reset,
+        getResponse,
+    }), [reset, getResponse]);
+    if (!siteKey || disabled) {
+        return null;
+    }
+    return (_jsx("div", { className: className, children: _jsx("div", { ref: containerRef, className: "flex justify-center", "data-testid": "turnstile-widget" }) }));
+});
+TurnstileWidget.displayName = 'TurnstileWidget';
+/**
+ * useTurnstile - React hook for simplified Turnstile integration
+ *
+ * This hook manages the Turnstile widget state and provides:
+ * - Automatic token management
+ * - Error and expiration handling
+ * - Loading state tracking
+ * - Pre-configured TurnstileWidget component
+ *
+ * @param siteKey - Your Cloudflare Turnstile site key
+ * @returns Object containing token, error, loading state, and configured widget
+ *
+ * @example
+ * ```tsx
+ * const { token, error, isLoading, TurnstileWidget } = useTurnstile(siteKey)
+ *
+ * return (
+ *   <form onSubmit={handleSubmit}>
+ *     <TurnstileWidget theme="dark" />
+ *     <button disabled={!token}>Submit</button>
+ *   </form>
+ * )
+ * ```
+ */
+export function useTurnstile(siteKey) {
+    const [token, setToken] = React.useState(null);
+    const [error, setError] = React.useState(null);
+    const [isLoading, setIsLoading] = React.useState(false);
+    const [isExpired, setIsExpired] = React.useState(false);
+    const handleVerify = useCallback((verifiedToken) => {
+        setToken(verifiedToken);
+        setError(null);
+        setIsExpired(false);
+        setIsLoading(false);
+    }, []);
+    const handleError = useCallback((errorMessage) => {
+        setError(errorMessage);
+        setToken(null);
+        setIsExpired(false);
+        setIsLoading(false);
+    }, []);
+    const handleExpire = useCallback(() => {
+        setIsExpired(true);
+        setToken(null);
+        setError(null);
+        setIsLoading(false);
+    }, []);
+    const handleLoad = useCallback(() => {
+        setIsLoading(false);
+        setError(null);
+    }, []);
+    const reset = useCallback(() => {
+        setToken(null);
+        setError(null);
+        setIsExpired(false);
+        setIsLoading(true);
+    }, []);
+    return {
+        token,
+        error,
+        isLoading,
+        isExpired,
+        reset,
+        TurnstileWidget: React.useCallback((props) => (_jsx(TurnstileWidget, Object.assign({ siteKey: siteKey, onVerify: handleVerify, onError: handleError, onExpire: handleExpire, onLoad: handleLoad }, props))), [siteKey, handleVerify, handleError, handleExpire, handleLoad]),
+    };
+}

package/auth-components/index.d.ts

@@ -0,0 +1,6 @@
+export { AppSwitcher } from './AppSwitcher';
+export { AuthGuard } from './AuthGuard';
+export { AuthProvider, useAuth } from './AuthProvider';
+export { SignInForm } from './SignInForm';
+export { SignUpForm } from './SignUpForm';
+export { TurnstileWidget, useTurnstile } from './TurnstileWidget';