mmq-auth

Overview

A Mimeeq Auth web component that provides complete authentication functionality for your application.

This component serves as the entry point for all authentication-related features in Mimeeq. It handles user authentication flow, session management, and renders authentication UI components including login, user profile, and password recovery.

The component automatically loads the required Mimeeq authentication libraries and initializes the authentication service using the global environment configuration. It then provides methods to display various authentication forms in a modal dialog.

Key features:

• Complete authentication lifecycle management
• Login, user profile, and password recovery interfaces
• Event-based communication for authentication state changes
• Theme customization options to match your site's design

Basic Usage

<mmq-auth short-code="SHORT_CODE" locale="en"></mmq-auth>
<script src="https://cdn.mimeeq.com/read_models/embed/app-embed.js" async></script>

JavaScript Interaction

// Wait for the auth component to load
document.addEventListener('mimeeq-auth-loaded', () => {
  // Get a reference to the component
  const authComponent = document.querySelector('mmq-auth');

  // Display the login modal
  authComponent.mountLogin();

  // Listen for successful login
  authComponent.addEventListener('mimeeq-login-success', (event) => {
    console.log('User logged in:', event.detail);
    // Refresh the page or update UI based on logged-in state
    window.location.reload();
  });
});

Integration with E-commerce

The authentication component can be integrated with your e-commerce platform to provide a seamless shopping experience with personalized pricing, saved configurations, and order history.

// Example: Show different content based on authentication status
document.addEventListener('mimeeq-auth-loaded', () => {
  // Get user data from the auth service
  window.mimeeqAuth.authorization.getUserData().then(userData => {
    if (userData) {
      // User is logged in - show personalized content
      showPersonalizedPricing();
      loadSavedConfigurations();
    } else {
      // User is not logged in - show login prompt
      document.querySelector('mmq-auth').mountLogin();
    }
  });
});

Properties

Property	Attribute	Description	Type	Default
accentColor	accent-color	The accent color for buttons and interactive elements. Specify a CSS color value to customize the color of buttons, links, and other interactive elements in the authentication interfaces. This helps match the Mimeeq authentication UI to your brand colors.	string	undefined
accentTextColor	accent-text-color	The text color for text displayed on elements with accent color background. Specify a CSS color value to ensure proper contrast between text and background on buttons and other elements that use the accent color.	string	undefined
backgroundColor	background-color	The background color for authentication modals. Specify a CSS color value to customize the background color of the authentication modal dialogs.	string	undefined
locale	locale	The locale code to use for translations and formatting. Mimeeq supports multiple languages for authentication interfaces. Pass a valid two-letter ISO language code (e.g., 'en', 'fr', 'de') to render the interface in that language.	string	'en'
preserveFont	preserve-font	Whether to inherit the font family from your website. When set to true, the authentication interfaces will use the same font family as your website rather than the default Mimeeq font. This helps create a more seamless visual integration.	boolean	undefined
shortCode	short-code	The embed shortcode that identifies this authentication component. This shortcode is used to load the appropriate configuration from the Mimeeq platform. You can find or generate shortcodes in the Mimeeq Admin Panel under Settings > Login Code.	string	undefined

Events

Event	Description	Type
mimeeq-auth-loaded	Event emitted when the authentication component has fully loaded. This event is fired after the component has loaded its configuration, initialized the authentication service, and is ready to display authentication interfaces. Listen for this event before attempting to interact with the component's methods.	CustomEvent<any>
mimeeq-login-success	Event emitted when a user has successfully authenticated. This event provides the user data object of the authenticated user, which includes properties like userId, firstName, lastName, and email. Use this event to update your application state and UI when a user logs in.	CustomEvent<UserData>

Methods

mountForgotPassword() => Promise<void>

Displays a password recovery form in a modal dialog.

This method renders a complete forgot password flow that allows users to reset their password using email verification. It guides users through requesting a reset code, entering the code, and creating a new password.

If the password reset flow completes with a login, the mimeeq-login-success event is emitted with the user data.

// Show the forgot password form when a "Forgot Password" link is clicked
document.getElementById('forgot-password-link').addEventListener('click', () => {
  const authComponent = document.querySelector('mmq-auth');
  authComponent.mountForgotPassword();
});

// Handle successful password reset with login
document.addEventListener('mimeeq-login-success', (event) => {
  console.log('Password reset complete, user logged in:', event.detail);
  // Show success notification
  showNotification('Your password has been reset successfully');
  window.location.reload();
});

Returns

Type: Promise<void>

mountLogin() => Promise<void>

Displays a login form in a modal dialog.

This method renders a complete login interface with username and password fields, as well as links to the forgot password functionality. Use this to allow users to authenticate with their Mimeeq credentials.

When a user successfully logs in, the mimeeq-login-success event is emitted with the user data.

const authComponent = document.querySelector('mmq-auth');
authComponent.mountLogin();

// Handle successful login
authComponent.addEventListener('mimeeq-login-success', (event) => {
  console.log('User logged in:', event.detail);
  // Display personalized elements
  document.getElementById('login-button').style.display = 'none';
  document.getElementById('user-profile').style.display = 'block';
  document.getElementById('username-display').textContent = event.detail.firstName;
  // Refresh page or fetch user-specific data
  window.location.reload();
});

Returns

Type: Promise<void>

mountUserProfile() => Promise<void>

Displays a user profile interface in a modal dialog.

This method renders a user profile view showing account information and providing options to edit user details, change passwords, and manage preferences.

Note: This method will only display meaningful content if the user is already authenticated. For unauthenticated users, it will typically show a login prompt.

// Check if user is logged in first
window.mimeeqAuth.authorization.getUserData().then(userData => {
  if (userData) {
    // User is logged in, show profile
    const authComponent = document.querySelector('mmq-auth');
    authComponent.mountUserProfile();
  } else {
    // User is not logged in, show login instead
    authComponent.mountLogin();
  }
});

Returns

Type: Promise<void>