@verdocs/web-sdk 6.10.7 → 6.12.1

package/dist/collection/components/embeds/verdocs-auth/verdocs-auth.js

@@ -1,8 +1,52 @@
 import { h } from "@stencil/core";
-import { verifyEmail, getMyUser, convertToE164 } from "@verdocs/js-sdk";
 import { VerdocsEndpoint, createProfile, authenticate, resendVerification, resetPassword } from "@verdocs/js-sdk";
+import { isMFARequired, getSocialProviders, getSocialLoginUrl, createCodeVerifier, createCodeChallenge } from "@verdocs/js-sdk";
+import { verifyEmail, getMyUser, convertToE164 } from "@verdocs/js-sdk";
+import { GoogleIcon, MicrosoftIcon } from "../../../utils/Icons";
 import { VerdocsToast } from "../../../utils/Toast";
 import { SDKError } from "../../../utils/errors";
+const MFA_CODE_ERROR = 'Invalid code. Please try again.';
+const SOCIAL_START_ERROR = 'Unable to start sign-in sequence. Please try again.';
+const SOCIAL_LOGIN_KEY = 'vdocs-social-login';
+const SOCIAL_ERROR_MESSAGES = {
+    email_unverified: 'That account does not have a verified email address.',
+    corporate_email_required: 'Please use your corporate email address to create an account.',
+    account_locked: 'That account is locked. Please contact support@verdocs.com.',
+    provider_error: 'That provider could not sign you in. Please try again.',
+    access_denied: 'Sign-in was canceled.',
+};
+const socialErrorMessage = (code) => SOCIAL_ERROR_MESSAGES[code] || 'Unable to sign in. Please try again.';
+const readSocialLoginAttempt = () => {
+    try {
+        const stored = window.sessionStorage.getItem(SOCIAL_LOGIN_KEY);
+        return stored ? JSON.parse(stored) : null;
+    }
+    catch (_a) {
+        return null;
+    }
+};
+const clearSocialLoginAttempt = () => {
+    try {
+        window.sessionStorage.removeItem(SOCIAL_LOGIN_KEY);
+    }
+    catch (_a) {
+        // Third-party embeds may block sessionStorage. It's OK.
+    }
+};
+// Prevent replays on a reload
+const cleanSocialLoginParams = (names) => {
+    const url = new URL(window.location.href);
+    names.forEach(name => url.searchParams.delete(name));
+    window.history.replaceState({}, '', `${url.pathname}${url.search}${url.hash}`);
+};
+const currentReturnUri = () => `${window.location.origin}${window.location.pathname}`;
+const formatRecoveryCode = (value) => {
+    const cleaned = value
+        .toLowerCase()
+        .replace(/[^a-z0-9]/g, '')
+        .slice(0, 8);
+    return cleaned.length > 4 ? `${cleaned.slice(0, 4)}-${cleaned.slice(4)}` : cleaned;
+};
 /**
  * Display an authentication dialog that allows the user to login or sign up. If the user is
  * already authenticated with a valid session, this component will hide itself and fire the
@@ -12,7 +56,7 @@ import { SDKError } from "../../../utils/errors";
  * To simplify UI development, a visibility flag can force this component to never display. This
  * allows you to subscribe to notifications from client apps without calling the lower-level JS SDK.
  *
- * This embed is responsive / mobile-friendly, but the calling application should provide at
+ * This embed is responsive and mobile-friendly, but the calling application should provide at
  * least a 300px wide container to allow sufficient space for the required forms.
  *
  * ```ts
@@ -44,6 +88,12 @@ export class VerdocsAuth {
          * The display mode to start in.
          */
         this.displayMode = 'login';
+        /**
+         * Social auth is disabled by default because these are redirect flows that require allowable redirect_uri
+         * destinations be pre-registered. These will only work on Verdocs sites/apps, so third-party developers
+         * should not turn this on unless instructed to by Verdocs Support.
+         */
+        this.showSocialLogins = false;
         this.org_name = '';
         this.first_name = '';
         this.last_name = '';
@@ -57,7 +107,14 @@ export class VerdocsAuth {
         this.resendDisabled = false;
         this.session = null;
         this.profile = null;
+        this.providers = { google: false, microsoft: false };
+        this.mfaToken = '';
+        this.mfaCode = '';
+        this.recoveryCode = '';
+        this.useRecoveryCode = false;
+        this.mfaError = '';
         this.resendDisabledTimer = null;
+        this.mfaFocusPending = false;
         // We can't instantly log in on the default endpoint because other listeners might see
         // its events and incorrectly trigger before we're done. So we manage our own temp
         // endpoint and pass the final tokens to the default once we're ready.
@@ -87,6 +144,33 @@ export class VerdocsAuth {
                 (_b = this.authenticated) === null || _b === void 0 ? void 0 : _b.emit({ authenticated: false, session, profile });
             }
         });
+        if (this.showSocialLogins) {
+            getSocialProviders(this.endpoint)
+                .then(providers => {
+                this.providers = providers;
+            })
+                .catch(() => undefined);
+        }
+        this.handleSocialLoginReturn();
+    }
+    componentDidRender() {
+        if (this.displayMode !== 'mfa') {
+            return;
+        }
+        const input = this.el.querySelector('.mfa-input input');
+        if (!input) {
+            return;
+        }
+        if (!this.useRecoveryCode) {
+            input.setAttribute('inputmode', 'numeric');
+        }
+        else {
+            input.removeAttribute('inputmode');
+        }
+        if (this.mfaFocusPending) {
+            this.mfaFocusPending = false;
+            input.focus();
+        }
     }
     disconnectedCallback() {
         if (typeof window !== 'undefined') {
@@ -178,9 +262,24 @@ export class VerdocsAuth {
     }
     completeLogin(result) {
         this.clearForms();
+        this.displayMode = 'login';
         this.tempAuthEndpoint.clearSession();
         this.endpoint.setToken(result.access_token);
     }
+    async finishLogin(authResult) {
+        console.log('[AUTH] Authenticated, checking email verification');
+        this.tempAuthEndpoint.setToken(authResult.access_token);
+        const user = await getMyUser(this.tempAuthEndpoint);
+        this.submitting = false;
+        if (!user.email_verified) {
+            console.log('[AUTH] Logged in, pending email address verification');
+            this.displayMode = 'verify';
+        }
+        else {
+            console.log('[AUTH] Email address is verified, completing login');
+            this.completeLogin(authResult);
+        }
+    }
     async loginAndCheckVerification() {
         var _a;
         if (this.submitting) {
@@ -189,29 +288,170 @@ export class VerdocsAuth {
         this.submitting = true;
         this.tempAuthEndpoint.clearSession();
         try {
-            this.submitting = false;
             const authResult = await authenticate(this.tempAuthEndpoint, { username: this.email.trim(), password: this.password, grant_type: 'password' });
-            console.log('[AUTH] Authenticated, checking email verification');
-            this.tempAuthEndpoint.setToken(authResult.access_token);
-            const user = await getMyUser(this.tempAuthEndpoint);
-            if (!user.email_verified) {
-                console.log('[AUTH] Logged in, pending email address verification');
-                this.displayMode = 'verify';
-            }
-            else {
-                console.log('[AUTH] Email address is verified, completing login');
-                this.completeLogin(authResult);
-            }
+            await this.finishLogin(authResult);
         }
         catch (e) {
+            if (isMFARequired(e)) {
+                this.startMFA(e.response.data.mfa_token);
+                return;
+            }
             this.submitting = false;
             console.log('[AUTH] Auth failure', ((_a = e.response) === null || _a === void 0 ? void 0 : _a.data) || e);
             VerdocsToast('Login failed. Please check your credentials and try again.', { style: 'error' });
         }
     }
+    startMFA(token) {
+        this.mfaToken = token;
+        this.mfaCode = '';
+        this.recoveryCode = '';
+        this.useRecoveryCode = false;
+        this.mfaError = '';
+        this.submitting = false;
+        this.mfaFocusPending = true;
+        this.displayMode = 'mfa';
+    }
+    returnToLogin() {
+        this.mfaToken = '';
+        this.mfaCode = '';
+        this.recoveryCode = '';
+        this.useRecoveryCode = false;
+        this.mfaError = '';
+        this.password = '';
+        this.submitting = false;
+        this.displayMode = 'login';
+    }
+    handleMFAFailure(e) {
+        var _a;
+        this.submitting = false;
+        this.mfaCode = '';
+        this.recoveryCode = '';
+        // Failed attempts require a fresh token
+        if (isMFARequired(e)) {
+            this.mfaToken = e.response.data.mfa_token;
+            this.mfaError = MFA_CODE_ERROR;
+            return;
+        }
+        if (((_a = e === null || e === void 0 ? void 0 : e.response) === null || _a === void 0 ? void 0 : _a.status) === 401) {
+            this.returnToLogin();
+            VerdocsToast('Your sign-in timed out. Enter your password again.', { style: 'error' });
+            return;
+        }
+        this.mfaError = MFA_CODE_ERROR;
+    }
+    async submitMFA(code, isRecoveryCode) {
+        if (this.submitting || !code) {
+            return;
+        }
+        this.submitting = true;
+        this.mfaError = '';
+        this.tempAuthEndpoint.clearSession();
+        try {
+            const authResult = await authenticate(this.tempAuthEndpoint, isRecoveryCode
+                ? { grant_type: 'urn:verdocs:params:oauth:grant-type:mfa-recovery-code', mfa_token: this.mfaToken, recovery_code: code }
+                : { grant_type: 'urn:verdocs:params:oauth:grant-type:mfa-otp', mfa_token: this.mfaToken, otp: code });
+            await this.finishLogin(authResult);
+        }
+        catch (e) {
+            this.handleMFAFailure(e);
+        }
+    }
+    handleVerifyMFA() {
+        this.submitMFA(this.useRecoveryCode ? this.recoveryCode : this.mfaCode, this.useRecoveryCode).catch(() => undefined);
+    }
+    handleMFACodeInput(target) {
+        const digits = (target.value || '').replace(/\D/g, '').slice(0, 6);
+        if (target.value !== digits) {
+            target.value = digits;
+        }
+        this.mfaCode = digits;
+        // Auto-submit once 6 digits are entered
+        if (digits.length === 6) {
+            this.submitMFA(digits, false).catch(() => undefined);
+        }
+    }
+    handleRecoveryCodeInput(target) {
+        const formatted = formatRecoveryCode(target.value || '');
+        if (target.value !== formatted) {
+            target.value = formatted;
+        }
+        this.recoveryCode = formatted;
+    }
+    toggleRecoveryCode() {
+        this.useRecoveryCode = !this.useRecoveryCode;
+        this.mfaCode = '';
+        this.recoveryCode = '';
+        this.mfaError = '';
+        this.mfaFocusPending = true;
+    }
+    handleSocialLogin(provider) {
+        try {
+            const verifier = createCodeVerifier();
+            const state = createCodeVerifier();
+            createCodeChallenge(verifier)
+                .then(codeChallenge => {
+                const attempt = { verifier, state, provider };
+                window.sessionStorage.setItem(SOCIAL_LOGIN_KEY, JSON.stringify(attempt));
+                window.location.assign(getSocialLoginUrl(this.endpoint, provider, { returnUri: currentReturnUri(), codeChallenge, state }));
+            })
+                .catch(() => VerdocsToast(SOCIAL_START_ERROR, { style: 'error' }));
+        }
+        catch (_a) {
+            VerdocsToast(SOCIAL_START_ERROR, { style: 'error' });
+        }
+    }
+    handleSocialLoginReturn() {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        const params = new URLSearchParams(window.location.search);
+        const loginCode = params.get('login_code');
+        const state = params.get('state');
+        const error = params.get('error');
+        if (!loginCode && !error) {
+            return;
+        }
+        const attempt = readSocialLoginAttempt();
+        // `error` doesn't give us the whole picture
+        if (!loginCode && !attempt) {
+            return;
+        }
+        clearSocialLoginAttempt();
+        cleanSocialLoginParams(loginCode ? ['login_code', 'state'] : ['error']);
+        if (error) {
+            VerdocsToast(socialErrorMessage(error), { style: 'error' });
+            return;
+        }
+        if (!attempt || attempt.state !== state) {
+            VerdocsToast('Sign-in could not be verified. Try again.', { style: 'error' });
+            return;
+        }
+        this.exchangeLoginCode(loginCode, attempt.verifier);
+    }
+    exchangeLoginCode(loginCode, codeVerifier) {
+        this.submitting = true;
+        this.tempAuthEndpoint.clearSession();
+        authenticate(this.tempAuthEndpoint, { grant_type: 'urn:verdocs:params:oauth:grant-type:login-code', login_code: loginCode, code_verifier: codeVerifier })
+            .then(authResult => this.finishLogin(authResult))
+            .catch(e => {
+            var _a;
+            if (isMFARequired(e)) {
+                this.startMFA(e.response.data.mfa_token);
+                return;
+            }
+            this.submitting = false;
+            console.log('[AUTH] Social login failure', ((_a = e.response) === null || _a === void 0 ? void 0 : _a.data) || e);
+            VerdocsToast('Sign-in failed. Please try again.', { style: 'error' });
+        });
+    }
     clearForms() {
         this.submitting = false;
         this.resendDisabled = false;
+        this.mfaToken = '';
+        this.mfaCode = '';
+        this.recoveryCode = '';
+        this.useRecoveryCode = false;
+        this.mfaError = '';
         this.email = '';
         this.phone = '';
         this.password = '';
@@ -327,6 +567,12 @@ export class VerdocsAuth {
             VerdocsToast('Unable to reset password. Please check your email address and try again.', { style: 'error' });
         }
     }
+    renderProviderButtons() {
+        if (!this.showSocialLogins || (!this.providers.google && !this.providers.microsoft)) {
+            return null;
+        }
+        return (h("div", { class: "providers" }, this.providers.google && (h("verdocs-button", { label: "Continue with Google", variant: "outline", class: "provider-google", startIcon: GoogleIcon, disabled: this.submitting, onClick: () => this.handleSocialLogin('google') })), this.providers.microsoft && (h("verdocs-button", { label: "Continue with Microsoft", variant: "outline", class: "provider-microsoft", startIcon: MicrosoftIcon, disabled: this.submitting, onClick: () => this.handleSocialLogin('microsoft') })), h("div", { class: "divider" }, h("div", { class: "divider-line" }), "or", h("div", { class: "divider-line" }))));
+    }
     render() {
         if (!this.visible) {
             return h("div", { style: { display: 'none' } }, "Authenticated");
@@ -334,9 +580,19 @@ export class VerdocsAuth {
         if (this.session) {
             return (h("verdocs-button", { label: "Sign Out", disabled: this.submitting, onClick: () => this.handleLogout(), style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }));
         }
+        if (this.displayMode === 'mfa') {
+            const enteredCode = this.useRecoveryCode ? this.recoveryCode : this.mfaCode;
+            const codeComplete = this.useRecoveryCode ? this.recoveryCode.replace('-', '').length === 8 : this.mfaCode.length === 6;
+            return (h("div", { class: "form" }, h("a", { href: "https://verdocs.com/en/" }, h("img", { src: this.logo, alt: "Verdocs Logo", class: "logo" })), h("h3", null, "Two-factor authentication"), h("p", null, this.useRecoveryCode
+                ? 'Enter one of the backup codes you saved when you turned on multi-factor authentication.'
+                : 'Enter the six-digit code from your authenticator app.'), h("form", { onSubmit: (e) => {
+                    e.preventDefault();
+                    this.handleVerifyMFA();
+                } }, this.useRecoveryCode ? (h("verdocs-text-input", { class: "mfa-input", label: "Backup code", placeholder: "xxxx-xxxx", autocomplete: "one-time-code", value: this.recoveryCode, onInput: (e) => this.handleRecoveryCodeInput(e.target), disabled: this.submitting })) : (h("verdocs-text-input", { class: "mfa-input", label: "Authentication code", autocomplete: "one-time-code", value: this.mfaCode, onInput: (e) => this.handleMFACodeInput(e.target), disabled: this.submitting })), this.mfaError && (h("div", { role: "alert", class: "mfa-error" }, this.mfaError)), h("div", { class: "buttons" }, h("verdocs-button", { label: "Cancel", variant: "outline", disabled: this.submitting, onClick: () => this.returnToLogin() }), h("verdocs-button", { label: "Verify", disabled: this.submitting || !codeComplete || !enteredCode, onClick: () => this.handleVerifyMFA() })), h("div", { class: "buttons" }, h("verdocs-button", { variant: "text", size: "small", label: this.useRecoveryCode ? 'Use your authenticator app instead' : 'Use a backup code instead', disabled: this.submitting, onClick: () => this.toggleRecoveryCode() })))));
+        }
         if (this.displayMode === 'signup') {
             const invalid = this.submitting || !this.first_name || !this.last_name || !this.email || !this.password || !this.confirmpass || !this.org_name;
-            return (h("div", { class: "form" }, h("a", { href: "https://verdocs.com/en/" }, h("img", { src: this.logo, alt: "Verdocs Logo", class: "logo" })), h("h3", null, "Sign up for a free account"), h("div", { class: "already-have" }, "Already have an account?", h("verdocs-button", { label: "Log In", variant: "text", onClick: () => (this.displayMode = 'login'), disabled: this.submitting })), h("form", { onSubmit: () => this.handleSignup() }, h("div", { style: { display: 'flex', flexDirection: 'row', columnGap: '20px' } }, h("verdocs-text-input", { label: "First Name", autocomplete: "first", required: true, value: this.first_name, onInput: (e) => (this.first_name = e.target.value), disabled: this.submitting }), h("verdocs-text-input", { label: "Last Name", autocomplete: "last", required: true, value: this.last_name, onInput: (e) => (this.last_name = e.target.value), disabled: this.submitting })), h("verdocs-text-input", { label: "Email Address", autocomplete: "email", required: true, value: this.email, onInput: (e) => (this.email = e.target.value), disabled: this.submitting }), h("verdocs-text-input", { label: "Password", type: "password", required: true, autocomplete: "new-password", value: this.password, onInput: (e) => (this.password = e.target.value), disabled: this.submitting }), h("verdocs-text-input", { label: "Confirm Password", type: "password", required: true, autocomplete: "off", value: this.confirmpass, onInput: (e) => (this.confirmpass = e.target.value), disabled: this.submitting }), h("verdocs-text-input", { label: "Phone Number", type: "tel", required: true, autocomplete: "phone", value: this.phone, onInput: (e) => (this.phone = e.target.value), disabled: this.submitting }), h("verdocs-text-input", { label: "Organization Name", autocomplete: "org", required: true, value: this.org_name, onInput: (e) => (this.org_name = e.target.value), disabled: this.submitting, style: { flex: '1' } }), h("div", { class: "service-agreement" }, "By clicking the Create Account button, you agree to the", ' ', h("a", { href: "https://verdocs.com/eula", target: "_blank" }, "End User License Agreement"), ". Learn about how we use and protect your data and how you can opt-out in our", ' ', h("a", { href: "https://verdocs.com/privacy-policy", target: "_blank" }, "Privacy Policy"), "."), h("div", { style: { marginTop: '30px' } }), h("verdocs-button", { label: "Next", disabled: invalid, onClick: invalid ? () => { } : () => this.handleSignup(), style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }))));
+            return (h("div", { class: "form" }, h("a", { href: "https://verdocs.com/en/" }, h("img", { src: this.logo, alt: "Verdocs Logo", class: "logo" })), h("h3", null, "Sign up for a free account"), h("div", { class: "already-have" }, "Already have an account?", h("verdocs-button", { label: "Log In", variant: "text", onClick: () => (this.displayMode = 'login'), disabled: this.submitting })), this.renderProviderButtons(), h("form", { onSubmit: () => this.handleSignup() }, h("div", { style: { display: 'flex', flexDirection: 'row', columnGap: '20px' } }, h("verdocs-text-input", { label: "First Name", autocomplete: "first", required: true, value: this.first_name, onInput: (e) => (this.first_name = e.target.value), disabled: this.submitting }), h("verdocs-text-input", { label: "Last Name", autocomplete: "last", required: true, value: this.last_name, onInput: (e) => (this.last_name = e.target.value), disabled: this.submitting })), h("verdocs-text-input", { label: "Email Address", autocomplete: "email", required: true, value: this.email, onInput: (e) => (this.email = e.target.value), disabled: this.submitting }), h("verdocs-text-input", { label: "Password", type: "password", required: true, autocomplete: "new-password", value: this.password, onInput: (e) => (this.password = e.target.value), disabled: this.submitting }), h("verdocs-text-input", { label: "Confirm Password", type: "password", required: true, autocomplete: "off", value: this.confirmpass, onInput: (e) => (this.confirmpass = e.target.value), disabled: this.submitting }), h("verdocs-text-input", { label: "Phone Number", type: "tel", required: true, autocomplete: "phone", value: this.phone, onInput: (e) => (this.phone = e.target.value), disabled: this.submitting }), h("verdocs-text-input", { label: "Organization Name", autocomplete: "org", required: true, value: this.org_name, onInput: (e) => (this.org_name = e.target.value), disabled: this.submitting, style: { flex: '1' } }), h("div", { class: "service-agreement" }, "By clicking the Create Account button, you agree to the", ' ', h("a", { href: "https://verdocs.com/eula", target: "_blank" }, "End User License Agreement"), ". Learn about how we use and protect your data and how you can opt-out in our", ' ', h("a", { href: "https://verdocs.com/privacy-policy", target: "_blank" }, "Privacy Policy"), "."), h("div", { style: { marginTop: '30px' } }), h("verdocs-button", { label: "Next", disabled: invalid, onClick: invalid ? () => { } : () => this.handleSignup(), style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }))));
         }
         if (this.displayMode === 'verify') {
             return (h("div", { class: "form" }, h("form", { onSubmit: () => this.handleVerification() }, h("p", null, "Please check your e-mail inbox for a verification code and enter it below."), h("verdocs-text-input", { label: "Verification Code", required: true, value: this.verificationCode, onInput: (e) => (this.verificationCode = e.target.value), disabled: this.submitting }), h("div", { class: "buttons" }, h("verdocs-button", { label: "Sign Out", variant: "outline", disabled: this.submitting, onClick: () => this.handleLogout() }), h("verdocs-button", { label: "Verify", disabled: this.submitting || !this.verificationCode || this.verificationCode.length !== 6, onClick: () => this.handleVerification() })), h("div", { class: "buttons" }, h("verdocs-button", { variant: "text", label: "Resend Code", disabled: this.resendDisabled || this.submitting, onClick: () => this.handleResendVerification() })))));
@@ -347,7 +603,7 @@ export class VerdocsAuth {
         if (this.displayMode === 'reset') {
             return (h("div", { class: "form" }, h("a", { href: "https://verdocs.com/en/" }, h("img", { src: this.logo, alt: "Verdocs Logo", class: "logo" })), h("h3", null, "Forgot your password?"), h("p", null, "Enter your e-mail address below, and reset instructions will be sent to your Inbox. Please allow up to 15 minutes to arrive. Check your spam folder if you do not receive the message."), h("form", { onSubmit: () => this.handleResetPassword() }, h("verdocs-text-input", { label: "Verification Code", required: true, value: this.verificationCode, onInput: (e) => (this.verificationCode = e.target.value), disabled: this.submitting }), h("verdocs-text-input", { label: "Password", type: "password", required: true, autocomplete: "off", value: this.newPassword, onInput: (e) => (this.newPassword = e.target.value), disabled: this.submitting }), h("verdocs-text-input", { label: "Confirm Password", type: "password", required: true, autocomplete: "off", value: this.confirmpass, onInput: (e) => (this.confirmpass = e.target.value), disabled: this.submitting }), h("div", { style: { marginTop: '30px' } }), h("div", { class: "buttons" }, h("verdocs-button", { label: "Cancel", variant: "outline", disabled: this.submitting, onClick: () => (this.displayMode = 'login') }), h("verdocs-button", { label: "Reset", disabled: this.submitting, onClick: () => this.handleResetPassword() })), h("div", { class: "buttons" }, h("verdocs-button", { variant: "text", label: "Resend Code", disabled: this.resendDisabled || this.submitting, onClick: () => this.handleResendReset() })))));
         }
-        return (h("div", { class: "form" }, h("a", { href: "https://verdocs.com/en/" }, h("img", { src: this.logo, alt: "Verdocs Logo", class: "logo" })), h("h3", null, "Log in to your account"), h("div", { class: "already-have" }, "Don't have an account?", h("verdocs-button", { label: "Sign Up", variant: "text", onClick: () => (this.displayMode = 'signup'), disabled: this.submitting })), h("form", { onSubmit: () => this.loginAndCheckVerification() }, h("verdocs-text-input", { label: "Email", autocomplete: "username", value: this.email, onInput: (e) => (this.email = e.target.value), disabled: this.submitting }), h("verdocs-text-input", { label: "Password", type: "password", autocomplete: "current-password", value: this.password, onInput: (e) => (this.password = e.target.value), disabled: this.submitting }), h("verdocs-button", { label: "Forgot Your Password?", variant: "text", onClick: () => (this.displayMode = 'forgot'), disabled: this.submitting, style: { display: 'flex', justifyContent: 'center', margin: '10px auto 20px' } }), h("verdocs-button", { label: "Login", disabled: this.submitting, onClick: () => this.loginAndCheckVerification(), style: { display: 'flex', justifyContent: 'center', margin: '10px auto 0' } }))));
+        return (h("div", { class: "form" }, h("a", { href: "https://verdocs.com/en/" }, h("img", { src: this.logo, alt: "Verdocs Logo", class: "logo" })), h("h3", null, "Log in to your account"), this.renderProviderButtons(), h("form", { onSubmit: () => this.loginAndCheckVerification() }, h("verdocs-text-input", { label: "Email", autocomplete: "username", value: this.email, onInput: (e) => (this.email = e.target.value), disabled: this.submitting }), h("verdocs-text-input", { label: "Password", type: "password", autocomplete: "current-password", value: this.password, onInput: (e) => (this.password = e.target.value), disabled: this.submitting }), h("verdocs-button", { label: "Forgot Your Password?", variant: "text", onClick: () => (this.displayMode = 'forgot'), disabled: this.submitting, style: { display: 'flex', justifyContent: 'center', margin: '0 auto 20px' } }), h("verdocs-button", { label: "Login", disabled: this.submitting, onClick: () => this.loginAndCheckVerification(), style: { display: 'flex', justifyContent: 'center', margin: '10px auto 0' } }), h("verdocs-button", { label: "Sign Up", variant: "outline", disabled: this.submitting, onClick: () => (this.displayMode = 'signup'), style: { display: 'flex', justifyContent: 'center', margin: '10px auto 0' } }))));
     }
     static get is() { return "verdocs-auth"; }
     static get originalStyleUrls() {
@@ -431,8 +687,8 @@ export class VerdocsAuth {
                 "type": "string",
                 "mutable": true,
                 "complexType": {
-                    "original": "'login' | 'forgot' | 'reset' | 'signup' | 'verify'",
-                    "resolved": "\"forgot\" | \"login\" | \"reset\" | \"signup\" | \"verify\"",
+                    "original": "'login' | 'forgot' | 'reset' | 'signup' | 'verify' | 'mfa'",
+                    "resolved": "\"forgot\" | \"login\" | \"mfa\" | \"reset\" | \"signup\" | \"verify\"",
                     "references": {}
                 },
                 "required": false,
@@ -446,6 +702,26 @@ export class VerdocsAuth {
                 "reflect": false,
                 "attribute": "display-mode",
                 "defaultValue": "'login'"
+            },
+            "showSocialLogins": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Social auth is disabled by default because these are redirect flows that require allowable redirect_uri\ndestinations be pre-registered. These will only work on Verdocs sites/apps, so third-party developers\nshould not turn this on unless instructed to by Verdocs Support."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-social-logins",
+                "defaultValue": "false"
             }
         };
     }
@@ -463,7 +739,13 @@ export class VerdocsAuth {
             "submitting": {},
             "resendDisabled": {},
             "session": {},
-            "profile": {}
+            "profile": {},
+            "providers": {},
+            "mfaToken": {},
+            "mfaCode": {},
+            "recoveryCode": {},
+            "useRecoveryCode": {},
+            "mfaError": {}
         };
     }
     static get events() {
@@ -512,5 +794,6 @@ export class VerdocsAuth {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
 }
 //# sourceMappingURL=verdocs-auth.js.map