@proveanything/smartlinks-auth-ui 0.1.6 → 0.1.8

package/dist/index.js

@@ -10674,11 +10674,15 @@ class AuthAPI {
         });
     }
     async fetchConfig() {
+        console.log('[AuthAPI] fetchConfig called with clientId:', this.clientId);
         try {
-            return await smartlinks__namespace.authKit.load(this.clientId);
+            console.log('[AuthAPI] Calling smartlinks.authKit.load...');
+            const result = await smartlinks__namespace.authKit.load(this.clientId);
+            console.log('[AuthAPI] smartlinks.authKit.load returned:', result);
+            return result;
         }
         catch (error) {
-            console.warn('Failed to fetch UI config, using defaults:', error);
+            console.warn('[AuthAPI] Failed to fetch UI config, using defaults:', error);
             return {
                 branding: {
                     title: 'Smartlinks Auth',
@@ -11449,10 +11453,37 @@ const DEFAULT_AUTH_CONFIG = {
     emailDisplayMode: 'button',
     googleOAuthFlow: 'oneTap'
 };
-const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAuthSuccess, onAuthError, enabledProviders = ['email', 'google', 'phone'], initialMode = 'login', redirectUrl, theme = 'light', className, customization, skipConfigFetch = false, minimal = false, }) => {
+// Helper to dynamically load Google Identity Services if not already loaded
+const loadGoogleIdentityServices = () => {
+    return new Promise((resolve, reject) => {
+        // Check if already loaded
+        if (window.google?.accounts) {
+            resolve();
+            return;
+        }
+        // Check if script is already being loaded
+        const existingScript = document.querySelector('script[src="https://accounts.google.com/gsi/client"]');
+        if (existingScript) {
+            // Wait for existing script to load
+            existingScript.addEventListener('load', () => resolve());
+            existingScript.addEventListener('error', () => reject(new Error('Failed to load Google Identity Services')));
+            return;
+        }
+        // Dynamically inject the script
+        const script = document.createElement('script');
+        script.src = 'https://accounts.google.com/gsi/client';
+        script.async = true;
+        script.defer = true;
+        script.onload = () => resolve();
+        script.onerror = () => reject(new Error('Failed to load Google Identity Services'));
+        document.head.appendChild(script);
+    });
+};
+const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAuthSuccess, onAuthError, enabledProviders = ['email', 'google', 'phone'], initialMode = 'login', redirectUrl, theme = 'auto', className, customization, skipConfigFetch = false, minimal = false, }) => {
     const [mode, setMode] = React.useState(initialMode);
     const [loading, setLoading] = React.useState(false);
     const [error, setError] = React.useState();
+    const [resolvedTheme, setResolvedTheme] = React.useState('light');
     const [resetSuccess, setResetSuccess] = React.useState(false);
     const [authSuccess, setAuthSuccess] = React.useState(false);
     const [successMessage, setSuccessMessage] = React.useState();
@@ -11466,11 +11497,26 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
     const [showEmailForm, setShowEmailForm] = React.useState(false); // Track if email form should be shown when emailDisplayMode is 'button'
     const api = new AuthAPI(apiEndpoint, clientId, clientName);
     const auth = useAuth();
+    // Dark mode detection and theme management
+    React.useEffect(() => {
+        if (theme !== 'auto') {
+            setResolvedTheme(theme);
+            return;
+        }
+        // Auto-detect system theme preference
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        const updateTheme = () => setResolvedTheme(mediaQuery.matches ? 'dark' : 'light');
+        updateTheme();
+        mediaQuery.addEventListener('change', updateTheme);
+        return () => mediaQuery.removeEventListener('change', updateTheme);
+    }, [theme]);
     // Reinitialize Smartlinks SDK when apiEndpoint changes (for test/dev scenarios)
     // IMPORTANT: Preserve bearer token during reinitialization
     React.useEffect(() => {
+        console.log('[SmartlinksAuthUI] SDK reinitialize useEffect triggered', { apiEndpoint });
         const reinitializeWithToken = async () => {
             if (apiEndpoint) {
+                console.log('[SmartlinksAuthUI] Reinitializing SDK with baseURL:', apiEndpoint);
                 // Get current token before reinitializing
                 const currentToken = await auth.getToken();
                 smartlinks__namespace.initializeApi({
@@ -11485,6 +11531,9 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                     });
                 }
             }
+            else {
+                console.log('[SmartlinksAuthUI] No apiEndpoint, skipping SDK reinitialize');
+            }
         };
         reinitializeWithToken();
     }, [apiEndpoint, auth]);
@@ -11499,13 +11548,22 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
     };
     // Fetch UI configuration
     React.useEffect(() => {
+        console.log('[SmartlinksAuthUI] Config fetch useEffect triggered', {
+            skipConfigFetch,
+            clientId,
+            clientIdType: typeof clientId,
+            clientIdTruthy: !!clientId,
+            apiEndpoint
+        });
         if (skipConfigFetch) {
+            console.log('[SmartlinksAuthUI] Skipping config fetch - skipConfigFetch is true');
             setConfig(customization || {});
             return;
         }
         const fetchConfig = async () => {
             // If no clientId provided, use default config immediately without API call
             if (!clientId) {
+                console.log('[SmartlinksAuthUI] No clientId provided, using default config');
                 const defaultConfig = {
                     ...DEFAULT_AUTH_CONFIG,
                     enabledProviders: enabledProviders || ['email', 'google', 'phone']
@@ -11536,7 +11594,9 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                     }
                 }
                 // Fetch from API
+                console.log('[SmartlinksAuthUI] Fetching config from API for clientId:', clientId);
                 const fetchedConfig = await api.fetchConfig();
+                console.log('[SmartlinksAuthUI] Received config:', fetchedConfig);
                 // Merge with customization props (props take precedence)
                 const mergedConfig = { ...fetchedConfig, ...customization };
                 setConfig(mergedConfig);
@@ -11834,9 +11894,11 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
         setLoading(true);
         setError(undefined);
         try {
+            // Dynamically load Google Identity Services if not already loaded
+            await loadGoogleIdentityServices();
             const google = window.google;
-            if (!google) {
-                throw new Error('Google Identity Services not loaded. Please check your internet connection.');
+            if (!google?.accounts) {
+                throw new Error('Google Identity Services failed to initialize');
             }
             if (oauthFlow === 'popup') {
                 // Use OAuth2 popup flow (works in iframes but requires popup permission)
@@ -12006,9 +12068,9 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
         }
     };
     if (configLoading) {
-        return (jsxRuntime.jsx(AuthContainer, { theme: theme, className: className, minimal: minimal || config?.branding?.minimal || false, children: jsxRuntime.jsx("div", { style: { textAlign: 'center', padding: '2rem' }, children: jsxRuntime.jsx("div", { className: "auth-spinner" }) }) }));
+        return (jsxRuntime.jsx(AuthContainer, { theme: resolvedTheme, className: className, minimal: minimal || config?.branding?.minimal || false, children: jsxRuntime.jsx("div", { style: { textAlign: 'center', padding: '2rem' }, children: jsxRuntime.jsx("div", { className: "auth-spinner" }) }) }));
     }
-    return (jsxRuntime.jsx(AuthContainer, { theme: theme, className: className, config: config, minimal: minimal || config?.branding?.minimal || false, children: authSuccess ? (jsxRuntime.jsxs("div", { style: { textAlign: 'center', padding: '2rem' }, children: [jsxRuntime.jsx("div", { style: {
+    return (jsxRuntime.jsx(AuthContainer, { theme: resolvedTheme, className: className, config: config, minimal: minimal || config?.branding?.minimal || false, children: authSuccess ? (jsxRuntime.jsxs("div", { style: { textAlign: 'center', padding: '2rem' }, children: [jsxRuntime.jsx("div", { style: {
                         color: 'var(--auth-primary-color, #4F46E5)',
                         fontSize: '3rem',
                         marginBottom: '1rem'