@proveanything/smartlinks-auth-ui 0.5.11 → 0.5.13

package/dist/index.js

@@ -10893,18 +10893,19 @@ const isDesktop = () => {
         return false;
     return !/Android|iPhone|iPad|iPod|Mobile/i.test(navigator.userAgent);
 };
-const WhatsAppAuthForm = ({ onSend, onPollStatus, onVerified, onBack, loading = false, error, collectName = false, pollIntervalMs = 3000, }) => {
+const WhatsAppAuthForm = ({ onSend, onPollStatus, onVerified, onBack, loading = false, error, collectName = false, pollIntervalMs = 3000, initialSent = null, }) => {
     const [displayName, setDisplayName] = React.useState('');
-    const [sent, setSent] = React.useState(null);
+    const [sent, setSent] = React.useState(initialSent ?? null);
     const [pollError, setPollError] = React.useState();
     const [qrDataUrl, setQrDataUrl] = React.useState(null);
     const [showOnDesktop] = React.useState(isDesktop());
     const verifiedFiredRef = React.useRef(false);
     const autoSentRef = React.useRef(false);
+    const hydratedInitialTokenRef = React.useRef(initialSent?.token ?? null);
     // Auto-issue the WhatsApp link on mount when we don't need to collect a name.
     // When collectName is true, wait for the user to submit the name first.
     React.useEffect(() => {
-        if (collectName)
+        if (collectName || sent)
             return;
         if (autoSentRef.current)
             return;
@@ -10912,13 +10913,24 @@ const WhatsAppAuthForm = ({ onSend, onPollStatus, onVerified, onBack, loading =
         (async () => {
             try {
                 const result = await onSend();
+                hydratedInitialTokenRef.current = result.token;
                 setSent(result);
             }
             catch {
                 // Surfaced via parent error prop
             }
         })();
-    }, [collectName, onSend]);
+    }, [collectName, onSend, sent]);
+    React.useEffect(() => {
+        if (!initialSent?.token)
+            return;
+        if (initialSent.token === hydratedInitialTokenRef.current)
+            return;
+        hydratedInitialTokenRef.current = initialSent.token;
+        verifiedFiredRef.current = false;
+        setPollError(undefined);
+        setSent(initialSent);
+    }, [initialSent]);
     // Generate QR code for the WhatsApp deep-link (great for desktop scan-with-phone UX)
     React.useEffect(() => {
         if (!sent?.waLink)
@@ -10947,15 +10959,26 @@ const WhatsAppAuthForm = ({ onSend, onPollStatus, onVerified, onBack, loading =
             return;
         let stopped = false;
         let timer;
+        let pollInFlight = false;
+        const scheduleNext = () => {
+            if (stopped)
+                return;
+            timer = setTimeout(tick, pollIntervalMs);
+        };
         const tick = async () => {
+            if (pollInFlight)
+                return;
+            pollInFlight = true;
             try {
                 const status = await onPollStatus(sent.token);
                 if (stopped)
                     return;
                 if (status.verified && !verifiedFiredRef.current) {
-                    verifiedFiredRef.current = true;
-                    onVerified(status);
-                    return;
+                    const handled = await onVerified(status);
+                    if (handled !== false) {
+                        verifiedFiredRef.current = true;
+                        return;
+                    }
                 }
                 if (status.status === 'failed' || status.status === 'expired') {
                     setPollError(status.status === 'expired'
@@ -10967,12 +10990,31 @@ const WhatsAppAuthForm = ({ onSend, onPollStatus, onVerified, onBack, loading =
             catch {
                 // Transient errors — keep polling
             }
-            timer = setTimeout(tick, pollIntervalMs);
+            finally {
+                pollInFlight = false;
+            }
+            scheduleNext();
+        };
+        const handleResume = () => {
+            if (document.visibilityState && document.visibilityState !== 'visible')
+                return;
+            tick().catch?.(() => { });
+        };
+        const handleVisibilityChange = () => {
+            if (document.visibilityState === 'visible') {
+                handleResume();
+            }
         };
-        timer = setTimeout(tick, pollIntervalMs);
+        tick().catch?.(() => { });
+        window.addEventListener('focus', handleResume);
+        window.addEventListener('pageshow', handleResume);
+        document.addEventListener('visibilitychange', handleVisibilityChange);
         return () => {
             stopped = true;
             clearTimeout(timer);
+            window.removeEventListener('focus', handleResume);
+            window.removeEventListener('pageshow', handleResume);
+            document.removeEventListener('visibilitychange', handleVisibilityChange);
         };
     }, [sent?.token, onPollStatus, onVerified, pollIntervalMs]);
     const handleNameSubmit = async (e) => {
@@ -10981,6 +11023,7 @@ const WhatsAppAuthForm = ({ onSend, onPollStatus, onVerified, onBack, loading =
         verifiedFiredRef.current = false;
         try {
             const result = await onSend(displayName.trim() || undefined);
+            hydratedInitialTokenRef.current = result.token;
             setSent(result);
         }
         catch {
@@ -10995,6 +11038,7 @@ const WhatsAppAuthForm = ({ onSend, onPollStatus, onVerified, onBack, loading =
         if (!collectName) {
             try {
                 const result = await onSend();
+                hydratedInitialTokenRef.current = result.token;
                 setSent(result);
             }
             catch {
@@ -12557,6 +12601,140 @@ collectionId, enableContactSync, enableInteractionTracking, interactionAppId, in
             unsubscribe();
         };
     }, [proxyMode, notifyAuthStateChange]);
+    // Mobile app-switching can miss BroadcastChannel/storage events, especially on iOS.
+    // Re-read persisted auth state whenever the page becomes active again so a
+    // WhatsApp-returned tab/window can pick up a session that another page wrote.
+    React.useEffect(() => {
+        if (proxyMode)
+            return;
+        const rehydrateFromStorage = async () => {
+            try {
+                const storedToken = await tokenStorage.getToken();
+                const storedUser = await tokenStorage.getUser();
+                const storedAccountData = await tokenStorage.getAccountData();
+                const storedAccountInfo = await tokenStorage.getAccountInfo();
+                const storedContactId = await tokenStorage.getContactId();
+                if (!storedToken || !storedUser)
+                    return;
+                const tokenChanged = storedToken.token !== token;
+                const userChanged = storedUser.uid !== user?.uid;
+                if (tokenChanged || userChanged || !user) {
+                    setToken(storedToken.token);
+                    setUser(storedUser);
+                    setAccountData(storedAccountData);
+                    setAccountInfo(storedAccountInfo?.data || storedAccountData || null);
+                    setContactId(storedContactId);
+                    setIsVerified(true);
+                    notifyAuthStateChange('SESSION_RESTORED', storedUser, storedToken.token, storedAccountData || null, storedAccountInfo?.data || storedAccountData || null, true, contact, storedContactId);
+                }
+                if (!isVerified || pendingVerificationRef.current) {
+                    smartlinks__namespace.auth.verifyToken(storedToken.token)
+                        .then(() => {
+                        setIsVerified(true);
+                        pendingVerificationRef.current = false;
+                    })
+                        .catch((error) => {
+                        if (!isNetworkError(error)) {
+                            console.warn('[AuthContext] Resume verification failed:', error);
+                        }
+                    });
+                }
+            }
+            catch (error) {
+                console.warn('[AuthContext] Failed to rehydrate auth on resume:', error);
+            }
+        };
+        const handleResume = () => {
+            if (typeof document !== 'undefined' && document.visibilityState !== 'visible')
+                return;
+            rehydrateFromStorage().catch(() => { });
+        };
+        const handleVisibilityChange = () => {
+            if (document.visibilityState === 'visible') {
+                handleResume();
+            }
+        };
+        window.addEventListener('focus', handleResume);
+        window.addEventListener('pageshow', handleResume);
+        document.addEventListener('visibilitychange', handleVisibilityChange);
+        return () => {
+            window.removeEventListener('focus', handleResume);
+            window.removeEventListener('pageshow', handleResume);
+            document.removeEventListener('visibilitychange', handleVisibilityChange);
+        };
+    }, [proxyMode, token, user, isVerified, notifyAuthStateChange, contact, isNetworkError]);
+    // Mobile app-switching can also miss BOTH visibility/storage signals on the newly-opened
+    // page (common with WhatsApp handoff on iOS/Android webviews). Keep a short-lived polling
+    // window after mount while logged out so a session written by the background/original page
+    // is still adopted without requiring a manual refresh.
+    React.useEffect(() => {
+        if (proxyMode || user || token)
+            return;
+        let cancelled = false;
+        let intervalId = null;
+        let timeoutId = null;
+        let pollInFlight = false;
+        const adoptStoredSession = async () => {
+            if (cancelled || pollInFlight)
+                return;
+            pollInFlight = true;
+            try {
+                const storedToken = await tokenStorage.getToken();
+                const storedUser = await tokenStorage.getUser();
+                if (!storedToken?.token || !storedUser)
+                    return;
+                const storedAccountData = await tokenStorage.getAccountData();
+                const storedAccountInfo = await tokenStorage.getAccountInfo();
+                const storedContactId = await tokenStorage.getContactId();
+                if (cancelled)
+                    return;
+                setToken(storedToken.token);
+                setUser(storedUser);
+                setAccountData(storedAccountData || null);
+                setAccountInfo(storedAccountInfo?.data || storedAccountData || null);
+                setContactId(storedContactId);
+                setIsVerified(true);
+                pendingVerificationRef.current = false;
+                notifyAuthStateChange('SESSION_RESTORED', storedUser, storedToken.token, storedAccountData || null, storedAccountInfo?.data || storedAccountData || null, true, contact, storedContactId);
+                smartlinks__namespace.auth.verifyToken(storedToken.token).catch((error) => {
+                    if (!isNetworkError(error)) {
+                        console.warn('[AuthContext] Background rehydrate verification failed:', error);
+                    }
+                });
+                if (intervalId) {
+                    clearInterval(intervalId);
+                    intervalId = null;
+                }
+                if (timeoutId) {
+                    clearTimeout(timeoutId);
+                    timeoutId = null;
+                }
+            }
+            catch (error) {
+                console.warn('[AuthContext] Failed to adopt stored session during mobile handoff:', error);
+            }
+            finally {
+                pollInFlight = false;
+            }
+        };
+        adoptStoredSession().catch(() => { });
+        intervalId = setInterval(() => {
+            adoptStoredSession().catch(() => { });
+        }, 1000);
+        timeoutId = setTimeout(() => {
+            if (intervalId) {
+                clearInterval(intervalId);
+                intervalId = null;
+            }
+        }, 20000);
+        return () => {
+            cancelled = true;
+            if (intervalId)
+                clearInterval(intervalId);
+            if (timeoutId)
+                clearTimeout(timeoutId);
+        };
+    }, [proxyMode, user, token, notifyAuthStateChange, contact, isNetworkError]);
     // Helper: Send login to parent and wait for acknowledgment
     // Used for deep-link flows (email verification, magic link) where we need to ensure
     // the parent has persisted the session before redirecting (which causes page reload)
@@ -12590,10 +12768,12 @@ collectionId, enableContactSync, enableInteractionTracking, interactionAppId, in
         try {
             // Only persist to storage in standalone mode
             if (!proxyMode) {
+                await tokenStorage.clearAccountInfo();
                 await tokenStorage.saveToken(authToken, expiresAt);
                 await tokenStorage.saveUser(authUser);
                 if (authAccountData) {
                     await tokenStorage.saveAccountData(authAccountData);
+                    await tokenStorage.saveAccountInfo(authAccountData, accountCacheTTL);
                 }
                 smartlinks__namespace.auth.verifyToken(authToken).catch(() => { });
             }
@@ -12601,6 +12781,7 @@ collectionId, enableContactSync, enableInteractionTracking, interactionAppId, in
             setToken(authToken);
             setUser(authUser);
             setAccountData(authAccountData || null);
+            setAccountInfo(authAccountData || null);
             pendingVerificationRef.current = false;
             // Cross-iframe auth state synchronization
             // ALWAYS wait for parent acknowledgment in iframe mode before proceeding
@@ -12611,7 +12792,7 @@ collectionId, enableContactSync, enableInteractionTracking, interactionAppId, in
             }
             // NOW set isVerified - after parent has acknowledged and session is ready
             setIsVerified(true);
-            notifyAuthStateChange('LOGIN', authUser, authToken, authAccountData || null, null, true);
+            notifyAuthStateChange('LOGIN', authUser, authToken, authAccountData || null, authAccountData || null, true);
             // Sync contact (non-blocking)
             const newContactId = await syncContact(authUser, authAccountData);
             // Track interaction (non-blocking)
@@ -12627,7 +12808,7 @@ collectionId, enableContactSync, enableInteractionTracking, interactionAppId, in
             console.error('Failed to save auth data to storage:', error);
             throw error;
         }
-    }, [proxyMode, notifyAuthStateChange, preloadAccountInfo, syncContact, trackInteraction]);
+    }, [proxyMode, notifyAuthStateChange, preloadAccountInfo, syncContact, trackInteraction, accountCacheTTL]);
     const logout = React.useCallback(async () => {
         const currentUser = user;
         const currentContactId = contactId;
@@ -13223,6 +13404,7 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
     const [silentSignInChecked, setSilentSignInChecked] = React.useState(false); // Track if silent sign-in has been checked
     const [googleFallbackToPopup, setGoogleFallbackToPopup] = React.useState(false); // Show popup fallback when FedCM is blocked/dismissed
     const [googleNativeTimedOut, setGoogleNativeTimedOut] = React.useState(false); // Native bridge callback timed out
+    const [restoredWhatsAppSend, setRestoredWhatsAppSend] = React.useState(null);
     const log = React.useMemo(() => createLoggerWrapper(logger), [logger]);
     const api = new AuthAPI(apiEndpoint, clientId, clientName, logger);
     const auth = useAuth();
@@ -13286,6 +13468,7 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                     proxyMode: proxyMode, // Use prop value
                     ngrokSkipBrowserWarning: true,
                     logger: logger, // Pass logger to SDK for verbose SDK logging
+                    persistToken: false, // AuthKit's tokenStorage owns persistence (avoid double-writer race)
                 });
                 log.log('SDK reinitialized successfully');
                 // Restore bearer token after reinitialization using auth.verifyToken (standalone mode only)
@@ -13333,6 +13516,16 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
         const storage = await getStorage();
         await storage.removeItem(WHATSAPP_PENDING_SESSION_KEY);
     };
+    const updatePendingWhatsAppSession = async (updates) => {
+        if (proxyMode)
+            return null;
+        const existing = await loadPendingWhatsAppSession();
+        if (!existing)
+            return null;
+        const next = { ...existing, ...updates };
+        await savePendingWhatsAppSession(next);
+        return next;
+    };
     // Fetch UI configuration
     React.useEffect(() => {
         // Wait for SDK to be ready before fetching config
@@ -14441,17 +14634,28 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                     sessionKey: pending.sessionKey,
                     displayName: pending.displayName,
                 };
+                setRestoredWhatsAppSend({
+                    waLink: pending.waLink,
+                    code: pending.code,
+                    token: pending.token,
+                    expiresAt: pending.expiresAt,
+                    sessionKey: pending.sessionKey,
+                });
                 const status = await api.getWhatsAppStatus(pending.token);
                 if (cancelled)
                     return;
                 if (status.verified) {
-                    await handleWhatsAppVerified(status);
+                    const handled = await handleWhatsAppVerified(status);
+                    if (handled === false && !cancelled) {
+                        setMode('whatsapp');
+                    }
                     return;
                 }
                 if (status.status === 'pending') {
                     setMode('whatsapp');
                 }
                 else if (status.status === 'failed' || status.status === 'expired' || status.status === 'unknown') {
+                    setRestoredWhatsAppSend(null);
                     await clearPendingWhatsAppSession();
                 }
             }
@@ -14492,8 +14696,12 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                 sessionKey: result.sessionKey,
                 displayName: trimmedName,
             };
+            setRestoredWhatsAppSend(result);
             await savePendingWhatsAppSession({
+                waLink: result.waLink,
+                code: result.code,
                 token: result.token,
+                expiresAt: result.expiresAt,
                 sessionKey: result.sessionKey,
                 displayName: trimmedName,
                 redirectUrl: effectiveRedirectUrl,
@@ -14523,22 +14731,39 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
         const send = whatsappSendRef.current;
         if (send?.sessionKey) {
             try {
+                await updatePendingWhatsAppSession({ exchangeStartedAt: Date.now() });
                 const session = await api.exchangeWhatsAppSession(send.token, send.sessionKey);
                 if (session?.token && session.user) {
                     await auth.login(session.token, session.user, session.accountData, true, getExpirationFromResponse(session));
                     if (!proxyMode) {
                         onAuthSuccess(session.token, session.user, session.accountData);
                     }
+                    await updatePendingWhatsAppSession({ exchangeCompletedAt: Date.now() });
+                    setRestoredWhatsAppSend(null);
                     await clearPendingWhatsAppSession();
-                    return;
+                    return true;
                 }
             }
             catch (err) {
-                log.warn('WhatsApp session exchange failed, falling back to redirect-only flow:', err);
+                const latestPending = await loadPendingWhatsAppSession();
+                if (!latestPending) {
+                    return true;
+                }
+                const recentlyCompleted = latestPending.exchangeCompletedAt && (Date.now() - latestPending.exchangeCompletedAt) < 15000;
+                if (recentlyCompleted) {
+                    return true;
+                }
+                log.warn('WhatsApp session exchange failed; keeping pending session for retry:', err);
+                setAuthSuccess(false);
+                setSuccessMessage(undefined);
+                setError('WhatsApp verified, but finishing sign-in is taking longer than expected. Retrying…');
+                return false;
             }
         }
+        setRestoredWhatsAppSend(null);
         await clearPendingWhatsAppSession();
         performRedirect(target, 'magic-link');
+        return true;
     };
     // 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
@@ -14574,7 +14799,7 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                             ? 'hsl(var(--muted-foreground, 215 15% 45%))'
                             : (resolvedTheme === 'dark' ? '#94a3b8' : '#6B7280'),
                         fontSize: '0.875rem'
-                    }, children: successMessage })] })) : mode === 'magic-link' ? (jsxRuntime.jsx(MagicLinkForm, { onSubmit: handleMagicLink, onCancel: () => setMode('login'), loading: loading, error: error, collectName: config?.collectNameOnPasswordlessSignup })) : mode === 'whatsapp' ? (jsxRuntime.jsx(WhatsAppAuthForm, { onSend: handleWhatsAppSend, onPollStatus: handleWhatsAppPoll, onVerified: handleWhatsAppVerified, onBack: () => setMode('login'), loading: loading, error: error, collectName: config?.collectNameOnPasswordlessSignup ?? true })) : mode === 'phone' ? (jsxRuntime.jsx(PhoneAuthForm, { onSubmit: handlePhoneAuth, onBack: () => setMode('login'), loading: loading, error: error, collectName: config?.collectNameOnPasswordlessSignup })) : mode === 'reset-password' ? (jsxRuntime.jsx(PasswordResetForm, { onSubmit: handlePasswordReset, onBack: () => {
+                    }, children: successMessage })] })) : mode === 'magic-link' ? (jsxRuntime.jsx(MagicLinkForm, { onSubmit: handleMagicLink, onCancel: () => setMode('login'), loading: loading, error: error, collectName: config?.collectNameOnPasswordlessSignup })) : mode === 'whatsapp' ? (jsxRuntime.jsx(WhatsAppAuthForm, { onSend: handleWhatsAppSend, onPollStatus: handleWhatsAppPoll, onVerified: handleWhatsAppVerified, onBack: () => setMode('login'), loading: loading, error: error, collectName: config?.collectNameOnPasswordlessSignup ?? true, initialSent: restoredWhatsAppSend })) : mode === 'phone' ? (jsxRuntime.jsx(PhoneAuthForm, { onSubmit: handlePhoneAuth, onBack: () => setMode('login'), loading: loading, error: error, collectName: config?.collectNameOnPasswordlessSignup })) : mode === 'reset-password' ? (jsxRuntime.jsx(PasswordResetForm, { onSubmit: handlePasswordReset, onBack: () => {
                 setMode('login');
                 setResetSuccess(false);
                 setResetToken(undefined); // Clear token when going back
@@ -14925,6 +15150,7 @@ const AccountManagement = ({ apiEndpoint, clientId, collectionId, onError, class
                 baseURL: apiEndpoint,
                 proxyMode: false,
                 ngrokSkipBrowserWarning: true,
+                persistToken: false, // AuthKit's tokenStorage is the single source of truth
             });
         }
     }, [apiEndpoint]);