Password Recovery

The password recovery system provides users with a secure, self-service way to regain access to their accounts when they forget their passwords. This section covers both UI components and programmatic approaches to password recovery.

Display Password Recovery Form

mimeeqAuth.mountForgotPassword()

warning

This method is deprecated. Please use the unified mount method or the mmq-auth component instead, as described in the "Recommended Alternative" section below.

This method renders a user-friendly password recovery form in a Mimeeq modal. It guides users through the process of requesting a verification code and setting a new password.

Business Value

• Reduced Support Tickets - Self-service password recovery decreases the volume of account-related support requests
• Improved User Experience - Streamlined process helps users quickly regain access to their accounts
• Enhanced Security - Multi-step verification ensures only legitimate users can reset passwords
• Consistent Brand Experience - Pre-built UI maintains your brand's look and feel during the recovery process

Requirements

This functionality requires an element in the DOM with the data-mimeeq-forgot-password attribute to serve as the mounting point for the recovery form.

Parameters

Name	Type	Default	Description
onSubmit	function		Callback triggered when a user successfully initiates recovery
locale	string	en	Language code for localizing the interface

Usage Example

<div data-mimeeq-forgot-password></div>
<script>
  document.addEventListener('mimeeq-auth-loaded', () => {
    mimeeqAuth.mountForgotPassword({
      onSubmit: () => {
        console.log('Recovery email sent successfully');
        // Show confirmation message to user
      },
      locale: 'es', // Spanish localization
    });
  });
</script>

Recommended Alternative

// Using the unified mount method (recommended approach)
const mountRoot = await window.mimeeqAuth.mount({
  CDNPath: window.mimeeqEmbedEnv.CDNPath,
  baseURL: window.mimeeqEmbedEnv.APIPath,
  customerId: 'customer123',
  node: document.getElementById('auth-container'),
  uid: 'forgot-password',
});

mountRoot.render({
  embedType: 'FORGOT_PASSWORD',
  onLoginSuccess: (user) => {
    console.log('Password reset complete, user logged in:', user);
    // Redirect to dashboard or show welcome message
  },
  locale: 'es', // Spanish localization
});

Initiate Password Recovery

mimeeqAuth.authorization.forgotPassword(email)

This method begins the password recovery process by sending a verification code to the user's registered email address. It's the first step in a secure, two-part recovery flow that ensures only users with access to the registered email can reset their passwords.

Business Value

• Automated Recovery Process - Streamlines account recovery without requiring manual intervention from support staff
• Email Verification Security - Ensures password resets are only initiated by users with access to the registered email
• Flexible Integration - Allows custom recovery interfaces while leveraging Mimeeq's secure backend processes
• Audit Trail - Creates records of recovery attempts for security monitoring

Parameters

Name	Type	Default	Description
email	string (required)		Email address associated with account

Return Value

Returns a Promise that resolves to:

• { success: true } when the recovery email is sent successfully
• An AuthError object if the operation encounters an issue

Usage Example

// Create a custom password recovery request form
document.getElementById('recovery-form').addEventListener('submit', (e) => {
  e.preventDefault();

  const email = document.getElementById('recovery-email').value;

  // Show loading state
  document.getElementById('recovery-button').disabled = true;
  document.getElementById('recovery-spinner').style.display = 'block';

  window.mimeeqAuth.authorization.forgotPassword(email).then((response) => {
    // Reset loading state
    document.getElementById('recovery-button').disabled = false;
    document.getElementById('recovery-spinner').style.display = 'none';

    if (response.success) {
      // Hide request form and show verification code form
      document.getElementById('recovery-request').style.display = 'none';
      document.getElementById('recovery-verification').style.display = 'block';

      // Store email for the second step
      document.getElementById('verification-email').value = email;

      // Show success message
      document.getElementById('verification-message').textContent =
        'A verification code has been sent to your email. Please check your inbox and enter the code below.';
    } else {
      // Show error message
      document.getElementById('recovery-error').textContent =
        'Could not send verification code. Please check your email and try again.';
      document.getElementById('recovery-error').style.display = 'block';
    }
  });
});

Complete Password Reset

mimeeqAuth.authorization.forgotPasswordSubmit(email, password, code)

This method completes the password recovery process by verifying the user's code and setting a new password. It's the second step in the recovery flow, after the user has received the verification code sent to their email.

Business Value

• Self-service Resolution - Enables users to regain account access without waiting for support assistance
• Verification Security - Requires both email access and the verification code, providing two-factor authentication for resets
• Password Policy Enforcement - Enforces your organization's password requirements during resets
• Immediate Account Restoration - Allows users to quickly resume their work after completing the recovery

Parameters

Name	Type	Default	Description
email	string (required)		Email address associated with the account
password	string (required)		New password that will replace the previous one
code	string (required)		Verification code received via email from the forgotPassword method

Return Value

Returns a Promise that resolves to:

• { success: true } when the password is successfully reset
• An AuthError object if the verification fails or another issue occurs

Usage Example

// Handle verification code submission and new password setting
document.getElementById('verification-form').addEventListener('submit', (e) => {
  e.preventDefault();

  const email = document.getElementById('verification-email').value;
  const password = document.getElementById('new-password').value;
  const confirmPassword = document.getElementById('confirm-password').value;
  const code = document.getElementById('verification-code').value;

  // Client-side validation
  if (password !== confirmPassword) {
    document.getElementById('verification-error').textContent = 'Passwords do not match';
    document.getElementById('verification-error').style.display = 'block';
    return;
  }

  // Show loading state
  document.getElementById('reset-button').disabled = true;
  document.getElementById('verification-spinner').style.display = 'block';

  window.mimeeqAuth.authorization.forgotPasswordSubmit(email, password, code).then((response) => {
    // Reset loading state
    document.getElementById('reset-button').disabled = false;
    document.getElementById('verification-spinner').style.display = 'none';

    if (response.success) {
      // Password reset successful
      document.getElementById('recovery-verification').style.display = 'none';
      document.getElementById('reset-success').style.display = 'block';

      // Automatically redirect to login after a delay
      setTimeout(() => {
        window.location.href = '/login';
      }, 3000);
    } else {
      // Show error message
      document.getElementById('verification-error').textContent =
        'Could not reset password. Please check your verification code and try again.';
      document.getElementById('verification-error').style.display = 'block';
    }
  });
});

tip

Consider implementing password strength requirements that match your organization's security policies. You can display these requirements to users while they're creating their new password.