mmq-auth
Overview
The Mimeeq Auth web component provides complete authentication functionality for your application. It serves as the entry point for all authentication-related features in Mimeeq, handling user authentication flow, session management, and rendering authentication UI components including login, user profile, and password recovery.
This 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>
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
window.location.reload();
});
});
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
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 |
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 |
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 |
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 |
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 |
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
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.
Example
const authComponent = document.querySelector('mmq-auth');
authComponent.mountLogin();
// Handle successful login
authComponent.addEventListener('mimeeq-login-success', (event) => {
console.log('User logged in:', event.detail);
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.
Example
// 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>
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.
Example
const authComponent = document.querySelector('mmq-auth');
authComponent.mountForgotPassword();
// Handle successful password reset with login
authComponent.addEventListener('mimeeq-login-success', (event) => {
console.log('Password reset complete, user logged in:', event.detail);
window.location.reload();
});
Returns
Type: Promise<void>