@proveanything/smartlinks-auth-ui 0.1.5 → 0.1.7

package/dist/index.js

@@ -11434,10 +11434,52 @@ const useAuth = () => {
 
 // Default Smartlinks Google OAuth Client ID (public - safe to expose)
 const DEFAULT_GOOGLE_CLIENT_ID = '696509063554-jdlbjl8vsjt7cr0vgkjkjf3ffnvi3a70.apps.googleusercontent.com';
-const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAuthSuccess, onAuthError, enabledProviders = ['email', 'google', 'phone'], initialMode = 'login', redirectUrl, theme = 'light', className, customization, skipConfigFetch = false, minimal = false, }) => {
+// Default auth UI configuration when no clientId is provided
+const DEFAULT_AUTH_CONFIG = {
+    branding: {
+        title: '', // No title by default (minimal)
+        subtitle: 'Sign in to your account',
+        logoUrl: 'https://smartlinks.app/smartlinks/landscape-medium.png',
+        primaryColor: '#3B82F6',
+        secondaryColor: '#1D4ED8',
+        backgroundColor: '#e0f2fe',
+        buttonStyle: 'rounded',
+        fontFamily: 'Inter, sans-serif'
+    },
+    emailDisplayMode: 'button',
+    googleOAuthFlow: 'oneTap'
+};
+// 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();
@@ -11451,6 +11493,19 @@ 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(() => {
@@ -11489,9 +11544,19 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
             return;
         }
         const fetchConfig = async () => {
+            // If no clientId provided, use default config immediately without API call
+            if (!clientId) {
+                const defaultConfig = {
+                    ...DEFAULT_AUTH_CONFIG,
+                    enabledProviders: enabledProviders || ['email', 'google', 'phone']
+                };
+                setConfig({ ...defaultConfig, ...customization });
+                setConfigLoading(false);
+                return;
+            }
             try {
                 // Check localStorage cache first
-                const cacheKey = `auth_ui_config_${clientId || 'default'}`;
+                const cacheKey = `auth_ui_config_${clientId}`;
                 const cached = localStorage.getItem(cacheKey);
                 if (cached) {
                     const { config: cachedConfig, timestamp } = JSON.parse(cached);
@@ -11809,9 +11874,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)
@@ -11981,9 +12048,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'