Authentication Methods

This section covers the core methods for authenticating users in your Mimeeq-powered application, including both UI components and programmatic approaches.

Display Login Form

mimeeqAuth.mountLogin()

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 function renders a professionally styled sign-in form in a Mimeeq dialog that handles the complete authentication flow out of the box. It's designed to provide a frictionless login experience while maintaining enterprise-grade security.

Business Value

• Consistent User Experience - Provides a professionally designed authentication interface that matches the quality of your product configurator
• Reduced Development Time - Eliminates the need to build custom authentication forms and validation logic
• Security Best Practices - Implements industry-standard security measures to protect user credentials
• Seamless Integration - Works with your existing user management systems through Mimeeq's authentication backend

Parameters

Name	Type	Default	Output	Description
onLoginSuccess	function		User object	Callback fired when authentication succeeds, providing the user data for immediate use in your application
locale	string	en		Language code for localizing the interface

Usage Example

mimeeqAuth.mountLogin({
  onLoginSuccess: (user) => {
    console.log(`Welcome, ${user.firstName}!`);
    window.location.reload();
  },
  locale: 'fr' // French localization
});

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: 'login-form'
});

mountRoot.render({
  embedType: 'LOGIN',
  onLoginSuccess: (user) => {
    console.log(`Welcome, ${user.firstName}!`);
    window.location.reload();
  },
  locale: 'fr' // French localization
});

Programmatic Sign In

mimeeqAuth.authorization.signIn(email, password, customerId)

This method allows you to create fully custom authentication experiences by programmatically signing in users. This is particularly useful when:

• You need to incorporate authentication into a larger custom workflow
• You want complete control over the login UI to match your brand identity
• You're building a headless integration where UI components aren't appropriate

Business Value

• Complete UI Flexibility - Implement any design or user flow for authentication while leveraging Mimeeq's secure backend
• Integration with Existing Systems - Easily connect Mimeeq authentication with your current user management processes
• Streamlined User Journeys - Create specialized authentication flows for different user segments or contexts

Parameters

Name	Type	Default	Description
email	string (required)		User's email address (username)
password	string (required)		User's password
customerId	string (optional)	null	Specific customer context for authentication

Return Value

Returns a Promise that resolves to either:

• A UserData object containing the authenticated user's information
• An AuthError object if authentication fails, with descriptive error details

Usage Example

// Create a fully custom sign-in experience
document.getElementById('login-form').addEventListener('submit', (e) => {
  e.preventDefault();
  
  const email = document.getElementById('email').value;
  const password = document.getElementById('password').value;
  
  // Show loading indicator
  document.getElementById('login-spinner').style.display = 'block';
  
  mimeeqAuth.authorization.signIn(email, password)
    .then(result => {
      // Hide loading indicator
      document.getElementById('login-spinner').style.display = 'none';
      
      if ('name' in result) {
        // Authentication failed - show appropriate error
        const errorMessage = document.getElementById('error-message');
        errorMessage.textContent = result.message;
        errorMessage.style.display = 'block';
      } else {
        // Authentication succeeded - update UI and welcome user
        document.getElementById('login-container').style.display = 'none';
        document.getElementById('user-welcome').textContent = `Welcome, ${result.firstName}!`;
        document.getElementById('authenticated-content').style.display = 'block';
      }
    });
});

Sign Out

mimeeqAuth.authorization.signOut()

This method securely ends the current user's session, clearing authentication tokens and cached data. It ensures a clean break in the authentication state, requiring users to sign in again to access protected resources.

Business Value

• Security Compliance - Properly terminates user sessions to prevent unauthorized access
• Session Management - Gives users and administrators control over active sessions
• Multi-device Support - Helps manage authentication across different devices and browsers

Return Value

Returns a Promise that resolves to:

• true when sign-out is successful
• An AuthError object if the operation encounters an issue

Usage Example

// Create a sign-out button
document.getElementById('logout-button').addEventListener('click', () => {
  // Show loading indicator
  document.getElementById('logout-spinner').style.display = 'block';
  
  mimeeqAuth.authorization.signOut()
    .then(() => {
      // Refresh the page to reset application state
      window.location.reload();
    })
    .catch(err => {
      console.error('Error during sign out:', err);
      // Even with an error, try to reset the UI
      window.location.reload();
    });
});

tip

It's generally good practice to reload the page after signing out to ensure the application state is completely reset.