@proveanything/smartlinks-auth-ui 0.1.8 → 0.1.10

package/dist/index.js

@@ -10610,16 +10610,51 @@ const MagicLinkForm = ({ onSubmit, onCancel, loading = false, error, }) => {
     return (jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: "auth-form", children: [jsxRuntime.jsxs("div", { className: "auth-form-group", children: [jsxRuntime.jsx("label", { htmlFor: "magic-link-email", className: "auth-label", children: "Email Address" }), jsxRuntime.jsx("input", { id: "magic-link-email", type: "email", value: email, onChange: (e) => setEmail(e.target.value), className: "auth-input", placeholder: "you@example.com", required: true, disabled: loading })] }), error && (jsxRuntime.jsx("div", { className: "auth-error-message", children: error })), jsxRuntime.jsx("button", { type: "submit", className: "auth-button auth-button-primary", disabled: loading || !email, children: loading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "auth-spinner" }), "Sending..."] })) : ('Send Magic Link') }), jsxRuntime.jsx("button", { type: "button", onClick: onCancel, className: "auth-button auth-button-secondary", disabled: loading, children: "Cancel" })] }));
 };
 
+/**
+ * Creates a normalized logger wrapper that works with different logger types
+ * - If no logger provided, returns no-op logger (silent)
+ * - If function logger, wraps it with level prefixes
+ * - If console-like object, wraps methods with prefixes
+ */
+function createLoggerWrapper(logger) {
+    if (!logger) {
+        // No-op logger when not provided
+        return {
+            log: () => { },
+            warn: () => { },
+            error: () => { },
+            debug: () => { },
+        };
+    }
+    if (typeof logger === 'function') {
+        // Function logger - call it for all levels
+        return {
+            log: (...args) => logger('[Auth]', ...args),
+            warn: (...args) => logger('[Auth WARN]', ...args),
+            error: (...args) => logger('[Auth ERROR]', ...args),
+            debug: (...args) => logger('[Auth DEBUG]', ...args),
+        };
+    }
+    // Console-like object logger
+    return {
+        log: logger.log ? (...args) => logger.log('[Auth]', ...args) : () => { },
+        warn: logger.warn ? (...args) => logger.warn('[Auth WARN]', ...args) : () => { },
+        error: logger.error ? (...args) => logger.error('[Auth ERROR]', ...args) : () => { },
+        debug: logger.debug ? (...args) => logger.debug('[Auth DEBUG]', ...args) : () => { },
+    };
+}
+
 /**
  * AuthAPI - Thin wrapper around Smartlinks SDK authKit namespace
  * All authentication operations now use the global Smartlinks SDK
  */
 class AuthAPI {
-    constructor(_apiEndpoint, clientId, clientName) {
+    constructor(_apiEndpoint, clientId, clientName, logger) {
         // apiEndpoint is kept for backward compatibility but not used
         // Smartlinks SDK is pre-configured globally
         this.clientId = clientId;
         this.clientName = clientName;
+        this.log = createLoggerWrapper(logger);
     }
     async login(email, password) {
         return smartlinks__namespace.authKit.login(this.clientId, email, password);
@@ -10674,15 +10709,15 @@ class AuthAPI {
         });
     }
     async fetchConfig() {
-        console.log('[AuthAPI] fetchConfig called with clientId:', this.clientId);
+        this.log.log('fetchConfig called with clientId:', this.clientId);
         try {
-            console.log('[AuthAPI] Calling smartlinks.authKit.load...');
+            this.log.log('Calling smartlinks.authKit.load...');
             const result = await smartlinks__namespace.authKit.load(this.clientId);
-            console.log('[AuthAPI] smartlinks.authKit.load returned:', result);
+            this.log.log('smartlinks.authKit.load returned:', result);
             return result;
         }
         catch (error) {
-            console.warn('[AuthAPI] Failed to fetch UI config, using defaults:', error);
+            this.log.warn('Failed to fetch UI config, using defaults:', error);
             return {
                 branding: {
                     title: 'Smartlinks Auth',
@@ -11479,7 +11514,7 @@ const loadGoogleIdentityServices = () => {
         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 SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAuthSuccess, onAuthError, enabledProviders = ['email', 'google', 'phone'], initialMode = 'login', redirectUrl, theme = 'auto', className, customization, skipConfigFetch = false, minimal = false, logger, }) => {
     const [mode, setMode] = React.useState(initialMode);
     const [loading, setLoading] = React.useState(false);
     const [error, setError] = React.useState();
@@ -11495,7 +11530,9 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
     const [config, setConfig] = React.useState(null);
     const [configLoading, setConfigLoading] = React.useState(!skipConfigFetch);
     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 [sdkReady, setSdkReady] = React.useState(false); // Track SDK initialization state
+    const log = React.useMemo(() => createLoggerWrapper(logger), [logger]);
+    const api = new AuthAPI(apiEndpoint, clientId, clientName, logger);
     const auth = useAuth();
     // Dark mode detection and theme management
     React.useEffect(() => {
@@ -11513,30 +11550,37 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
     // 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 });
+        log.log('SDK reinitialize useEffect triggered', { apiEndpoint });
+        setSdkReady(false); // Mark SDK as not ready during reinitialization
         const reinitializeWithToken = async () => {
             if (apiEndpoint) {
-                console.log('[SmartlinksAuthUI] Reinitializing SDK with baseURL:', apiEndpoint);
+                log.log('Reinitializing SDK with baseURL:', apiEndpoint);
                 // Get current token before reinitializing
                 const currentToken = await auth.getToken();
                 smartlinks__namespace.initializeApi({
                     baseURL: apiEndpoint,
                     proxyMode: false, // Direct API calls when custom endpoint is provided
                     ngrokSkipBrowserWarning: true,
+                    logger: logger, // Pass logger to SDK for verbose SDK logging
                 });
+                log.log('SDK reinitialized successfully');
                 // Restore bearer token after reinitialization using auth.verifyToken
                 if (currentToken) {
                     smartlinks__namespace.auth.verifyToken(currentToken).catch(err => {
-                        console.warn('Failed to restore bearer token after reinit:', err);
+                        log.warn('Failed to restore bearer token after reinit:', err);
                     });
                 }
+                // Mark SDK as ready
+                setSdkReady(true);
             }
             else {
-                console.log('[SmartlinksAuthUI] No apiEndpoint, skipping SDK reinitialize');
+                log.log('No apiEndpoint, SDK already initialized by App');
+                // SDK was initialized by App component, mark as ready
+                setSdkReady(true);
             }
         };
         reinitializeWithToken();
-    }, [apiEndpoint, auth]);
+    }, [apiEndpoint, auth, logger, log]);
     // Get the effective redirect URL (use prop or default to current page)
     const getRedirectUrl = () => {
         if (redirectUrl)
@@ -11548,22 +11592,28 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
     };
     // Fetch UI configuration
     React.useEffect(() => {
-        console.log('[SmartlinksAuthUI] Config fetch useEffect triggered', {
+        log.log('Config fetch useEffect triggered', {
             skipConfigFetch,
             clientId,
             clientIdType: typeof clientId,
             clientIdTruthy: !!clientId,
-            apiEndpoint
+            apiEndpoint,
+            sdkReady
         });
+        // Wait for SDK to be ready before fetching config
+        if (!sdkReady) {
+            log.log('SDK not ready yet, waiting...');
+            return;
+        }
         if (skipConfigFetch) {
-            console.log('[SmartlinksAuthUI] Skipping config fetch - skipConfigFetch is true');
+            log.log('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');
+                log.log('No clientId provided, using default config');
                 const defaultConfig = {
                     ...DEFAULT_AUTH_CONFIG,
                     enabledProviders: enabledProviders || ['email', 'google', 'phone']
@@ -11594,9 +11644,9 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                     }
                 }
                 // Fetch from API
-                console.log('[SmartlinksAuthUI] Fetching config from API for clientId:', clientId);
+                log.log('Fetching config from API for clientId:', clientId);
                 const fetchedConfig = await api.fetchConfig();
-                console.log('[SmartlinksAuthUI] Received config:', fetchedConfig);
+                log.log('Received config:', fetchedConfig);
                 // Merge with customization props (props take precedence)
                 const mergedConfig = { ...fetchedConfig, ...customization };
                 setConfig(mergedConfig);
@@ -11607,7 +11657,7 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                 }));
             }
             catch (err) {
-                console.error('Failed to fetch config:', err);
+                log.error('Failed to fetch config:', err);
                 setConfig(customization || {});
             }
             finally {
@@ -11615,7 +11665,7 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
             }
         };
         fetchConfig();
-    }, [apiEndpoint, clientId, customization, skipConfigFetch]);
+    }, [apiEndpoint, clientId, customization, skipConfigFetch, sdkReady, log]);
     // Reset showEmailForm when mode changes away from login/register
     React.useEffect(() => {
         if (mode !== 'login' && mode !== 'register') {
@@ -11640,7 +11690,7 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
         const params = getUrlParams();
         const urlMode = params.get('mode');
         const token = params.get('token');
-        console.log('URL params detected:', { urlMode, token, hash: window.location.hash, search: window.location.search });
+        log.log('URL params detected:', { urlMode, token, hash: window.location.hash, search: window.location.search });
         if (urlMode && token) {
             handleURLBasedAuth(urlMode, token);
         }
@@ -11650,7 +11700,7 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
         setError(undefined);
         try {
             if (urlMode === 'verifyEmail') {
-                console.log('Verifying email with token:', token);
+                log.log('Verifying email with token:', token);
                 const response = await api.verifyEmailWithToken(token);
                 // Get email verification mode from response or config
                 const verificationMode = response.emailVerificationMode || config?.emailVerification?.mode || 'verify-then-auto-login';
@@ -11685,7 +11735,7 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                 }
             }
             else if (urlMode === 'resetPassword') {
-                console.log('Verifying reset token:', token);
+                log.log('Verifying reset token:', token);
                 // Verify token is valid, then show password reset form
                 await api.verifyResetToken(token);
                 setResetToken(token); // Store token for use in password reset
@@ -11695,7 +11745,7 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                 window.history.replaceState({}, document.title, cleanUrl);
             }
             else if (urlMode === 'magicLink') {
-                console.log('Verifying magic link token:', token);
+                log.log('Verifying magic link token:', token);
                 const response = await api.verifyMagicLink(token);
                 // Auto-login with magic link if token is provided
                 if (response.token) {
@@ -11719,7 +11769,7 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
             }
         }
         catch (err) {
-            console.error('URL-based auth error:', err);
+            log.error('URL-based auth error:', err);
             const errorMessage = err instanceof Error ? err.message : 'An error occurred';
             // If it's an email verification error (expired/invalid token), show resend option
             if (urlMode === 'verifyEmail') {