@proveanything/smartlinks-auth-ui 0.1.6 → 0.1.8

package/dist/api.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../src/api.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAExE;;;GAGG;AACH,qBAAa,OAAO;IAClB,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,UAAU,CAAC,CAAS;gBAEhB,YAAY,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM;IAOjE,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,YAAY,CAAC;IAI7D,QAAQ,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC;IASnD,eAAe,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,YAAY,CAAC;IAIvD,aAAa,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC;QAAE,cAAc,EAAE,MAAM,CAAA;KAAE,CAAC;IAIvE,eAAe,CACnB,WAAW,EAAE,MAAM,EACnB,IAAI,EAAE,MAAM,GACX,OAAO,CAAC,YAAY,CAAC;IAIlB,oBAAoB,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IAQxG,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAIlH,qBAAqB,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IAIzG,qBAAqB,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IASzH,oBAAoB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,YAAY,GAAG;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IAIhF,kBAAkB,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IAStH,WAAW,IAAI,OAAO,CAAC,YAAY,CAAC;IAmBpC,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IAOjG,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,YAAY,GAAG;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;CAGlF"}
+{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../src/api.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAExE;;;GAGG;AACH,qBAAa,OAAO;IAClB,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,UAAU,CAAC,CAAS;gBAEhB,YAAY,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM;IAOjE,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,YAAY,CAAC;IAI7D,QAAQ,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC;IASnD,eAAe,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,YAAY,CAAC;IAIvD,aAAa,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC;QAAE,cAAc,EAAE,MAAM,CAAA;KAAE,CAAC;IAIvE,eAAe,CACnB,WAAW,EAAE,MAAM,EACnB,IAAI,EAAE,MAAM,GACX,OAAO,CAAC,YAAY,CAAC;IAIlB,oBAAoB,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IAQxG,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAIlH,qBAAqB,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IAIzG,qBAAqB,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IASzH,oBAAoB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,YAAY,GAAG;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IAIhF,kBAAkB,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IAStH,WAAW,IAAI,OAAO,CAAC,YAAY,CAAC;IAuBpC,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IAOjG,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,YAAY,GAAG;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;CAGlF"}

package/dist/components/SmartlinksAuthUI.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SmartlinksAuthUI.d.ts","sourceRoot":"","sources":["../../src/components/SmartlinksAuthUI.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAUnD,OAAO,KAAK,EAAE,qBAAqB,EAAyC,MAAM,UAAU,CAAC;AAqB7F,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAk4B5D,CAAC"}
+{"version":3,"file":"SmartlinksAuthUI.d.ts","sourceRoot":"","sources":["../../src/components/SmartlinksAuthUI.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAUnD,OAAO,KAAK,EAAE,qBAAqB,EAAyC,MAAM,UAAU,CAAC;AAkD7F,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAu6B5D,CAAC"}

package/dist/index.esm.js

@@ -10653,11 +10653,15 @@ class AuthAPI {
         });
     }
     async fetchConfig() {
+        console.log('[AuthAPI] fetchConfig called with clientId:', this.clientId);
         try {
-            return await smartlinks.authKit.load(this.clientId);
+            console.log('[AuthAPI] Calling smartlinks.authKit.load...');
+            const result = await smartlinks.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',
@@ -11428,10 +11432,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] = useState(initialMode);
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState();
+    const [resolvedTheme, setResolvedTheme] = useState('light');
     const [resetSuccess, setResetSuccess] = useState(false);
     const [authSuccess, setAuthSuccess] = useState(false);
     const [successMessage, setSuccessMessage] = useState();
@@ -11445,11 +11476,26 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
     const [showEmailForm, setShowEmailForm] = 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
+    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
     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.initializeApi({
@@ -11464,6 +11510,9 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                     });
                 }
             }
+            else {
+                console.log('[SmartlinksAuthUI] No apiEndpoint, skipping SDK reinitialize');
+            }
         };
         reinitializeWithToken();
     }, [apiEndpoint, auth]);
@@ -11478,13 +11527,22 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
     };
     // Fetch UI configuration
     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']
@@ -11515,7 +11573,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);
@@ -11813,9 +11873,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)
@@ -11985,9 +12047,9 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
         }
     };
     if (configLoading) {
-        return (jsx(AuthContainer, { theme: theme, className: className, minimal: minimal || config?.branding?.minimal || false, children: jsx("div", { style: { textAlign: 'center', padding: '2rem' }, children: jsx("div", { className: "auth-spinner" }) }) }));
+        return (jsx(AuthContainer, { theme: resolvedTheme, className: className, minimal: minimal || config?.branding?.minimal || false, children: jsx("div", { style: { textAlign: 'center', padding: '2rem' }, children: jsx("div", { className: "auth-spinner" }) }) }));
     }
-    return (jsx(AuthContainer, { theme: theme, className: className, config: config, minimal: minimal || config?.branding?.minimal || false, children: authSuccess ? (jsxs("div", { style: { textAlign: 'center', padding: '2rem' }, children: [jsx("div", { style: {
+    return (jsx(AuthContainer, { theme: resolvedTheme, className: className, config: config, minimal: minimal || config?.branding?.minimal || false, children: authSuccess ? (jsxs("div", { style: { textAlign: 'center', padding: '2rem' }, children: [jsx("div", { style: {
                         color: 'var(--auth-primary-color, #4F46E5)',
                         fontSize: '3rem',
                         marginBottom: '1rem'