Skip to main content

Interface: MimeeqAuth

The MimeeqAuth object provides comprehensive authentication functionality for Mimeeq Embed applications. It handles user authentication, session management, and renders authentication-related UI components.

This object is accessible globally via window.mimeeqAuth once the mimeeqAuth script is loaded. Since the library loads asynchronously, you should listen for the mimeeq-auth-loaded event before attempting to use this object.

NOTE: The UI component methods (mountLogin, mountUserProfile, mountForgotPassword) are deprecated in favor of the newer <mmq-auth> web component. They remain available for backward compatibility.

Example​

// Wait for authentication library to load
document.addEventListener('mimeeq-auth-loaded', () => {
  // Initialize authentication with AWS Cognito
  window.mimeeqAuth.initialize({
    userPoolId: 'us-east-1_xxxxxxxx',
    identityPoolId: 'us-east-1:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'
  }, null, null);

  // Check authentication status
  window.mimeeqAuth.authorization.getUserData()
    .then(user => {
      if (user) {
        console.log('User is logged in:', user);
      } else {
        console.log('No user is logged in');
      }
    });
});

Authentication​

initialize​

initialize: InitializeAWS

Initializes the authentication module with AWS Cognito, S3, and AppSync configurations.

In most implementations using <mmq-auth> or <mmq-embed> components, this initialization is handled automatically using the global window.mimeeqEmbedEnv configuration. Direct calls to this method are typically only needed for custom implementations.

Example​

// Standard usage with mmq-auth component (initialization happens automatically):
// <mmq-auth short-code="your-short-code"></mmq-auth>

// For custom implementations, you can use the global environment config:
const { cognitoConfig, s3Config, appSyncConfig } = window.mimeeqEmbedEnv;
window.mimeeqAuth.initialize(cognitoConfig, s3Config, appSyncConfig);

// Or provide your own configuration:
window.mimeeqAuth.initialize({
  userPoolId: 'us-east-1_xxxxxxxx',
  identityPoolId: 'us-east-1:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
  userPoolClientId: 'xxxxxxxxxxxxxxxxxxxxxxxxxx',
  region: 'us-east-1'
}, {
  bucket: 'my-mimeeq-assets'
}, {
  endpoint: 'https://xxxxxxxxxx.appsync-api.us-east-1.amazonaws.com/graphql'
});

Param​

Parameters for authentication with AWS Cognito

Param​

Configuration for S3 storage service, or null if not needed

Param​

Configuration for AppSync GraphQL API, or null if not needed

Returns​

A promise that resolves when initialization is complete

Authorization​

authorization​

authorization: Authorization

Contains core authentication methods for signing in, signing out, retrieving user data, and managing authentication flow.

This object provides direct access to authentication operations without the need to mount UI components.

Example​

// Check if user is logged in
window.mimeeqAuth.authorization.getUserData()
  .then(user => {
    if (user) {
      console.log('User is logged in:', user);
    } else {
      console.log('No user is logged in');
    }
  });

mountForgotPassword​

mountForgotPassword: MountForgotPassword

Displays a modal dialog for password recovery.

This method renders a complete forgot password flow, allowing users to request a password reset and enter the verification code.

NOTE: This method is deprecated. Please use the unified mount method instead, or the <mmq-auth> web component for new implementations.

Example​

// Deprecated approach
window.mimeeqAuth.mountForgotPassword({
  uid: 'forgot-password-container',
  customerId: 'customer123',
  locale: 'en'
});

// Recommended approach using mount
const mountRoot = await window.mimeeqAuth.mount({
  CDNPath: 'https://cdn.example.com',
  baseURL: 'https://api.example.com',
  customerId: 'customer123',
  node: document.getElementById('auth-container'),
  uid: 'forgot-password'
});

mountRoot.render({
  embedType: 'FORGOT_PASSWORD'
});

Deprecated​

Please use the unified mount method instead, or the <mmq-auth> web component

mountLogin​

mountLogin: MountLogin

Displays a modal login dialog.

This method renders a complete login form with username and password fields, as well as links to forgot password functionality.

NOTE: This method is deprecated. Please use the unified mount method instead, or the <mmq-auth> web component for new implementations.

Example​

// Deprecated approach
window.mimeeqAuth.mountLogin({
  uid: 'login-container',
  customerId: 'customer123',
  locale: 'en',
  onLoginSuccess: (user) => {
    console.log('User logged in successfully:', user);
  }
});

// Recommended approach using mount
const mountRoot = await window.mimeeqAuth.mount({
  CDNPath: 'https://cdn.example.com',
  baseURL: 'https://api.example.com',
  customerId: 'customer123',
  node: document.getElementById('auth-container'),
  uid: 'login-form'
});

mountRoot.render({
  embedType: 'LOGIN',
  onLoginSuccess: (user) => {
    console.log('User logged in successfully:', user);
  }
});

Deprecated​

Please use the unified mount method instead, or the <mmq-auth> web component

mountUserProfile​

mountUserProfile: MountUserProfile

Displays a modal dialog showing the user profile information.

This method renders the user profile interface where users can view their account details, including password and credential management. This is only accessible for authenticated users.

NOTE: This method is deprecated. Please use the unified mount method instead, or the <mmq-auth> web component for new implementations.

Example​

// Deprecated approach
window.mimeeqAuth.mountUserProfile({
  uid: 'user-profile-container',
  customerId: 'customer123',
  locale: 'en'
});

// Recommended approach using mount
const mountRoot = await window.mimeeqAuth.mount({
  CDNPath: 'https://cdn.example.com',
  baseURL: 'https://api.example.com',
  customerId: 'customer123',
  node: document.getElementById('auth-container'),
  uid: 'user-profile'
});

mountRoot.render({
  embedType: 'USER_PROFILE'
});

Deprecated​

Please use the unified mount method instead, or the <mmq-auth> web component

Other​

mount​

mount: MountAuth

Unified method to mount any type of authentication-related embed.

This method creates and configures a React-based rendering context for authentication components, returning a mount root object that allows you to render specific authentication UIs (login, user profile, forgot password) and unmount them when needed.

When using <mmq-auth> component, this method is called internally with the proper configuration derived from window.mimeeqEmbedEnv.

Example​

// Mount an authentication component
const mountRoot = await window.mimeeqAuth.mount({
  CDNPath: window.mimeeqEmbedEnv.CDNPath,
  baseURL: window.mimeeqEmbedEnv.APIPath,
  customerId: 'customer123',
  node: document.getElementById('auth-container'),
  uid: 'auth-embed'
});

// Render a login form
mountRoot.render({
  embedType: 'LOGIN',
  onLoginSuccess: (user) => {
    console.log('User logged in successfully:', user);
    window.location.reload();
  }
});

// Or render a user profile
mountRoot.render({
  embedType: 'USER_PROFILE'
});

// Or render a forgot password form
mountRoot.render({
  embedType: 'FORGOT_PASSWORD',
  onLoginSuccess: (user) => {
    console.log('Password reset successfully, user logged in:', user);
    window.location.reload();
  }
});

// Unmount the component when done
mountRoot.unmount();

Param​

Configuration options for mounting the authentication component

Returns​

A promise that resolves to an object with render and unmount methods