@proveanything/smartlinks-auth-ui 0.1.46 → 0.1.47

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,KAAuC,MAAM,OAAO,CAAC;AAW5D,OAAO,KAAK,EAAE,qBAAqB,EAAyF,MAAM,UAAU,CAAC;AAgI7I,QAAA,MAAM,mBAAmB,QAAa,OAAO,CAAC,IAAI,CA+CjD,CAAC;AAyFF,OAAO,EAAE,mBAAmB,EAAE,CAAC;AA8B/B,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAqpD5D,CAAC"}
+{"version":3,"file":"SmartlinksAuthUI.d.ts","sourceRoot":"","sources":["../../src/components/SmartlinksAuthUI.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAW5D,OAAO,KAAK,EAAE,qBAAqB,EAAyF,MAAM,UAAU,CAAC;AAiJ7I,QAAA,MAAM,mBAAmB,QAAa,OAAO,CAAC,IAAI,CA+CjD,CAAC;AAyFF,OAAO,EAAE,mBAAmB,EAAE,CAAC;AA8B/B,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAstD5D,CAAC"}

package/dist/index.esm.js

@@ -12235,8 +12235,22 @@ const useAuth = () => {
 };
 
 // VERSION: Update this when making changes to help identify which version is running
-const AUTH_UI_VERSION = '42';
+const AUTH_UI_VERSION = '44';
 const LOG_PREFIX = `[SmartlinksAuthUI:v${AUTH_UI_VERSION}]`;
+// Helper to check for URL auth params synchronously (runs during initialization)
+// This prevents the form from flashing before detecting deep-link flows
+const getInitialUrlAuthParams = () => {
+    // Check hash params first (for hash routing like #/test?mode=verifyEmail&token=abc)
+    const hash = window.location.hash;
+    const hashQueryIndex = hash.indexOf('?');
+    const params = hashQueryIndex !== -1
+        ? new URLSearchParams(hash.substring(hashQueryIndex + 1))
+        : new URLSearchParams(window.location.search);
+    return {
+        mode: params.get('mode'),
+        token: params.get('token'),
+    };
+};
 // Helper to calculate expiration from AuthResponse
 const getExpirationFromResponse = (response) => {
     if (response.expiresAt)
@@ -12470,7 +12484,18 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
     // Determine initial mode based on signupProminence setting
     // 'emphasized' mode defaults to 'register' unless explicitly overridden
     const effectiveInitialMode = initialMode ?? (resolvedSignupProminence === 'emphasized' ? 'register' : 'login');
-    const [mode, setMode] = useState(effectiveInitialMode);
+    // Check URL params synchronously to avoid form flash during deep-link flows
+    const initialUrlParams = useMemo(() => getInitialUrlAuthParams(), []);
+    const isUrlAuthFlow = !!(initialUrlParams.mode && initialUrlParams.token);
+    // Track if we're processing a URL-based auth flow (verification, magic link, etc.)
+    const [urlAuthProcessing, setUrlAuthProcessing] = useState(isUrlAuthFlow);
+    const [mode, setMode] = useState(() => {
+        // If URL has reset password token, start in reset-password mode
+        if (initialUrlParams.mode === 'resetPassword' && initialUrlParams.token) {
+            return 'reset-password';
+        }
+        return effectiveInitialMode;
+    });
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState();
     const [resolvedTheme, setResolvedTheme] = useState('light');
@@ -12492,17 +12517,34 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
     const log = useMemo(() => createLoggerWrapper(logger), [logger]);
     const api = new AuthAPI(apiEndpoint, clientId, clientName, logger);
     const auth = useAuth();
+    // Helper function to strip auth params (mode, token) from URLs
+    // These params are used for deep-link flows and must be removed after processing
+    const stripAuthParams = (url) => {
+        try {
+            const urlObj = new URL(url);
+            urlObj.searchParams.delete('mode');
+            urlObj.searchParams.delete('token');
+            return urlObj.toString();
+        }
+        catch {
+            // If URL parsing fails, try simple string manipulation
+            return url.split('?')[0];
+        }
+    };
     // Helper function to perform redirects, respecting the onRedirect callback
     // When onRedirect is provided, delegates navigation to parent app
     // Otherwise falls back to direct window.location.href for backward compatibility
+    // IMPORTANT: Always strips auth params (mode, token) to prevent re-verification on reload
     const performRedirect = (url, reason) => {
+        const cleanUrl = stripAuthParams(url);
+        log.log(`Redirect requested: ${url} -> cleaned: ${cleanUrl} (${reason})`);
         if (onRedirect) {
-            log.log(`Delegating redirect to onRedirect callback: ${url} (${reason})`);
-            onRedirect(url, reason);
+            log.log(`Delegating redirect to onRedirect callback: ${cleanUrl} (${reason})`);
+            onRedirect(cleanUrl, reason);
         }
         else {
-            log.log(`Performing direct redirect to: ${url} (${reason})`);
-            window.location.href = url;
+            log.log(`Performing direct redirect to: ${cleanUrl} (${reason})`);
+            window.location.href = cleanUrl;
         }
     };
     // Dark mode detection and theme management
@@ -12803,6 +12845,25 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
         const authCode = params.get('code');
         const state = params.get('state');
         log.log('URL params detected:', { urlMode, token, authCode: !!authCode, state: !!state, hash: window.location.hash, search: window.location.search });
+        // Check if user is already authenticated
+        const isAlreadyAuthenticated = !!auth.user?.uid;
+        if (isAlreadyAuthenticated && (urlMode === 'verifyEmail' || urlMode === 'magicLink')) {
+            // User is already logged in but we have verification params in URL
+            // This happens when parent reloads iframe after successful verification
+            // Don't re-verify - just redirect to clean URL
+            log.log('Already authenticated, skipping re-verification. Redirecting to clean URL.');
+            setUrlAuthProcessing(false); // Clear processing state
+            if (redirectUrl) {
+                performRedirect(redirectUrl, urlMode === 'verifyEmail' ? 'email-verified' : 'magic-link');
+            }
+            else {
+                // No redirect configured - just show success and notify parent
+                setAuthSuccess(true);
+                setSuccessMessage('You are already logged in!');
+                onAuthSuccess(auth.token, auth.user, auth.accountData ?? undefined);
+            }
+            return;
+        }
         if (authCode && state) {
             // Google OAuth redirect callback
             handleGoogleAuthCodeCallback(authCode, state);
@@ -12814,6 +12875,7 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
     const handleURLBasedAuth = async (urlMode, token) => {
         setLoading(true);
         setError(undefined);
+        // Note: urlAuthProcessing is already true from initialization if we got here
         try {
             if (urlMode === 'verifyEmail') {
                 log.log('Verifying email with token:', token);
@@ -12826,9 +12888,7 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                     // MUST await to ensure session is ready before any redirect
                     await auth.login(response.token, response.user, response.accountData, true, getExpirationFromResponse(response), proxyMode // waitForParentAck - ensures parent has validated/persisted before redirect
                     );
-                    // Clean URL parameters regardless of redirect
-                    const cleanUrl = window.location.href.split('?')[0];
-                    window.history.replaceState({}, document.title, cleanUrl);
+                    setUrlAuthProcessing(false); // Clear processing state before redirect/success
                     if (redirectUrl) {
                         // Redirect to clean URL and resume flow
                         // In proxy mode: parent already validated & persisted via acknowledgment in auth.login()
@@ -12849,6 +12909,7 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                 }
                 else {
                     // verify-manual-login mode or no token: Show success but require manual login
+                    setUrlAuthProcessing(false); // Clear processing state
                     setAuthSuccess(true);
                     setSuccessMessage('Email verified successfully! Please log in with your credentials.');
                     // Clear the URL parameters
@@ -12869,6 +12930,7 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                 if (!verifyResult.valid) {
                     throw new Error(verifyResult.message || 'Invalid or expired token');
                 }
+                setUrlAuthProcessing(false); // Clear processing state - showing reset form
                 setResetToken(token); // Store token for use in password reset
                 if (verifyResult.email) {
                     setResetEmail(verifyResult.email); // Store email for auto-login after reset
@@ -12887,9 +12949,7 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                     // MUST await to ensure session is ready before any redirect
                     await auth.login(response.token, response.user, response.accountData, true, getExpirationFromResponse(response), proxyMode // waitForParentAck
                     );
-                    // Clean URL parameters regardless of redirect
-                    const cleanUrl = window.location.href.split('?')[0];
-                    window.history.replaceState({}, document.title, cleanUrl);
+                    setUrlAuthProcessing(false); // Clear processing state before redirect/success
                     if (redirectUrl) {
                         // Redirect to clean URL and resume flow
                         log.log('Magic link verification complete, redirecting to:', redirectUrl);
@@ -12912,6 +12972,7 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
         catch (err) {
             log.error('URL-based auth error:', err);
             const errorMessage = err instanceof Error ? err.message : 'An error occurred';
+            setUrlAuthProcessing(false); // Clear processing state on error so user can retry
             // If it's an email verification error (expired/invalid token), show resend option
             if (urlMode === 'verifyEmail') {
                 setError(`${errorMessage} - Please enter your email below to receive a new verification link.`);
@@ -13495,23 +13556,14 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                 }
                 // Update auth context with account data if token is provided
                 if (response.token) {
-                    // Phone auth can be login or signup - use isNewUser flag from backend if available
-                    // In proxy mode, wait for parent to acknowledge (validate & persist) before redirect
-                    await auth.login(response.token, response.user, response.accountData, response.isNewUser, getExpirationFromResponse(response), proxyMode // waitForParentAck
+                    // Phone auth is an INTERACTIVE flow (user entered OTP in UI)
+                    // Unlike deep-link flows (email verification, magic link), there's no URL token to clean up
+                    // Do NOT auto-redirect - let the parent app control the next step (profile completion, etc.)
+                    await auth.login(response.token, response.user, response.accountData, response.isNewUser, getExpirationFromResponse(response), false // No waitForParentAck needed - interactive flow doesn't redirect
                     );
-                    if (redirectUrl) {
-                        // Redirect to clean URL and resume flow
-                        log.log('Phone verification complete, redirecting to:', redirectUrl);
-                        performRedirect(redirectUrl, 'phone-verified');
-                    }
-                    else {
-                        // No redirect configured: show success UI
-                        setAuthSuccess(true);
-                        setSuccessMessage('Phone verified! You are now logged in.');
-                        if (!proxyMode) {
-                            onAuthSuccess(response.token, response.user, response.accountData);
-                        }
-                    }
+                    setAuthSuccess(true);
+                    setSuccessMessage('Phone verified! You are now logged in.');
+                    onAuthSuccess(response.token, response.user, response.accountData);
                 }
                 else {
                     // Check if response contains an error message from the backend
@@ -13609,6 +13661,17 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
             setLoading(false);
         }
     };
+    // Show processing state for URL-based auth (verification, magic link, password reset)
+    // This runs BEFORE configLoading check to prevent form flash on deep-link flows
+    if (urlAuthProcessing) {
+        return (jsx(AuthContainer, { theme: resolvedTheme, className: className, minimal: minimal || config?.branding?.minimal || false, children: jsxs("div", { style: { textAlign: 'center', padding: '2rem' }, children: [jsx("div", { className: "auth-spinner", style: { marginBottom: '1rem' } }), jsx("p", { style: {
+                            color: resolvedTheme === 'dark' ? '#94a3b8' : '#6B7280',
+                            fontSize: '0.875rem'
+                        }, children: initialUrlParams.mode === 'verifyEmail' ? 'Verifying your email...' :
+                            initialUrlParams.mode === 'magicLink' ? 'Processing magic link...' :
+                                initialUrlParams.mode === 'resetPassword' ? 'Validating reset link...' :
+                                    'Processing...' })] }) }));
+    }
     if (configLoading) {
         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" }) }) }));
     }