← Web Components

Web Components · Account

<mmm-login>

Standalone sign-in card. Supports email / password and phone OTP via the embedded <mmm-phone-input>. Fires login-success locally and commmerce:auth-changed globally so the rest of the storefront (cart, header) refreshes immediately.

Overview

Drop on /login as the dedicated sign-in page, or inside a dialog for inline auth. Form submission writes the authenticated identity into the SDK; the commmerce:auth-changed event tells other components on the page (<mmm-header-user-account>, cart, wishlist) to re-fetch.

When to use

  • On /login as the dedicated sign-in page.
  • Inside a <mmm-dialog> for inline auth.
  • Embedded above checkout for stores that require login.

Quick start

<script src="https://v2-api-production.commmerce.com/api/v1/web-component/commmerce-sdk.js?store=sample-store"></script>

<mmm-login></mmm-login>

Attributes

AttributeTypeDefaultDescription
theme-modestringlightlight or dark — swaps the default palette. Inline colour attrs still win.
background-colorstring#f5f5f5 (light) / #121212 (dark)Page background.
panel-backgroundstring#ffffff (light) / #1f1f1f (dark)Login-box background.
font-familystringtheme description font / inheritCard font family.
heading-font-weightstringtheme heading weight / 600Heading font weight.
text-primary-colorstringtheme primary text / #111Primary text colour.
text-secondary-colorstringtheme secondary text / #666Subtitle and helper text.
input-stroke-colorstringtheme input stroke / #dddInput border colour.
button-colorstringtheme button fill / #000Sign-in button background.
link-colorstringtheme hyperlink / #0066cc"Forgot password / Sign up instead" link colour.
border-colorstringtheme border / #e5e7ebCard border colour.
border-radiusstringtheme border radiusBorder-radius for inputs, buttons, and card.
button-font-sizestringtheme button size / 14pxButton font size.
button-font-weightstringtheme button weight / 500Button font weight.
button-font-familystringtheme button font / inheritButton font family.
link-font-weightstringtheme link weight / 500Link font weight.

Events

EventTargetPayload
login-successelement (bubbles, composed){ firstName, lastName, email, phone, dialCode }
commmerce:auth-changedwindow{ isLoggedIn: true, userName: string }

Live preview

store sample-store tag <mmm-login>

Examples

1. Default

<mmm-login></mmm-login>

2. Dark-mode card

<mmm-login
  background-color="#0e1011"
  text-primary-color="#fafafa"
  text-secondary-color="#9ca3af"
  input-stroke-color="#2a2e33"
  button-color="#c8a8ff"
  link-color="#c8a8ff"
  border-color="#2a2e33">
</mmm-login>

3. Hook auth events

document.querySelector('mmm-login').addEventListener('login-success', (e) => {
  console.log('Signed in as', e.detail.user.email);
});
window.addEventListener('commmerce:auth-changed', (e) => {
  if (e.detail.loggedIn) location.href = '/account';
});