@abstraxn/signer-react 2.1.5 → 2.2.0

package/dist/src/components/OnboardingUI/OnboardingUIWeb.js

@@ -346,30 +346,62 @@ const ONBOARDING_UI_STYLES = `
   right: 8px;
   top: 50%;
   transform: translateY(-50%);
+  width: 32px;
+  height: 32px;
   background: none;
   border: none;
   cursor: pointer;
-  padding: 4px;
+  padding: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 2;
-  transition: all 0.2s ease;
-  border-radius: 4px;
+  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
+  border-radius: 6px;
 }
 
 /* Light theme arrow button */
 .onboarding-theme-light .onboarding-input-arrow-button {
-  color: #111827;
+  color: #6b7280;
 }
 
-.onboarding-theme-light .onboarding-input-arrow-button:hover {
-  background-color: rgba(17, 24, 39, 0.1);
+.onboarding-theme-light .onboarding-input-arrow-button:hover:not(:disabled) {
+  background-color: rgba(139, 152, 202, 0.35);
   color: #1f2937;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+}
+
+.onboarding-theme-light .onboarding-input-arrow-button:active:not(:disabled) {
+  transform: translateY(-50%) scale(0.94);
+  background-color: rgba(139, 152, 202, 0.5);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
+}
+
+.onboarding-theme-light .onboarding-input-arrow-button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(139, 152, 202, 0.5);
+}
+
+.onboarding-theme-light .onboarding-input-arrow-button-filled {
+  background-color: rgba(139, 152, 202, 0.45);
+  color: #1f2937;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+}
+
+.onboarding-theme-light .onboarding-input-arrow-button-filled:hover:not(:disabled) {
+  background-color: rgba(139, 152, 202, 0.6);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
 }
 
-.onboarding-theme-light .onboarding-input-arrow-button:active {
-  background-color: rgba(17, 24, 39, 0.15);
+.onboarding-theme-light .onboarding-input-arrow-button-filled:active:not(:disabled) {
+  transform: translateY(-50%) scale(0.94);
+  background-color: rgba(139, 152, 202, 0.7);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
+}
+
+.onboarding-theme-light .onboarding-input-arrow-button-filled:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(139, 152, 202, 0.55);
 }
 
 /* Dark theme arrow button */
@@ -377,17 +409,37 @@ const ONBOARDING_UI_STYLES = `
   color: #9ca3af;
 }
 
-.onboarding-theme-dark .onboarding-input-arrow-button:hover {
-  background-color: rgba(156, 163, 175, 0.2);
-  color: #d1d5db;
+.onboarding-theme-dark .onboarding-input-arrow-button:hover:not(:disabled) {
+  color: #ffffff;
+  background-color: rgba(255, 255, 255, 0.12);
+}
+
+.onboarding-theme-dark .onboarding-input-arrow-button:active:not(:disabled) {
+  transform: translateY(-50%) scale(0.94);
+  background-color: rgba(255, 255, 255, 0.18);
+}
+
+.onboarding-theme-dark .onboarding-input-arrow-button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px #1f2937, 0 0 0 4px rgba(156, 163, 175, 0.4);
+}
+
+.onboarding-theme-dark .onboarding-input-arrow-button-filled {
+  color: #ffffff;
+  background-color: rgba(255, 255, 255, 0.12);
+}
+
+.onboarding-theme-dark .onboarding-input-arrow-button-filled:hover:not(:disabled) {
+  background-color: rgba(255, 255, 255, 0.18);
 }
 
-.onboarding-theme-dark .onboarding-input-arrow-button:active {
-  background-color: rgba(156, 163, 175, 0.25);
+.onboarding-theme-dark .onboarding-input-arrow-button-filled:active:not(:disabled) {
+  transform: translateY(-50%) scale(0.94);
+  background-color: rgba(255, 255, 255, 0.22);
 }
 
 .onboarding-input-arrow-button:disabled {
-  opacity: 0.5;
+  opacity: 0.35;
   cursor: not-allowed;
 }
 
@@ -823,6 +875,12 @@ const ONBOARDING_UI_STYLES = `
   justify-content: center;
   margin-bottom: 24px;
   width: 100%;
+  padding: 0 10px;
+  box-sizing: border-box;
+}
+
+.onboarding-otp-inputs-single {
+  padding: 0;
 }
 
 .onboarding-otp-input {
@@ -869,6 +927,54 @@ const ONBOARDING_UI_STYLES = `
   color: #ffffff;
 }
 
+.onboarding-mfa-backup-field {
+  width: 100%;
+  max-width: 320px;
+  height: 52px;
+  border: 1.5px solid #e5e7eb;
+  border-radius: 8px;
+  background-color: inherit;
+  color: inherit;
+  text-align: center;
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: 0.16em;
+  padding: 0 14px;
+  box-sizing: border-box;
+  text-transform: uppercase;
+  transition: all 0.15s ease;
+}
+
+.onboarding-theme-light .onboarding-mfa-backup-field {
+  background-color: #ffffff;
+  border-color: #e5e7eb;
+  color: #000000;
+}
+
+.onboarding-theme-light .onboarding-mfa-backup-field:focus {
+  outline: none;
+  border-color: #111827;
+  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.1);
+}
+
+.onboarding-theme-dark .onboarding-mfa-backup-field {
+  border-color: #4b5563;
+  background-color: #374151;
+  color: #ffffff;
+}
+
+.onboarding-theme-dark .onboarding-mfa-backup-field:focus {
+  outline: none;
+  border-color: #9ca3af;
+  box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.2);
+  background-color: #4b5563;
+}
+
+.onboarding-mfa-backup-field:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
 .onboarding-otp-resend {
   text-align: center;
   margin-top: 20px;
@@ -1005,6 +1111,11 @@ export class OnboardingUIWeb {
     divider = null;
     footer = null;
     verifyButton = null;
+    mfaVerificationScreen = null;
+    mfaCodeInputs = [];
+    mfaVerifyButton = null;
+    mfaCode = "";
+    mfaUseBackupCode = false;
     email = "";
     otp = "";
     otpSent = false;
@@ -1092,13 +1203,15 @@ export class OnboardingUIWeb {
                 detectedProvider === "twitter" ||
                 detectedProvider === "x");
         const hasOAuthParams = isOAuthCallback || (success === "true" && !!accessToken);
-        // If success=true and it's an OAuth callback (Google, Discord, Twitter), show loading modal with header and footer
+        // If success=true and it's an OAuth callback (Google, Discord, Twitter), show loading modal unless MFA is required
         if (success === "true" && hasOAuthParams) {
-            // Show loading modal immediately - it creates its own overlay
-            // Use requestAnimationFrame + setTimeout to ensure DOM is ready
+            const mfaRequired = params.get("mfaRequired") === "true";
+            if (mfaRequired) {
+                // Don't show "Verifying login..." - provider will show MFA screen instead; avoid it appearing after MFA modal
+                return;
+            }
             requestAnimationFrame(() => {
                 setTimeout(() => {
-                    // Directly show loading modal - it will create its own overlay with header and footer
                     this.showLoadingModal();
                 }, 100);
             });
@@ -2439,7 +2552,11 @@ export class OnboardingUIWeb {
                 if (this.config.onEmailOtpVerify) {
                     const result = await this.config.onEmailOtpVerify(this.email, this.otp);
                     if (result.success) {
-                        this.config.onLoginSuccess?.({ token: result.token });
+                        if (result.mfaRequired === true) {
+                            this.showMfaVerificationScreen();
+                            return;
+                        }
+                        this.config.onLoginSuccess?.({ token: result.token, user: result.user });
                     }
                     else {
                         throw new Error("Invalid OTP");
@@ -2976,6 +3093,10 @@ export class OnboardingUIWeb {
             if (this.config.onEmailOtpVerify) {
                 const result = await this.config.onEmailOtpVerify(this.email, this.otp);
                 if (result.success) {
+                    if (result.mfaRequired === true) {
+                        this.showMfaVerificationScreen();
+                        return;
+                    }
                     this.config.onLoginSuccess?.(result);
                 }
                 else {
@@ -3044,6 +3165,377 @@ export class OnboardingUIWeb {
             this.setLoading(false);
         }
     }
+    /**
+     * Show MFA verification screen for OAuth callback when mfaRequired is true.
+     * Public method: hides loading modal, then shows 6-digit MFA form with Cancel (no Back to OTP).
+     */
+    showMfaVerificationScreenForOAuth() {
+        this.hideLoadingModal();
+        this.showMfaVerificationScreen({ fromOAuth: true });
+    }
+    /**
+     * Show MFA verification screen (auth code / TOTP) after email OTP when mfaRequired is true
+     * @param options.fromOAuth - when true, show Cancel instead of Back and do not assume OTP screen exists
+     */
+    showMfaVerificationScreen(options) {
+        const fromOAuth = options?.fromOAuth === true;
+        if (!this.rootElement)
+            return;
+        const card = this.rootElement.querySelector(".onboarding-card");
+        if (!card)
+            return;
+        if (!this.config.onMfaVerify) {
+            this.setError("MFA verification is required but not configured");
+            return;
+        }
+        // Remove existing MFA screen if any
+        if (this.mfaVerificationScreen) {
+            this.mfaVerificationScreen.remove();
+            this.mfaVerificationScreen = null;
+            this.mfaVerifyButton = null;
+            this.mfaCodeInputs = [];
+        }
+        card.classList.add("onboarding-mfa-active");
+        // Hide external wallet CTA ("Continue with wallet") and its divider on all MFA screens
+        if (this.externalWalletContainer) {
+            this.externalWalletContainer.style.display = "none";
+        }
+        if (this.externalWalletDivider) {
+            this.externalWalletDivider.style.display = "none";
+        }
+        // Hide "Powered by Abstraxn" footer on all MFA screens
+        if (this.footer) {
+            this.footer.style.display = "none";
+        }
+        if (fromOAuth) {
+            // Hide email form and social sections so only MFA is visible (OAuth flow)
+            if (this.emailForm)
+                this.emailForm.style.display = "none";
+            const header = this.rootElement.querySelector(".onboarding-header");
+            if (header)
+                header.style.display = "none";
+            if (this.divider)
+                this.divider.style.display = "none";
+            if (this.googleButton)
+                this.googleButton.style.display = "none";
+            const twitterBtn = this.rootElement.querySelector(".onboarding-button-twitter");
+            if (twitterBtn)
+                twitterBtn.style.display = "none";
+            const discordBtn = this.rootElement.querySelector(".onboarding-button-discord");
+            if (discordBtn)
+                discordBtn.style.display = "none";
+            const passkeyBtn = this.rootElement.querySelector(".onboarding-button-passkey");
+            if (passkeyBtn)
+                passkeyBtn.style.display = "none";
+            const passkeyLink = this.rootElement.querySelector(".onboarding-passkey-signup-link");
+            if (passkeyLink)
+                passkeyLink.style.display = "none";
+            const socialGrid = this.rootElement.querySelector(".onboarding-social-grid");
+            if (socialGrid)
+                socialGrid.style.display = "none";
+        }
+        else {
+            // Remove OTP screen from DOM so only MFA screen is visible (separate step)
+            if (this.otpVerificationScreen && this.otpVerificationScreen.parentNode === card) {
+                card.removeChild(this.otpVerificationScreen);
+            }
+        }
+        this.mfaVerificationScreen = this.createElement("div", {
+            className: "onboarding-mfa-verification onboarding-otp-verification",
+        });
+        if (fromOAuth) {
+            const cancelButton = this.createElement("button", {
+                type: "button",
+                className: "onboarding-otp-back-button",
+                "aria-label": "Cancel",
+            });
+            cancelButton.innerHTML = `
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M19 12H5M12 19l-7-7 7-7" />
+      </svg>
+    `;
+            cancelButton.addEventListener("click", () => {
+                if (this.loading)
+                    return;
+                if (this.mfaUseBackupCode) {
+                    this.mfaUseBackupCode = false;
+                    this.mfaCode = "";
+                    this.showMfaVerificationScreen(options);
+                    return;
+                }
+                this.close();
+            });
+            this.mfaVerificationScreen.appendChild(cancelButton);
+        }
+        else {
+            const backButton = this.createElement("button", {
+                type: "button",
+                className: "onboarding-otp-back-button",
+                "aria-label": "Go back to OTP",
+            });
+            backButton.innerHTML = `
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M19 12H5M12 19l-7-7 7-7" />
+      </svg>
+    `;
+            backButton.addEventListener("click", () => {
+                if (this.loading)
+                    return;
+                if (this.mfaUseBackupCode) {
+                    this.mfaUseBackupCode = false;
+                    this.mfaCode = "";
+                    this.showMfaVerificationScreen(options);
+                    return;
+                }
+                if (!this.loading && this.mfaVerificationScreen && this.otpVerificationScreen && card) {
+                    this.mfaVerificationScreen.remove();
+                    this.mfaVerificationScreen = null;
+                    this.mfaVerifyButton = null;
+                    this.mfaCodeInputs = [];
+                    this.mfaCode = "";
+                    this.mfaUseBackupCode = false;
+                    card.appendChild(this.otpVerificationScreen);
+                    card.classList.remove("onboarding-mfa-active");
+                    // Restore external wallet CTA and footer when returning to OTP screen
+                    if (this.externalWalletContainer) {
+                        this.externalWalletContainer.style.display = this.externalWalletsEnabled ? "" : "none";
+                    }
+                    if (this.externalWalletDivider) {
+                        this.externalWalletDivider.style.display = this.externalWalletsEnabled ? "" : "none";
+                    }
+                    if (this.footer && this.config.showFooter) {
+                        this.footer.style.display = "";
+                    }
+                }
+            });
+            this.mfaVerificationScreen.appendChild(backButton);
+        }
+        const iconContainer = this.createElement("div", {
+            className: "onboarding-otp-icon-container",
+        });
+        const iconInner = this.createElement("div", { className: "onboarding-otp-icon-inner" });
+        const lockIcon = this.createElement("span", {
+            innerHTML: `<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>`,
+        });
+        iconInner.appendChild(lockIcon);
+        iconContainer.appendChild(iconInner);
+        this.mfaVerificationScreen.appendChild(iconContainer);
+        const title = this.createElement("h1", {
+            className: "onboarding-otp-title",
+            textContent: this.mfaUseBackupCode
+                ? "Enter backup code"
+                : this.config.labels?.mfaVerifyTitle ?? "Enter authentication code",
+        });
+        this.mfaVerificationScreen.appendChild(title);
+        const instruction = this.createElement("p", {
+            className: "onboarding-otp-instruction",
+            textContent: this.mfaUseBackupCode
+                ? "Enter the 8-character backup code to continue"
+                : this.config.labels?.mfaVerifyInstruction ?? "Enter the 6-digit code from your authenticator app",
+        });
+        this.mfaVerificationScreen.appendChild(instruction);
+        const inputsContainer = this.createElement("div", {
+            className: `onboarding-otp-inputs-container${this.mfaUseBackupCode ? " onboarding-otp-inputs-single" : ""}`,
+        });
+        const mfaCodeLength = this.mfaUseBackupCode ? 8 : 6;
+        this.mfaCodeInputs = [];
+        if (this.mfaUseBackupCode) {
+            const input = this.createElement("input", {
+                type: "text",
+                className: "onboarding-mfa-backup-field",
+                maxLength: 8,
+                inputMode: "text",
+                pattern: "[A-Za-z0-9]*",
+                // placeholder: "Enter backup code",
+            });
+            input.addEventListener("input", (e) => {
+                const target = e.target;
+                target.value = target.value.toUpperCase().replace(/[^A-Z0-9]/g, "").slice(0, 8);
+                this.updateMfaCodeValue();
+            });
+            input.addEventListener("paste", (e) => {
+                e.preventDefault();
+                const pasted = (e.clipboardData?.getData("text") || "")
+                    .toUpperCase()
+                    .replace(/[^A-Z0-9]/g, "")
+                    .slice(0, 8);
+                input.value = pasted;
+                this.updateMfaCodeValue();
+            });
+            this.mfaCodeInputs.push(input);
+            inputsContainer.appendChild(input);
+        }
+        else {
+            for (let i = 0; i < mfaCodeLength; i++) {
+                const input = this.createElement("input", {
+                    type: "text",
+                    className: "onboarding-otp-input",
+                    maxLength: 1,
+                    inputMode: "numeric",
+                    pattern: "[0-9]*",
+                });
+                input.addEventListener("input", (e) => this.handleMfaInput(e, i));
+                input.addEventListener("keydown", (e) => this.handleMfaKeydown(e, i));
+                input.addEventListener("paste", (e) => this.handleMfaPaste(e));
+                this.mfaCodeInputs.push(input);
+                inputsContainer.appendChild(input);
+            }
+        }
+        this.mfaVerificationScreen.appendChild(inputsContainer);
+        if (!this.mfaUseBackupCode) {
+            const backupLinkText = this.createElement("p", {
+                className: "onboarding-mfa-trouble-text",
+            });
+            const backupLinkButton = this.createElement("button", {
+                type: "button",
+                className: "onboarding-mfa-backup-link",
+                textContent: "Use a backup code",
+            });
+            backupLinkButton.addEventListener("click", () => {
+                if (this.loading)
+                    return;
+                this.mfaUseBackupCode = true;
+                this.mfaCode = "";
+                this.showMfaVerificationScreen(options);
+            });
+            backupLinkText.append("Having trouble? ", backupLinkButton);
+            this.mfaVerificationScreen.appendChild(backupLinkText);
+        }
+        const mfaErrorElement = this.createElement("div", {
+            className: "onboarding-error",
+            style: "display: none;",
+        });
+        this.mfaVerificationScreen.appendChild(mfaErrorElement);
+        this.mfaVerificationScreen.errorElement = mfaErrorElement;
+        this.mfaVerifyButton = this.createElement("button", {
+            type: "button",
+            className: "onboarding-button onboarding-button-primary",
+            textContent: "Verify",
+        });
+        this.mfaVerifyButton.disabled = true;
+        this.mfaVerifyButton.addEventListener("click", () => this.handleMfaVerify());
+        this.mfaVerificationScreen.appendChild(this.mfaVerifyButton);
+        card.appendChild(this.mfaVerificationScreen);
+        this.setError(null);
+        if (this.mfaCodeInputs[0]) {
+            this.mfaCodeInputs[0].focus();
+        }
+    }
+    updateMfaCodeValue() {
+        this.mfaCode = this.mfaCodeInputs.map((inp) => inp.value).join("");
+        const mfaCodeLength = this.mfaUseBackupCode ? 8 : 6;
+        if (this.mfaVerifyButton) {
+            this.mfaVerifyButton.disabled = this.loading || this.mfaCode.length !== mfaCodeLength;
+        }
+    }
+    handleMfaInput(e, i) {
+        const input = e.target;
+        if (this.mfaUseBackupCode) {
+            input.value = input.value.toUpperCase().replace(/[^A-Z0-9]/g, "").slice(0, 1);
+        }
+        else {
+            input.value = input.value.replace(/\D/g, "").slice(0, 1);
+        }
+        this.updateMfaCodeValue();
+        const mfaCodeLength = this.mfaUseBackupCode ? 8 : 6;
+        // Auto-focus next input when user types a character
+        if (this.mfaCodeInputs[i]?.value && i < mfaCodeLength - 1 && this.mfaCodeInputs[i + 1]) {
+            this.mfaCodeInputs[i + 1].focus();
+        }
+        // Auto-verify only for 6-digit authenticator flow.
+        if (!this.mfaUseBackupCode && this.mfaCode.length === 6 && !this.loading) {
+            this.handleMfaVerify();
+        }
+    }
+    handleMfaKeydown(e, i) {
+        if (e.key === "Backspace" && !this.mfaCodeInputs[i].value && i > 0 && this.mfaCodeInputs[i - 1]) {
+            this.mfaCodeInputs[i - 1].focus();
+        }
+        this.updateMfaCodeValue();
+    }
+    handleMfaPaste(e) {
+        e.preventDefault();
+        const mfaCodeLength = this.mfaUseBackupCode ? 8 : 6;
+        const pasted = this.mfaUseBackupCode
+            ? (e.clipboardData?.getData("text") || "").toUpperCase().replace(/[^A-Z0-9]/g, "").slice(0, 8)
+            : (e.clipboardData?.getData("text") || "").replace(/\D/g, "").slice(0, 6);
+        for (let i = 0; i < mfaCodeLength; i++) {
+            if (this.mfaCodeInputs[i]) {
+                this.mfaCodeInputs[i].value = pasted[i] ?? "";
+            }
+        }
+        this.updateMfaCodeValue();
+        const focusIndex = Math.min(Math.max(pasted.length - 1, 0), mfaCodeLength - 1);
+        if (pasted.length > 0 && this.mfaCodeInputs[focusIndex]) {
+            this.mfaCodeInputs[focusIndex].focus();
+        }
+        // Auto-verify only for 6-digit authenticator flow.
+        if (!this.mfaUseBackupCode && this.mfaCode.length === 6 && !this.loading) {
+            this.handleMfaVerify();
+        }
+    }
+    async handleMfaVerify() {
+        this.updateMfaCodeValue();
+        const normalizedCode = this.mfaCode.trim().toUpperCase();
+        const isTotpCode = /^\d{6}$/.test(normalizedCode);
+        const isBackupCode = /^[A-Z0-9]{8}$/.test(normalizedCode);
+        if (!isTotpCode && !isBackupCode) {
+            this.setMfaError("Please enter a valid 6-digit or 8-character backup code");
+            return;
+        }
+        const onMfaVerify = this.config.onMfaVerify;
+        if (!onMfaVerify) {
+            this.setMfaError("MFA verification is not configured");
+            return;
+        }
+        this.mfaCodeInputs.forEach((input) => { input.disabled = true; });
+        this.loading = true;
+        if (this.mfaVerifyButton) {
+            this.mfaVerifyButton.disabled = true;
+            this.mfaVerifyButton.textContent = "Verifying...";
+        }
+        this.setMfaError(null);
+        try {
+            const result = await onMfaVerify(normalizedCode);
+            if (result.success) {
+                this.config.onLoginSuccess?.({});
+            }
+            else {
+                this.setMfaError(result.error ?? "Invalid code");
+                this.mfaCodeInputs.forEach((input) => { input.value = ""; input.disabled = false; });
+                this.mfaCode = "";
+                this.updateMfaCodeValue();
+                if (this.mfaCodeInputs[0])
+                    this.mfaCodeInputs[0].focus();
+            }
+        }
+        catch (err) {
+            const msg = err instanceof Error ? err.message : "Verification failed";
+            this.setMfaError(msg);
+            this.mfaCodeInputs.forEach((input) => { input.value = ""; input.disabled = false; });
+            this.mfaCode = "";
+            this.updateMfaCodeValue();
+            if (this.mfaCodeInputs[0])
+                this.mfaCodeInputs[0].focus();
+        }
+        finally {
+            this.loading = false;
+            if (this.mfaVerifyButton) {
+                this.mfaVerifyButton.textContent = "Verify";
+                this.updateMfaCodeValue();
+            }
+        }
+    }
+    setMfaError(message) {
+        const el = this.mfaVerificationScreen ? this.mfaVerificationScreen.errorElement : null;
+        if (el) {
+            el.textContent = message ?? "";
+            el.style.display = message ? "block" : "none";
+        }
+        if (message) {
+            this.config.onLoginError?.(new Error(message));
+        }
+    }
     /**
      * Handle resend OTP
      */
@@ -3323,12 +3815,14 @@ export class OnboardingUIWeb {
      */
     updateButtonState() {
         const isValid = isValidEmail(this.email.trim());
+        const hasEmailValue = this.email.trim().length > 0;
         if (this.continueButton) {
             this.continueButton.disabled = this.loading || !isValid;
         }
         // Update arrow button state (when all auth methods are enabled)
         if (this.emailArrowButton) {
             this.emailArrowButton.disabled = this.loading || !isValid;
+            this.emailArrowButton.classList.toggle("onboarding-input-arrow-button-filled", hasEmailValue);
         }
     }
     /**
@@ -3383,12 +3877,22 @@ export class OnboardingUIWeb {
             this.otpVerificationScreen.remove();
             this.otpVerificationScreen = null;
         }
-        // Remove loading/error mode classes and OTP active class
+        // Clear MFA verification screen
+        if (this.mfaVerificationScreen) {
+            this.mfaVerificationScreen.remove();
+            this.mfaVerificationScreen = null;
+            this.mfaVerifyButton = null;
+            this.mfaCodeInputs = [];
+            this.mfaCode = "";
+            this.mfaUseBackupCode = false;
+        }
+        // Remove loading/error mode classes and OTP/MFA active class
         const card = this.rootElement?.querySelector(".onboarding-card");
         if (card) {
             card.classList.remove("onboarding-mode-loading");
             card.classList.remove("onboarding-mode-error");
             card.classList.remove("onboarding-otp-active");
+            card.classList.remove("onboarding-mfa-active");
         }
         // Hide loading modal if exists (for inline components)
         this.hideLoadingModal();
@@ -3575,6 +4079,10 @@ export class OnboardingUIWeb {
         this.errorElement = null;
         this.otpGroup = null;
         this.otpVerificationScreen = null; // Clear OTP screen reference
+        this.mfaVerificationScreen = null;
+        this.mfaVerifyButton = null;
+        this.mfaCodeInputs = [];
+        this.mfaUseBackupCode = false;
         this.externalWalletContainer = null; // Clear external wallet container reference
         this.externalWalletDivider = null; // Clear external wallet divider reference
     }