User Management

This section covers functionality related to user profile management and retrieving information about the currently authenticated user. These features help create personalized experiences and integrate user identity into your application.

Display User Profile Management

mimeeqAuth.mountUserProfile()

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 displays a comprehensive user profile management interface in a Mimeeq modal dialog. It provides access to the user's personal information, password management, and account settings. The interface is only accessible to authenticated users.

Business Value

• Self-service Account Management - Reduces administrative overhead by allowing users to update their own information
• Password Security - Enables users to maintain strong credentials by changing passwords regularly
• Personalization Hub - Creates a central location for users to manage their experience preferences
• Consistent User Experience - Provides a professionally designed interface that matches your product configurator

Parameters

Name	Type	Default	Description
locale	string	en	Language code for localizing the interface

Usage Example

// Add a "My Account" button to your site
document.getElementById('my-account-button').addEventListener('click', () => {
  // Check if user is logged in first
  mimeeqAuth.authorization.getUserData().then((user) => {
    if (user && !('name' in user)) {
      // User is logged in, show profile
      mimeeqAuth.mountUserProfile({
        locale: 'de', // German localization
      });
    } else {
      // User is not logged in, show login form instead
      mimeeqAuth.mountLogin({
        onLoginSuccess: () => {
          // After successful login, show profile
          mimeeqAuth.mountUserProfile();
        },
      });
    }
  });
});

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: 'user-profile',
});

mountRoot.render({
  embedType: 'USER_PROFILE',
  locale: 'de', // German localization
});

Get Current User Information

mimeeqAuth.authorization.getUserData()

This method retrieves comprehensive information about the currently authenticated user. It provides access to the user's profile data, including name, email, and other account details. This information is essential for personalizing the user experience, displaying account-specific content, and making authorization decisions in your application.

Business Value

• Personalized User Experience - Access user details to create tailored interfaces and content
• Authentication State Management - Reliably determine if a user is currently logged in
• User-aware Functionality - Enable or disable features based on the current user's identity
• Account-specific Customization - Display user information like name and email in the interface

Return Value

Returns a Promise that resolves to:

• A UserData object when a user is authenticated
• null when no user is currently authenticated
• An AuthError object if an error occurs during retrieval

Usage Example

// Check authentication status and update UI accordingly
function updateAuthenticationState() {
  // Show loading indicator
  document.getElementById('auth-loading').style.display = 'block';

  mimeeqAuth.authorization
    .getUserData()
    .then((user) => {
      // Hide loading indicator
      document.getElementById('auth-loading').style.display = 'none';

      if (user && !('name' in user)) {
        // User is authenticated - update UI
        document.getElementById('guest-content').style.display = 'none';
        document.getElementById('authenticated-content').style.display = 'block';

        // Personalize the interface
        document.getElementById('user-greeting').textContent = `Welcome back, ${user.firstName}!`;
        document.getElementById('user-email').textContent = user.email;

        // Enable user-specific functionality
        document.querySelectorAll('.requires-auth').forEach((el) => {
          el.disabled = false;
        });
      } else {
        // No authenticated user - show guest UI
        document.getElementById('guest-content').style.display = 'block';
        document.getElementById('authenticated-content').style.display = 'none';

        // Disable features that require authentication
        document.querySelectorAll('.requires-auth').forEach((el) => {
          el.disabled = true;
        });
      }
    })
    .catch((err) => {
      console.error('Error checking authentication status:', err);
      // Handle gracefully by assuming not authenticated
      document.getElementById('guest-content').style.display = 'block';
      document.getElementById('authenticated-content').style.display = 'none';
    });
}

// Call on page load
document.addEventListener('DOMContentLoaded', updateAuthenticationState);

// Call when auth state might have changed (e.g., after login/logout operations)
document.addEventListener('mimeeq-user-signed-in', updateAuthenticationState);
document.addEventListener('mimeeq-user-signed-out', updateAuthenticationState);

tip

The getUserData() method is non-invasive and won't attempt to refresh authentication tokens unless necessary. This makes it suitable for frequent checks without causing excessive network traffic.

UserData Structure

When a user is authenticated, the getUserData() method returns a UserData object with the following properties:

Property	Type	Description
userId	string	Unique identifier for the user
firstName	string	User's first name
lastName	string	User's last name
email	string	User's email address (also used as username)
phoneNumber	string	User's phone number (if provided)
isBetaTester	boolean	Whether the user has access to beta features

This data can be used to personalize the user experience, display account information, and make authentication-based decisions in your application.

// Example of accessing UserData properties
mimeeqAuth.authorization.getUserData().then((user) => {
  if (user && !('name' in user)) {
    // Create a personalized greeting
    const greeting = document.createElement('div');
    greeting.className = 'user-welcome';
    greeting.innerHTML = `
      <h3>Welcome, ${user.firstName} ${user.lastName}</h3>
      <p>Signed in as: ${user.email}</p>
    `;
    document.getElementById('header').appendChild(greeting);

    // Show beta features if applicable
    if (user.isBetaTester) {
      document.querySelectorAll('.beta-feature').forEach((el) => {
        el.style.display = 'block';
      });
    }
  }
});