Skip to main content

Authentication Events

Authentication events track the Mimeeq login system — from component initialization through login, signup, profile management, and logout. These events come from the <mmq-auth> web component, which provides the full authentication UI (login form, signup, forgot password, user profile).

For setup and component API details, see the <mmq-auth> Component Reference.

Authentication Flow​

  <mmq-auth> component loads
       │
       ▼
  mimeeq-auth-loaded              ← auth service ready, safe to call methods
       │
       ▼
  ┌─── User action ────────────────────────────────────────────┐
  │                                                             │
  │  Login flow:                                                │
  │  mimeeq-enter-login ──► (user submits) ──► mimeeq-login-success
  │       │                                          │          │
  │       └── mimeeq-leave-login (if closed)         │          │
  │                                                  ▼          │
  │                                         mimeeq-user-signed-in
  │                                                             │
  │  Forgot Password flow:                                      │
  │  mimeeq-enter-forgot-password ──► (user resets password)    │
  │       │                               │                     │
  │       └── mimeeq-leave-forgot-password│                     │
  │                                       ▼                     │
  │                             mimeeq-login-success            │
  │                             (if auto-login after reset)     │
  │                                                             │
  │  Signup flow:                                               │
  │  mimeeq-enter-sign-up ──► (user submits) ──► mimeeq-sign-up-success
  │       │                                                     │
  │       └── mimeeq-leave-sign-up (if closed)                  │
  │                                                             │
  │  Profile:                                                   │
  │  mimeeq-enter-profile ──► (user edits) ──► mimeeq-user-updated
  │       │                                                     │
  │       └── mimeeq-leave-profile (if closed)                  │
  │                                                             │
  │  Logout:                                                    │
  │  mimeeq-logout-success ──► mimeeq-user-signed-out           │
  │                                                             │
  │  Account deletion:                                          │
  │  mimeeq-user-deleted  (Tier 2 users only)                   │
  └─────────────────────────────────────────────────────────────┘
enter/leave vs closed events

There are two sets of navigation events. The enter-/leave- events fire when forms are shown and hidden within the auth component's navigation (e.g., switching from login to forgot password). The -closed events (mimeeq-login-closed, mimeeq-profile-closed, mimeeq-forgot-password-closed) fire when the modal itself is dismissed. In practice, you'll usually care about the -closed events for UI cleanup and the enter-/leave- events for analytics.

Events​

mimeeq-auth-loaded​

The <mmq-auth> component has loaded and the authentication service is initialized. This is the earliest safe point to call methods like mountLogin(), mountUserProfile(), or mountForgotPassword().

This event fires once per page when the auth library finishes loading. It does not indicate whether a user is currently logged in — use the auth API to check session state.

Payload: none

document.addEventListener('mimeeq-auth-loaded', () => {
  const auth = document.querySelector('mmq-auth');

  // Check if user is logged in and update UI accordingly
  window.mimeeqAuth.authorization.getUserData().then((userData) => {
    if (userData) {
      document.getElementById('login-btn').style.display = 'none';
      document.getElementById('user-name').textContent = userData.firstName;
      document.getElementById('user-menu').style.display = 'block';
    } else {
      document.getElementById('login-btn').style.display = 'block';
      document.getElementById('user-menu').style.display = 'none';
    }
  });
});
tip

Like mimeeq-app-loaded, the auth component may have already loaded by the time your script runs. There is no window.mimeeqAuthLoaded flag, so wrap your initialization in a check:

function onAuthReady(callback) {
  if (window.mimeeqAuth) {
    callback();
  } else {
    document.addEventListener('mimeeq-auth-loaded', callback, { once: true });
  }
}

mimeeq-login-success​

A user has successfully logged in through the Mimeeq login form. The payload contains the authenticated user's profile data. This fires both from the normal login flow and when a user completes a password reset that auto-logs them in.

After this event, Mimeeq's internal state updates: pricing may change to reflect the user's company, favourites become available, and the basket may load saved items.

Payload: LoginSuccessEventPayload

FieldTypeDescription
firstNamestringUser's first name
lastNamestringUser's last name
emailstringUser's email address
document.addEventListener('mimeeq-login-success', (event) => {
  const { firstName, lastName, email } = event.detail;

  // Update your site's header
  document.getElementById('login-btn').style.display = 'none';
  document.getElementById('user-name').textContent = `${firstName} ${lastName}`;
  document.getElementById('user-menu').style.display = 'block';

  // Sync with your own auth system if needed
  syncExternalAuth(email);

  analytics.track('login_success', { email });
});

mimeeq-sign-up-success​

A new user account was created successfully. The payload contains the new user's profile data. Note that signing up does not automatically log the user in — they may need to verify their email first depending on the tenant configuration.

Payload: SignUpSuccessEventPayload

FieldTypeDescription
firstNamestringUser's first name
lastNamestringUser's last name
emailstringUser's email address
document.addEventListener('mimeeq-sign-up-success', (event) => {
  const { email } = event.detail;
  analytics.track('signup_success', { email });
  showNotification('Account created! Check your email to verify.');
});

mimeeq-logout-success​

The user has logged out. Mimeeq's internal state resets: pricing reverts to public/anonymous, favourites become unavailable, and the session is cleared.

Payload: none

document.addEventListener('mimeeq-logout-success', () => {
  // Revert UI to anonymous state
  document.getElementById('user-menu').style.display = 'none';
  document.getElementById('login-btn').style.display = 'block';

  // Clear any cached user-specific data
  clearUserCache();

  analytics.track('logout');
});

mimeeq-user-signed-in​

Fires after a user session is established. This is a lower-level companion to mimeeq-login-success — it fires in the same scenarios but is dispatched from the session layer rather than the UI layer.

Payload: UserSignedInEventPayload

FieldTypeDescription
firstNamestringUser's first name
lastNamestringUser's last name
emailstringUser's email address

mimeeq-user-signed-out​

Fires after the user session is destroyed. This is the session-layer companion to mimeeq-logout-success.

Payload: none

mimeeq-user-updated​

The user updated their profile information (name, email, password, etc.) through the profile form.

Payload: none

mimeeq-user-deleted​

A Tier 2 (partner/client) user deleted their own account. This is only available for Tier 2 users — Tier 1 (customers) users cannot self-delete. After this event, the session is destroyed and the user is treated as anonymous.

Payload: none

mimeeq-resend-signup-confirm-code​

A signup verification code was resent to the user's email. This fires when the user requests a new code during the email verification step of the signup flow.

Payload: ResendSignupConfirmCodeEventPayload

FieldTypeDescription
emailstringEmail address the verification code was sent to

These events track which auth form is currently displayed. They fire in pairs: enter- when a form appears, leave- when it's hidden (either by navigating to another form or by closing the modal).

EventDescription
mimeeq-enter-loginLogin form shown
mimeeq-leave-loginLogin form hidden (navigated away or modal closed)
mimeeq-enter-forgot-passwordForgot Password form shown
mimeeq-leave-forgot-passwordForgot Password form hidden
mimeeq-enter-sign-upSign Up form shown
mimeeq-leave-sign-upSign Up form hidden
mimeeq-enter-profileUser Profile shown
mimeeq-leave-profileUser Profile hidden

None of these carry a payload.

// Track which auth forms users visit
const authForms = [
  'mimeeq-enter-login',
  'mimeeq-enter-forgot-password',
  'mimeeq-enter-sign-up',
  'mimeeq-enter-profile',
];

authForms.forEach((eventName) => {
  document.addEventListener(eventName, () => {
    const form = eventName.replace('mimeeq-enter-', '');
    analytics.track('auth_form_viewed', { form });
  });
});

These fire when the auth modal itself is dismissed (X button, click outside, escape key), as opposed to the leave- events which fire during internal navigation.

EventDescription
mimeeq-login-closedLogin modal dismissed
mimeeq-profile-closedUser Profile modal dismissed
mimeeq-forgot-password-closedForgot Password modal dismissed

None carry a payload.

Pricing Context Events​

These events fire when a logged-in user changes the pricing context — either by switching companies or changing the price type. They affect which prices are displayed in the configurator and are relevant for integrations that show prices outside the Mimeeq embed.

mimeeq-select-company​

The user changed the active company in the price selector. This is relevant for Tier 1 users who have access to multiple company price lists, or Tier 2 users assigned to companies with specific pricing.

Fires in both standard and modular configurators.

Payload: SelectCompanyEventPayload

FieldTypeDescription
companyNamestringDisplay name of the selected company
companyIdstringUnique identifier of the selected company
document.addEventListener('mimeeq-select-company', (event) => {
  const { companyName, companyId } = event.detail;

  // Update external price displays or fetch company-specific data
  updatePricingContext(companyId);
  analytics.track('company_changed', { companyName, companyId });
});

mimeeq-select-price-type​

The user changed the price type in the price selector (e.g., switching between retail, wholesale, or custom price types configured in the admin panel).

Fires in both standard and modular configurators.

Payload: SelectPriceTypeEventPayload

FieldTypeDescription
typestringPrice type identifier
namestringDisplay name of the price type
idstringUnique identifier of the price type
document.addEventListener('mimeeq-select-price-type', (event) => {
  const { name, id } = event.detail;
  analytics.track('price_type_changed', { priceType: name, priceTypeId: id });
});