salla-login-modal
Login and registration modal.
Login and registration modal. It loads Salla's hosted login page in an iframe inside a salla-modal and handles the
result (token, cart sync, page reload). Add it once to the page layout; guests open it by dispatching the login::open
event. It renders nothing when the customer is already logged in. It is not shown at all when both is-email-allowed
and is-mobile-allowed are false (a warning is logged instead).
Events: it fires a bubbling DOM event salla-login:closed on the element when the modal closes, and emits the
salla-login::ready, salla-login::closing and salla-login::closed events through salla.event.
Use it
In HTML or JSX, use the tag <salla-login-modal> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaLoginModal } from '@salla.sa/twilight-components-react/login-modal';Client-only. On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.
Example
import { SallaLoginModal } from '@salla.sa/twilight-components-react/login-modal';
export function Example() {
return (
<SallaLoginModal isEmailAllowed isMobileAllowed />
);
}Open it from a button
```js
salla.event.dispatch('login::open', { source: 'header', withoutReload: false });
## Properties
| Property | Attribute | Description | Type | Default |
| --- | --- | --- | --- | --- |
| `api` | `api` | The store API base URL sent to the login page. Filled from the store config when the page is ready. | `string` | |
| `headers` | `headers` | Extra headers the login page should send with its API requests. Accepts an object of header name to value, or a JSON string of such an object (for example `'{"X-Custom":"1"}'`). An invalid JSON string is ignored. | `string \| { [key: string]: string; }` | |
| `inline` | `inline` | Renders the login iframe directly in the page instead of inside a modal. | `boolean` | |
| `isEmailAllowed` | `is-email-allowed` | Whether login with email is allowed. At least one of `isEmailAllowed` and `isMobileAllowed` must be true for the modal to open. | `boolean` | |
| `isEmailRequired` | `is-email-required` | Whether registration requires both an email and a mobile number. **Deprecated:** Not read by the component or sent to the login page, so it has no effect. It will be removed in the next major version. | `boolean` | `false` |
| `isMobileAllowed` | `is-mobile-allowed` | Whether login with mobile number is allowed. Defaults to `true`. At least one of `isEmailAllowed` and `isMobileAllowed` must be true for the modal to open. | `boolean` | `true` |
| `storeId` | `store-id` | The store ID sent to the login page. Filled from the store config when the page is ready. | `number \| string` | |
| `supportWebAuth` | `support-web-auth` | When true, a successful verification also signs the customer in on the storefront web pages (passed to the auth handler after login). Defaults to `true`. | `boolean` | `true` |
| `withoutReload` | `without-reload` | When true, the page is not reloaded after a successful login. Defaults to `false`, which reloads the page. A `withoutReload` value passed to the `login::open` event overrides it. | `boolean` | `false` |
## Methods
Call these on the element or a React ref.
### `open(_event?: any) => Promise<void | HTMLElement>`
Opens the login modal when the customer is a guest. If the customer is already logged in it reloads the page, unless `withoutReload` is true, in which case it does nothing.
Prefer `salla.event.dispatch('login::open')`, which also checks the allowed login types and creates the iframe.
| Parameter | Type | Description |
| --- | --- | --- |
| `_event` | `any` | Unused. |
Returns `Promise<void \| HTMLElement>`: A Promise that resolves when the call finishes.
## Related
Renders: [`<salla-modal>`](/web-components/salla-modal).
Used inside: [`<salla-user-menu>`](/web-components/salla-user-menu).