@proveanything/smartlinks-auth-ui 0.5.2 → 0.5.5

package/dist/index.js

@@ -341,9 +341,13 @@ const ProviderButtons = ({ enabledProviders, providerOrder, onEmailLogin, onGoog
     if (enabledProviders.length === 0)
         return null;
     // Determine the order of providers to display
-    const orderedProviders = providerOrder && providerOrder.length > 0
-        ? providerOrder.filter(p => enabledProviders.includes(p))
-        : enabledProviders;
+    const orderedProviders = (() => {
+        if (!providerOrder || providerOrder.length === 0)
+            return enabledProviders;
+        const configured = providerOrder.filter((p) => enabledProviders.includes(p));
+        const missing = enabledProviders.filter((p) => !configured.includes(p));
+        return [...configured, ...missing];
+    })();
     // Provider button configurations
     const providerConfigs = {
         email: {
@@ -11002,9 +11006,9 @@ const WhatsAppAuthForm = ({ onSend, onPollStatus, onVerified, onBack, loading =
     const awaitingNameInput = collectName && !sent;
     const awaitingAutoSend = !collectName && !sent;
     return (jsxRuntime.jsxs("form", { className: "auth-form", onSubmit: awaitingNameInput ? handleNameSubmit : (e) => e.preventDefault(), children: [jsxRuntime.jsxs("div", { className: "auth-form-header", children: [jsxRuntime.jsx("h2", { className: "auth-form-title", children: "Continue with WhatsApp" }), jsxRuntime.jsx("p", { className: "auth-form-subtitle", children: sent
-                            ? 'Send the pre-filled WhatsApp message to verify yourself. We\'ll log you in automatically.'
+                            ? "Tap below to open WhatsApp and send us the pre-filled message — that's how we confirm your number. We'll log you in the moment we receive it."
                             : awaitingNameInput
-                                ? 'Tell us your name, then send us a WhatsApp message — no phone number needed.'
+                                ? "We'll open WhatsApp with a pre-filled message. Just hit send to confirm your number — no SMS code, no typing."
                                 : 'Preparing your WhatsApp link…' })] }), displayedError && (jsxRuntime.jsxs("div", { className: "auth-error", role: "alert", children: [jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: jsxRuntime.jsx("path", { d: "M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm1 13H7v-2h2v2zm0-3H7V4h2v6z" }) }), displayedError] })), awaitingNameInput && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "auth-form-group", children: [jsxRuntime.jsx("label", { htmlFor: "waName", className: "auth-label", children: "Name" }), jsxRuntime.jsx("input", { id: "waName", type: "text", value: displayName, onChange: (e) => setDisplayName(e.target.value), className: "auth-input", placeholder: "John Smith", disabled: loading, autoComplete: "name", autoFocus: true })] }), jsxRuntime.jsx("button", { type: "submit", className: "auth-button auth-button-primary", disabled: loading, children: loading ? jsxRuntime.jsx("span", { className: "auth-spinner" }) : 'Continue' })] })), awaitingAutoSend && (jsxRuntime.jsx("div", { style: { textAlign: 'center', padding: '1.5rem' }, children: jsxRuntime.jsx("span", { className: "auth-spinner" }) })), sent && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!showOnDesktop && (jsxRuntime.jsxs("a", { href: sent.waLink, target: "_blank", rel: "noopener noreferrer", className: "auth-button auth-button-primary", style: {
                             display: 'flex',
                             alignItems: 'center',
@@ -11013,7 +11017,7 @@ const WhatsAppAuthForm = ({ onSend, onPollStatus, onVerified, onBack, loading =
                             background: '#25D366',
                             color: '#fff',
                             textDecoration: 'none',
-                        }, children: [jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: jsxRuntime.jsx("path", { d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.247-.694.247-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.464 3.488" }) }), "Open WhatsApp"] })), showOnDesktop && qrDataUrl && (jsxRuntime.jsxs("div", { style: { textAlign: 'center', margin: '0.75rem 0' }, children: [jsxRuntime.jsx("div", { style: {
+                        }, children: [jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: jsxRuntime.jsx("path", { d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.247-.694.247-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.464 3.488" }) }), "Open WhatsApp & send message"] })), showOnDesktop && qrDataUrl && (jsxRuntime.jsxs("div", { style: { textAlign: 'center', margin: '0.75rem 0' }, children: [jsxRuntime.jsx("div", { style: {
                                     display: 'inline-block',
                                     padding: '0.75rem',
                                     background: '#fff',
@@ -11023,7 +11027,7 @@ const WhatsAppAuthForm = ({ onSend, onPollStatus, onVerified, onBack, loading =
                                     fontSize: '0.8125rem',
                                     color: '#6B7280',
                                     marginTop: '0.5rem',
-                                }, children: "Scan with your phone \u2014 your WhatsApp will open with a pre-filled message. Just hit send." })] })), showOnDesktop && (jsxRuntime.jsx("a", { href: sent.waLink, target: "_blank", rel: "noopener noreferrer", className: "auth-button auth-button-secondary", style: { display: 'block', textAlign: 'center', textDecoration: 'none' }, children: "Or open WhatsApp on this device" })), jsxRuntime.jsxs("div", { style: {
+                                }, children: "Scan with your phone \u2014 your WhatsApp will open with a pre-filled message. Just hit send." })] })), showOnDesktop && (jsxRuntime.jsx("a", { href: sent.waLink, target: "_blank", rel: "noopener noreferrer", className: "auth-button auth-button-secondary", style: { display: 'block', textAlign: 'center', textDecoration: 'none' }, children: "Or send the message from this device" })), jsxRuntime.jsxs("div", { style: {
                             marginTop: '1rem',
                             padding: '0.75rem',
                             borderRadius: '0.5rem',
@@ -11032,7 +11036,7 @@ const WhatsAppAuthForm = ({ onSend, onPollStatus, onVerified, onBack, loading =
                             fontSize: '0.8125rem',
                             color: '#374151',
                             textAlign: 'center',
-                        }, children: [jsxRuntime.jsx("span", { className: "auth-spinner", style: { marginRight: '0.5rem' } }), "Waiting for your WhatsApp message\u2026", jsxRuntime.jsxs("div", { style: { marginTop: '0.25rem', fontSize: '0.75rem', opacity: 0.7 }, children: ["Code: ", jsxRuntime.jsx("code", { children: sent.code })] })] }), jsxRuntime.jsx("button", { type: "button", className: "auth-link", onClick: handleSendNew, disabled: loading, style: {
+                        }, children: [jsxRuntime.jsx("span", { className: "auth-spinner", style: { marginRight: '0.5rem' } }), "Waiting for your message \u2014 we'll log you in automatically\u2026", jsxRuntime.jsxs("div", { style: { marginTop: '0.25rem', fontSize: '0.75rem', opacity: 0.7 }, children: ["Code: ", jsxRuntime.jsx("code", { children: sent.code })] })] }), jsxRuntime.jsx("button", { type: "button", className: "auth-link", onClick: handleSendNew, disabled: loading, style: {
                             marginTop: '0.75rem',
                             background: 'none',
                             border: 'none',
@@ -11509,15 +11513,20 @@ class AuthAPI {
         return smartlinks__namespace.authKit.verifyMagicLink(this.clientId, token);
     }
     // ============= WhatsApp =============
-    async sendWhatsApp(redirectUrl, phoneNumber, reply) {
+    async sendWhatsApp(redirectUrl, phoneNumber, reply, prefillMessage) {
         // phoneNumber is optional — backend extracts it from the inbound WhatsApp webhook.
         // `reply`, when provided, is sent back to the user via WhatsApp on successful verification.
+        // `prefillMessage` customizes the message body pre-filled in the wa.me link.
         return smartlinks__namespace.authKit.sendWhatsApp(this.clientId, {
             phoneNumber: phoneNumber ?? '',
             redirectUrl,
             ...(reply ? { reply } : {}),
+            ...(prefillMessage ? { prefillMessage } : {}),
         });
     }
+    async exchangeWhatsAppSession(token, sessionKey) {
+        return smartlinks__namespace.authKit.exchangeWhatsAppSession(this.clientId, token, sessionKey);
+    }
     async getWhatsAppStatus(token) {
         return smartlinks__namespace.authKit.getWhatsAppStatus(this.clientId, token);
     }
@@ -13049,7 +13058,7 @@ const checkSilentGoogleSignIn = async (clientId, googleClientId) => {
     });
 };
 // getFriendlyErrorMessage is now imported from ../utils/errorHandling
-const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAuthSuccess, onAuthError, onRedirect, enabledProviders = ['email', 'google', 'phone'], initialMode, signupProminence, redirectUrl, theme = 'light', className, customization, skipConfigFetch = false, minimal = false, logger, proxyMode = false, collectionId, disableConfigCache = false, enableSilentGoogleSignIn = false, whatsappReply, }) => {
+const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAuthSuccess, onAuthError, onRedirect, enabledProviders = ['email', 'google', 'phone'], initialMode, signupProminence, redirectUrl, theme = 'light', className, customization, skipConfigFetch = false, minimal = false, logger, proxyMode = false, collectionId, disableConfigCache = false, enableSilentGoogleSignIn = false, whatsappReply, whatsappPrefillMessage, }) => {
     // Resolve signup prominence from props, customization, config, or default
     const resolvedSignupProminence = signupProminence || customization?.signupProminence || 'minimal';
     // Determine initial mode based on signupProminence setting
@@ -14266,6 +14275,8 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
             setLoading(false);
         }
     };
+    // Track the most recent WhatsApp send so we can exchange its sessionKey for a real login session.
+    const whatsappSendRef = React.useRef(null);
     const handleWhatsAppSend = async (displayName) => {
         setLoading(true);
         setError(undefined);
@@ -14278,7 +14289,10 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                 name: displayName,
                 clientName,
             });
-            const result = await api.sendWhatsApp(getRedirectUrl(), undefined, reply);
+            // Resolve outbound prefill message: per-call prop wins, then AuthKit default.
+            const prefillMessage = whatsappPrefillMessage ?? config?.whatsappPrefillMessage;
+            const result = await api.sendWhatsApp(getRedirectUrl(), undefined, reply, prefillMessage);
+            whatsappSendRef.current = { token: result.token, sessionKey: result.sessionKey };
             return result;
         }
         catch (err) {
@@ -14293,12 +14307,28 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
     const handleWhatsAppPoll = async (token) => {
         return api.getWhatsAppStatus(token);
     };
-    const handleWhatsAppVerified = (status) => {
-        // Backend returns a redirectUrl containing a magic-link-style token that
-        // completes the login on landing. Treat the same as magic-link verification.
+    const handleWhatsAppVerified = async (status) => {
         const target = status.redirectUrl || getRedirectUrl();
         setAuthSuccess(true);
         setSuccessMessage('WhatsApp verified! Signing you in…');
+        // Exchange the verified WhatsApp proof for a real Auth Kit session token,
+        // so the user is fully logged in (not just verified) and any same-tab
+        // continuation flows (claim, bid, etc.) pick up an authenticated session.
+        const send = whatsappSendRef.current;
+        if (send?.sessionKey) {
+            try {
+                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);
+                    }
+                }
+            }
+            catch (err) {
+                log.warn('WhatsApp session exchange failed, falling back to redirect-only flow:', err);
+            }
+        }
         performRedirect(target, 'magic-link');
     };
     // Show processing state for URL-based auth (verification, magic link, password reset)
@@ -15643,9 +15673,14 @@ const AuthUIPreview = ({ customization, enabledProviders = ['email', 'google', '
     const showMagicLink = enabledProviders.includes('magic-link');
     const showWhatsApp = enabledProviders.includes('whatsapp');
     // Determine ordered providers (excluding email if in button mode)
-    const orderedProviders = providerOrder && providerOrder.length > 0
-        ? providerOrder.filter(p => enabledProviders.includes(p) && p !== 'email')
-        : enabledProviders.filter(p => p !== 'email');
+    const orderedProviders = (() => {
+        const nonEmailProviders = enabledProviders.filter((p) => p !== 'email');
+        if (!providerOrder || providerOrder.length === 0)
+            return nonEmailProviders;
+        const configured = providerOrder.filter((p) => enabledProviders.includes(p) && p !== 'email');
+        const missing = nonEmailProviders.filter((p) => !configured.includes(p));
+        return [...configured, ...missing];
+    })();
     const hasOtherProviders = showGoogle || showPhone || showMagicLink || showWhatsApp;
     // Render provider button helper
     const renderProviderButton = (provider) => {